使用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进行注册，之后邮箱会收到验证邮件，记住 *一定要验证信息 * ，不然不能使用GitHub Pages服务。

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

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

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

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

2.安装Git for Windows

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

git --version

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

3.配置Hexo

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

node -v
npm -v

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

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

npm install hexo-cli -g

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

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

cd e:/
hexo init MyBlog

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

cd MyBlog
npm install

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

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

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

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

这样可以在部署之前检查问题，如果要停止服务器可以按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中输入：

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

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

cd ~/.ssh
ls

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

ssh-keygen -t rsa -C "youremail"

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

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

现在可以试试SSH key是否有效，在GitBash中输入：

ssh -T git@github.com

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

npm install hexo-deployer-git --save

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

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

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输入：

hexo new "文章标题"

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

---
title: 文章标题
date: 创建文章的时间
tags: 文章标签
---

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

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

美化主题

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

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

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

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快速搭建个人博客

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

---

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