使用Hexo + GitHub Pages搭建个人博客详解

前言

其实我的博客在今年6月份就开始搭建了,当时是参加了Google的studyjams活动,有一个阶段就是需要搭建自己的个人博客,在那之前,我并没有真正接触过博客,虽然之前有接触过一些编程方面的知识,但也是在那时候,真正开启了我的编程之旅。好像有点扯了,回归正途,当时由于活动需要,我跟着博主Sunwhut的如何利用GitHub Pages和Hexo快速搭建个人博客走了一遍,大致弄出了博客的雏形,不过由于简单搭好之后一直没有时间完善和编写博客(因为博主菜啊==,时间都用来入门了),直到前几天,终于扛不住了,觉得还是要有个地方记录和分享感想的地方,虽然已经有了形如CSDN,简书等不错的平台,但哪有自己的地方用着舒服,于是我又开始折腾起博客。

想起之前跟着教程搭建的时候还是遇到了不少的坑,翻阅了很多搭建博客的教程,感觉有些很容易阻挡小白的细节被忽略了,于是乎,我翻出了Hexo和GitHub Pages的官方文档折腾了起来。刚完工,虽然目前还不是特别完善,日后一定会丰富起来的。在这里记录下整个过程,希望能对自己对大家都有一定的帮助。这篇文章会长到让你不想看,不过你静下心来看肯定会有收获!下面请认真听(敲黑板!)。

基础环境准备

“工欲善其事,必先利其器”,这句话是很有道理的,只有把准备工作做足了,后面的过程才不会给自己留下太多坑。搭建博客的方法有很多,可以像建站那样实打实的以前端的姿态完成自己的博客,相信大家和博主一样,不会有很多时间去像管理个人网站一样去管理博客的后台,我们只想安安静静的写个博客而已,所以选择云托管平台和别人搭好的博客框架是比较明智的,这种组合也有很多,因为没用过不做评价,我选择了口碑不错的一组组合来完成我的博客搭建。以下就是要准备的工具了:

1.GitHub Pages

作为程序员的你,一定听说过Github,如果没有,出门左拐有谷歌,不会?!好好反思一下再来吧。GitHub对于遨游在代码世界的我们是再熟悉不过了,即使你和我一样没有过很多次的push也应该知道他是干嘛的。而GitHub Pages是GitHub推出的一项用于托管静态网站的服务,我们可以把博客的静态页面托管在上面形成博客平台。下面的原因足以证明GitHubPages能够胜任这项工作:

  • GitHub提供1GB仓库大小(总大小,超过1GB会有限制),放放代码足够了
  • 每月100GB的带宽和10万次请求
  • GitHub和程序员关系密切,管理博客相当简单

GitHubPages有两种基本的托管页面:第一种是个人/组织主页,这种页面每个账号只能一个,因为它必须要以用户名命名仓库名,而且有固定的命名方式,这个后面再说;第二种是项目的托管页面,每个项目都可以有。我们自然选择第一种来托管自己的博客了。

因此,我们需要的第一个工具是GitHub账号,后面搭建过程会详细介绍。

2.Git

Git是一种版本控制工具,我们后期会借助Git来完成博客的部署。会一些日常用的命令就行,文章里也会介绍,如果你还没有了解过或者想了解更全面的关于Git的知识,可以下载学习Git官方推荐书籍:
《Pro Git第二版·英文版》
《Pro Git第二版·中文版》

至于客户端的下载,你可以选择Git For Windows或者GitHub的图形界面,推荐前者,操作更简单,而且逼格满满。后面会提到安装过程。

3.Hexo

Hexo出自于Tommy Chen之手,基于Node.js,是一个快速、简洁而且高效的静态博客框架。可以快速生成页面,支持 Markdown 的书写格式,可以一键部署到云端,另外,如果有需要的话,它还支持丰富的插件。

因此,选择Hexo作为博客框架也是不错的,由于它基于Node,我们还需要准备好Node.js安装包。如果你的电脑上还没有Node的话,可以在这里下载最新版安装包,或者使用更快捷的nvm方式下载最新的Node,不过只有Mac和Linux是官方支持的,Windows平台是第三方的。详情参考nvm文档

如果这些都准备好了,不要着急,下面我们就一起来一步步完成博客的搭建。

搭建过程

看了前面的一些理论知识如果觉得有点无聊的话,现在就是大显身手的时候了。

1.GitHub Pages相关配置

上面说到我们需要注册一个GitHub账号来使用GitHub Pages服务,点击进入GitHub主页,你会看到如下界面:

sign_up_for_github

根据提示填写相关信息,推荐使用常用邮箱,方便。点击Sign up for Github进行注册,之后邮箱会收到验证邮件,记住 一定要验证信息 ,不然不能使用GitHub Pages服务。

拥有GitHub账号之后,登陆GitHub主页,新注册的账户都是这样的界面:

new_home_page

新注册的用户可以点图示的New repositery创建新的仓库,或者老用户点击右上角的展开下拉菜单里也有New repositery按钮,点击之后按下图设置好仓库属性:

craete_repository

一定要看清仓库名的填写要求,之前也提过要用特定格式命名,username.github.io就是使用个人主页的固定命名方式 ,也是以后博客的域名。这是GitHub Pages的规定,要记住!。之后你会看到这样的界面:

new_repository

至此,你就拥有了自己在GitHub上的博客仓库了,只等着添加内容进去,我们把添加内容的事先放一放,接着打基础。

2.安装Git for Windows

还记得之前下载的Git for Windows安装包么,现在就像安装普通软件一样进行双击安装就行,完成之后,你会在开始菜单栏找到GitBash这个软件,这就是Git的控制台,打开GitBash并输入如下指令来检测Git是否安装成功:

1
git --version

如果显示出了git相应的版本信息,那么说明Git安装成功了。

3.配置Hexo

上面也说过,因为Hexo是基于Node搭建的,所以我们需要在电脑安装Node的环境才能安装和运行Hexo。先找到之前下载的Node.js安装包,如果你使用的是nvm的方式,那么就忽略安装Node这一过程。Node的安装也很简单,双击之后一路Next就行了。完成之后也可以使用命令行检测是否安装成功,在GitBash中输入如下指令:

1
2
node -v
npm -v

同样,如果出现了显示版本信息的数字则表明安装成功。

Node安装完毕之后,就有了基础安装Hexo了,输入以下指令:

1
npm install hexo-cli -g

安装完成之后你会看到类似下面的界面:

install_hexo

如果你看到一个WARN提示,属于正常情况,不影响使用。接着输入下面的指令来初始化Hexo,这一步会产生你的本地博客文件:

1
2
cd e:/
hexo init MyBlog

解释一下这两行命令,首先是利用cd命令进入e盘,在e盘执行hexo init命令来初始化生成博客文件,后面是我准备放本地博客文件的文件夹名称,可以改成你喜欢的,第一步中的路径也可以随意选择。这两步执行完毕我会在e盘根目录下发现多出了一个名为MyBlog的文件夹,而你相应的目录下也出有一个相应名字的文件夹,这个文件夹,我们通常叫站点所在文件夹。此时再运行如下命令:

1
2
cd MyBlog
npm install

这两行命令会在站点所在文件夹中安装Hexo需要的组件,当你看到下图中红框中的提示时,表示你本地的博客框架已经没有问题了。

hexo_init

不信的话你可以试试下面指令:

1
2
hexo g #运行之后会出现一长串字符,这是在生成运行环境
hexo s #运行之后会出现Hexo is running at http://localhost:4000/.

这两个命令是以后经常会用到的,第一个是生成运行环境,会在站点所在文件夹下多出一个.public的文件夹,这里面的内容就是后面要部署到github上的内容。第二个命令是开启服务器,在本地4000端口预览博客,打开浏览器输入http://localhost:4000/能看到效果如下:

localhost

这样可以在部署之前检查问题,如果要停止服务器可以按Ctrl+C,看到提示再输入y。另外还可以使用hexo clean命令来清楚缓存,也就是删除.public文件夹,如果以后出现一些看不懂的bug,可以试试先clean再重新hexo g也许可以解决。

至此,Hexo的基本配置也完成了,就剩下最后一步把本地的博客部署到GitHub就完成一个基础的博客了。还等什么,赶紧来吧!

4.部署Hexo到GitHub

我们GitHub端和本地Hexo已经分别配置好了,但是现在它们还是相互独立的两个个体,我们要把本地的博客文件部署到GitHub端首先要使这两个个体产生联系,这时就需要用到之前安装的Git了,用Git添加SSH key,获取GitHub上传文件的权限,SSH key是GitHub的一种验证机制,如果某天你想用Git上传文件到GitHub发现报错Permission denied (publickey)就是因为没有配置SSH key。除此之外,要把Hexo部署到GitHub,还需要给Hexo安装一个插件hexo-deployer-git,我们现在来实际操作。

首先配置SSH key (如果配置过的可以跳过这一步)。在GitBash中输入:

1
2
git config --global user.name "yourname" #"yourname"指github的账户名
gti config --global user.email "youremail" #"youremail"指github的注册邮箱

这一步相当于在Git登陆了你的Github账号,你可以输入不包含”yourname”/“youremail”的相应命令来查看当前登录的账户。可以通过下面命令检查本地是否生成过key:

1
2
cd ~/.ssh
ls

这两条命令是用来检测本地是否存在id_rsa.pub或id_dsa.pub文件,如果没有的话,第一条命令执行完就会提示不存在,也可以去C:\User\yourusername\文件夹中找找看有没有.ssh文件夹,如果.ssh文件夹中有上面提到的两个文件则说明已经生成了key,不用再创建key。如果没有,那就创建一个,输入:

1
ssh-keygen -t rsa -C "youremail"

现在可以回之前的.ssh去找id-rsa.pub了。然后回到GitHub的主页,点击下拉选择settings,会出现如下界面;

SSH Key

按图中选择New SSH key,用文本编辑器打开id_rsa.pub,将里面的内容全部复制到GitHub界面上名为key的文本框里,上面的title可以自定义,保存就ok了。

现在可以试试SSH key是否有效,在GitBash中输入:

1
ssh -T git@github.com

如果看到You’ve successfully authenticated说明配置成功了。现在已经把GitBash和GitHub云端连接起来了,可以向GitHub上传文件了,刚刚有说过,要把博客部署到GitHub,还需要一个hexo-deployer-git插件,在GitBash中通过cd命令进入站点所在文件夹,输入:

1
npm install hexo-deployer-git --save

这个插件可以通过Git命令将博客部署到GitHub,还有最后一步,我们就可以通过博客的域名来在线访问自己的博客了。在站点所在文件夹找到_condig.yml,用文本编辑器打开并滑倒最底部修改里面的内容如下:

set_deployment

这里要注意,凡是修改配置文件,属性名的冒号后面一定要有一个空格才能加属性值,不然会报错。现在真的是大功就要告成了,回到GitBash中,输入:

1
2
3
hexo clean
hexo g
hexo d #这个命令就是将本地博客部署到GitHub上的

如果还需要本地预览的话,可以向之前那样将hexo d改为hexo s然后在http://localhost:4000预览最终效果,不需要预览的话就直接部署博客,部署完成就可以使用博客域名(yourusername.github.io)来访问博客了,可以把这个链接分享给小伙伴们,让他们来浏览你的博客,完美~

发表你的博文

辛辛苦苦终于把博客搭建好了,不过目前为止好像都没有提到过怎么样发表博文,不会发表博文的博主不是好程序员,接下来再介绍发表博文的有关步骤。

学会使用Markdown格式书写

发博文之前,一定要会写,这个会写跟文采无关,是技术上的会写。之前有提到Hexo支持Markdown书写格式,没接触过的人可能觉得写个博客而已,又要学新的语言…不要着急,Markdown是一款轻量级的书写语言,保证你用过之后会无法自拔的爱上它。因为它不仅书写简单,而且边写边排版,再也不用花十分钟写却要半小时排版了。

Markdown的语法相当简单,写着写着就会了,可以参考一下文档学习Markdown语法:

Markdown语法说明(简体中文版)
Markdown语法手册(完整整理版)
Cmd Markdown编辑阅读器,这个在线编辑器左边写右边显示效果,可以用来练手。

现在懂了Markdown语法,那在哪里写呢?我们要挑一个Markdown编辑器,Markdown的编辑器也有很多,可以到网上搜索,如果不想搜就试试博主的推荐,文本编辑器Sublime Text配Markdown插件,这个不是吹,如果喜欢捣鼓,可以把ST当IDE用,博主用它用的很爽,具体方法自己搜哟,也欢迎在下面留言~让博主为你解答。

新建博文

大家应该注意到了,我们之前部署好的博客里面已经有了一篇名为Hello World的文章,这篇文章可以理解为系统自带的,不过我们也可以把它删掉,删之前,博主一定要告诉大家,如果你的博客里一篇文章都没有的话,不能本地预览,也不能部署到GitHub,因为会报错。所以在写出自己的文章之前,这一篇Hello World还是删不得啊。

那么这篇文章到底在哪呢?有两个地方,一个是站点所在文件夹的source目录下的_posts文件夹里,你博客里面的文章都是放在这个文件夹里;还有一个,聪明的你一定想到了在.public里面了,因为之前说在执行hexo g指令的时候就会把部署到GitHub的文件都放到.public里面,这样便于管理,也不会把一些不必要的文件上传。我们修改当然是修改站点文件夹里的文件了,进去之后你回发现,那篇Hello World的后缀名是.md,没错,这就是Markdown格式的文件,会自动识别Markdown语法。

既然我们可以通过删除本地文件重新部署的方式来删除博文,当然也可以新建一个md文件咯,是的,这是其中的一种方法,另外一种当然是用命令行来新建了,打开GitBash输入:

1
hexo new "文章标题"

执行完成之后,你可以在_posts文件夹中找到刚刚新建的md文件了,打开之后你会发现和收到创建的不一样,通过命令行创建的md文件里面有内容:

1
2
3
4
5
---
title: 文章标题
date: 创建文章的时间
tags: 文章标签
---

这个就是通过默认的样式来创建了一篇文章,你可以对上面的内容进行修改比如添加标签之后再往下接着写文章,也可以直接开始往下写。写完保存之后,就可以通过hexo ghexo d来更新你的博客。只要你修改了博客里面的任意内容而且想要应用这种改变的话,就需要用这两个命令来更新GitHub端的文件。到这里,你就可以自己编写并且发表博文了!是不是很开心!

你可能会问,默认的样式在哪里,可不可以自定义创建文章的样式,Of Cause!不过上面说的足够平常发文用的了,如果想深入了解可以研究Hexo官方文档

美化主题

现在你已经可以发表自己的文章到博客里了,但是发现没有,默认的主题并不是很美观,下面我们要做的事就是换掉主题,犒劳犒劳自己的眼睛。

Hexo除了默认的主题以外,还为我们提供了很多特别漂亮的主题,可以到官方主题站搜索自己喜欢的主题,也可以去万能的网上搜索,也有很多不错的主题,都会附有配置解释文档的。博主选择的是NexT,就是你现在看到的这个,官方配置文档在此,我就不再啰嗦了,我得配置也不一定合你胃口,照着官方文档来总折腾出你喜欢的主题的~

安装主题的统一方式是,打开GitBash,用cd进入站点所在文件夹,输入:

1
git clone 主题GitHub仓库地址 themes/主题名

还记得我们部署博客时修改过的_config.yml文件吗,这是一个配置文件。每个主题的文件夹里也有一个这样的文件,前者是站点配置文件,可以修改博客的相关属性,后者是主题配置文件,可以修改主题的相关属性。下载好主题之后,要想应用主题当然是修改站点配置文件,在站点配置文件里找到theme字段,将属性值改为主题名(就是你保存主题时的文件名)。

好了,美化主题就是这样了,有问题可以在下面留言哟~

为博客选择图床

我们已经会写博文发博文了,不过现在写的博文应该都是纯文字的,如果想要给博文配图要怎么办呢?通过Hexo官方文档以及Markdown语法的学习,我们知道了给博文配图有以下两种方法:

1.通过把图片存放到相应的资源文件夹,随博客一起部署到GitHub。这种方法其实就相当于把图片存放在GitHub上了,只是大家都知道GitHub在国内的速度其实不是很乐观,而且随着博文数量的增多,图片的大容量会把GitHub的容易用完,那就GG了。

2.通过利用Markdown语法给博文添加图片链接,在观看博文的时候在线加载图片。

上面两种方法很明显能对比出来,第二种方法比第一种好太多,那么这个图片链接(称为外链)从哪里来呢?我们要把图片存放在哪呢?这时候,图床就出现了。

顾名思义,图床就是存放图片的地方,而且可以利用图床对相应图片产生的外链在博文在插入图片。图床的种类也是一搜一大把,不过我转了一圈,还是觉得七牛比较实在,所以图库也有了选择。

按照七牛提供的步骤注册,如果大家也选择使用七牛的话,可以通过这个注册链接进行注册,可以帮我获得5GB/月的流量,先谢过了!注册完成可以看到,其实免费容量和流量都只有1GB,身份认证后会翻十倍,认证可以换来10GB的容量和10GB的CND流量,还是很划得来的。

这里的容量是指云空间的存储容量,流量是指访问图片产生的流量,也就是如果一张10k的图片访问10次会产生100k的流量,所以写博客的图片最好还是控制下大小,想要高清无码就准备大量银子吧。

10GB的容量和流量对于写博客来说是够的,不过在你余额为零的情况下,是不能使用自定义域名来控制图片外链的,我曾因为这个想去找其他图床,不过实在没有更好的,而且使用默认的图片外链其实影响不大,如果有强迫症就充10块钱吧,总体来说,七牛的免费额度写写博客应该是够够的。另外再给大家推荐一个工具qshell,这是七牛官方的上传工具。因为使用网页上传然后再复制外链太麻烦了,试试qshell吧,命令行操作,相当快捷而且酷,你会爱上它的~

将博客同时部署到Coding

当上面的一切都已经完成以后,本来是可以安安静静的写博客了,不过GitHub在国内的访问速度着实令人着急,不过还好,国内有了和GitHub一样的圣地,那就是Coding,大家可以同时把博客部署到GitHub和Coding,当你的博客有访客时,国内网走Coding,国外网走GitHub,解决了GitHub网速慢的问题~

由于在绑定自定义域名之前,访问GitHub Pages和Coding Pages的网址是不一样的,而我的域名此时正在实名审核中,所以关于这一块的内容大家自行Google~

访问GitHub Pages使用:yourusername.github.io
访问Coding Pages使用:yourusername.coding.me

后记

这篇博客终于写完了,之前以为搭建博客会是一个很艰难得过程,搭完才发现也还挺轻松的,而且作为一名程序猿,以后的道路上怎么可能少得了折腾这两个字?!!所以,如果有想法,大胆的去做吧,日后你会感谢现在拼死拼活的自己。

回想整个过程,我参考了各种官方文档,深感官方文档无疑是最基础的答疑手册,英文文档也没什么好怕的,上去就是干。当然也得感谢那些博主的经验为我铺了路,以下是参考文档(排序无先后):

GitHub Pages官方说明文档
Hexo官方文档
NexT主题官方文档
qshell七牛官方文档
如何利用GitHub Pages和Hexo快速搭建个人博客

最后的最后,如果你有任何疑问或者对我的文章有好的建议,无限欢迎给我留言~


文章属原创,欢迎转载,但请务必保留原文链接!

呼啦啦...