Hexo+GitHub Pages搭建个人博客

本文在我的个人博客地址：http://www.stormxing.com/2017/09/21/2/#more
[toc]

最近系统被玩坏了，没有提前备份数据，重新搭建博客又得到处找文章，
这里记录一下搭建流程，方便查阅。

什么是Hexo

---

官方解释：Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
个人理解：hexo就是一个静态网页生成器，可以将搭配主题的markdown文章一键生成精美静态网站。
类似的还有Jekyll

什么是GitHub Pages

---

GitHub Pages是github提供的一个存储静态网站的服务，并且提供域名，每个github用户只可拥有一个。
类似的还有Coding Pages

博客搭建流程

---

安装Git——安装Node.js和npm——安装Hexo及相关组件——本地测试运行——安装主题——注册GitHub pages——绑定ssh key——部署网站——绑定域名

安装环境说明

---

由于我是从windows转到Ubuntu的，所以这两种系统我都会说明，他们只在前面安装软件上有区别，其他的基本一样。

安装Git

---

windows

在官网下载git，双击exe后一路默认点下一步即可完成安装。传送
重要说明：安装git完成后会有一个“git bush”，后面的所有命令操作都在这里完成，cmd最好不要用。另外windows的git bush默认无法粘贴命令，可参考。

ubuntu

ubuntu自带git，终端里一条命令搞定

 apt-get install git 

之后的命令操作在终端里完成。
输入”git –version”如果出现版本号，则代表安装成功。

安装Node.js和npm

---

winsows

安装node.js
官网下载node.js后一路默认点下一步即可。传送
npm
windows版的node.js集成了npm，所以无需安装。

ubuntu

安装node.js
执行以下两条命令即可。

curl -sL https://deb.nodesource.com/setup_8.x]https://deb.nodesource.com/setup_6.x | sudo -E bash -sudo apt-get install -y nodejs

ubuntu安装node.js的方法较多，这种是换源下载的方法，如果失效，请自行搜索其他方法下载。
安装npm
执行以下两条命令

npm config set registry https://registry.npm.taobao.org/sudo apt install npm

安装完成后可查看是否安装成功。

安装Hexo及相关组件

---

随便找个地方新建一个文件夹，可命名为“blog”，之后的所有操作都将在这个文件夹里完成，hexo及相关组件也将安装在这个文件夹里。
windows进入到blog文件夹，右键点击“git bush here”，ubuntu进入到这个目录右键打开终端。
windows

npm install -g hexo    #安装hexohexo init   #初始化blog目录hexo i   #安装服务npm install hexo-deployer-git --save  #安装上传组件

ubuntu

sudo npm i -g hexo   #安装hexohexo init   #初始化blog目录npm install   # 安装依赖包

本地调试运行

在blog文件夹里打开命令，之后都在这个文件夹里打开命令。
输入

hexo g   #生成静态网页hexo s   #启动本地服务器

这时候在浏览器里输入“http://localhost:4000”可看到“hello world”网页

如果windows什么都没出现的话，极有可能是端口被占用，这也是windows的常见问题，请参考文章http://blog.liuxianan.com/windows-port-bind.html
这里加载的是hexo自带的一个默认主题和一个默认的”hello world”网页。默认主题功能太少，什么都没有，所以接下来要更换主题。

安装主题

---

Hexo提供非常多精美主题，这是官方主题
个人比较推荐两个主题：Next和yilia
这里可自由选择一个，安装主题的方法和主题配置相关网站都有。
本文只介绍next主题的安装及简单配置。

安装Next主题

如果会用git，可参考官方文档进行安装
在blog目录下

git clone https://github.com/iissnan/hexo-theme-next themes/next

之后可在blog下的thems里面看到有一个next文件夹，这就是刚下载好的主题。

配置并启用主题

在blog目录下有一个站点配置文件_config.yml
打开站点配置文件， 找到 theme 字段，并将其值更改为 next
执行以下命令即可看到next主题最基本的样子

hexo ghexo s

也可以用组合命令

 hexo s -g 

看到这里你可能觉得这比默认主题内容还少，其实，它只是很多功能都还没有开启而已。更多主题配置可参考官方文档。

如何添加文章

执行命令

 hexo new "文章名"

之后在blog/source/_post文件夹下有一个“md格式的文件

打开新建的文章，title里面是文章标题，date是自动生成的日期，你也可以自由更改，将要写的内容放在“—”下面，建议用“markdown”书写。
这个文件你也可以手动建，但是上面的这些内容必须手动添加进去。
执行hexo s -g刷新浏览器就可以看到刚写的文章了。

Hexo常用命令总结

hexo g   #生成网页hexo s   #启动本地服务hexo d   #将网站递交到远程仓库hexo s -g   #组合命令，生成网页并启动本地服务hexo d -g   #组合命令，生成网页并递交到远程仓库hexo clean   #清除刚生成的网页

注册github pages

---

上面已经搞定了本地网站，如何将它放在网络上并且可以被访问到呢，这就须要用到github上的github pages服务了。这个服务是免费的
当然，如果你不差钱的话，可以氪金去买服务器和空间。

注册github

注册github账号这里就不详述了，能看到这篇文章的人基本都有，如果没有github官网上注册一个就行了，非常简单。

新建github pages仓库

仓库名填写用户名.github.io，要严格按照这个格式来填写，否则可能出错，然后点“Create repository”就可以了。由于我之前建过了，所以这里有错误提示。

这时候点击刚建的这个仓库，点“Settings”在网页的下面你会看到github为你的这个仓库提供了一个域名地址，通过这个地址就可以访问你的网站。当然这时我们还没上传网站呢。

我们的本地网站文件是存放在blog里面public文件夹里的。你可以直接将public文件夹里的所有文件直接上传到这个仓库里，然后就可以通过这个地址直接访问网站了。
但是直接上传，过于麻烦，而Hexo可以一条命令完成网站部署。

绑定SSH key

---

什么是SSH key，它是用git和Hexo将本地网站上传到github的验证密匙。如果没有这个密匙也可以用https上传，但需要每次输入密码。

生成ssh key

ssh-keygen -t rsa -C youremail

例如ssh-keygen -t rsa -C [e-mail]
输完命令之后连续按三个回车即可完成。

查看SSH key

SSH key在刚生成的id_rsa.pub文件里。我们需要打开这个文件并将其内容复制下来。
windows和ubuntu打开这个文件的方式有所不同。
windows的id_rsa.pub文件在C:\Documents and Settings\Administrator\目录里，“Documents and Settings”是系统高级隐藏文件夹，并且一般用户没有访问权限，如果你找不到这个文件夹或者打不开它可以参考：http://jingyan.baidu.com/article/e3c78d64b169f83c4c85f521.html
ubuntu
输入以下两条命令，红框中的内容就是ssh key，将其复制下来。

cd ~/.sshcat id_rsa.pub

添加ssh key

进入github，右上角点头像——>Settings——>SSH and GPG keys——>New SSH key，将ssh key粘贴进去，点添加就可以了。

验证ssh key是否添加成功

输入以下命令出现“successfully”就代表添加成功了。
请注意ubuntu还需要输入“yes”，windows无此操作

ssh -T [e-mail]

部署网站

修改blog目录下的站点配置文件_config.yml
在文件最后添加如下内容，将“stormxing”改成你自己的github用户名。
请注意每个冒号后面都有空格。

执行命令

hexo s -g

后执行

hexo d

即可将public文件夹里的网站提交到github。
在浏览器输入“your_name.github.io”即可访问你的网站。
有时本地文件会出错，执行hexo clean即可清除public文件夹。之后再重新提交。
每次访问自己的网站都要输入这个github给的网址很麻烦，有没有逼格更高的方法？——绑定域名。

绑定域名

---

通过自己注册的域名来访问网站，可以使网址更简洁，更有b格。
比如我的www.stormxing.com和stormxing.com都可以访问。

注册域名

• 目前国内的域名注册商有“阿里云”和“腾讯云”。
• 国外的比较出名的有Godaddy。
• 个人建议注册国内的，虽然要实名制，但是使用起来比较方便。
• 我的域名是在“腾讯云”注册的，所以这篇文章将演示在腾讯云注册域名和配置域名解析。不过不管在哪里注册，操作基本都一样。
  进入到腾讯云官网，点域名注册，之后想个名字查询一下，如果没有人注册，就挑一个买了。买完之后最好立即上传身份信息实名认证一下，过几天就会通过。在此期间域名也是可以使用的。

　配置域名解析

这个步骤主要是让你的域名能够直接访问github仓库。
配置域名解析的方法其实是有两种的。这里我都会说明。

方法一、添加CNAME解析（推荐）

点控制台，找到你的域名后点解析，就可以操作了。这是我的域名解析记录。其中红框的两个就是解析到github仓库的。

点击上图中的“添加记录”，记录类型改为“CNAME”，主机记录为“ｗｗｗ”，记录值为你的github仓库名，例如stormxing.github.io。其他的不要动，直接点保存就可以了。
之后再添加一条记录，记录类型为“CNAME”，主机记录为“＠”，记录值为你的github仓库名，然后点保存。

方法二、添加Ａ记录解析（不推荐）

还是添加两条记录。
第一条，记录类型为“Ａ”，主机记录为“ｗｗｗ”，记录值为你的github仓库的ip地址。
在命令行里执行

ping storming.github.io

stormxing换成你的用户名。
之后会得到一个ip地址，这个ip地址就是记录值。
第二条，记录类型为“Ａ”，主机记录为“＠”，记录值为ip地址。

为什么不推荐这种方法，主要是这个ip地址可能会变动。你可能很久之后会出现无法访问的情况。

最后的一点小设置

• 上面配置了域名解析后其实还是无法通过域名访问网站的。
• 点击你的仓库然后点“settings”将网页拉到下面，在红框中输入你的网址，然后点save就好了。这时等几十秒，在浏览器中输入你的网址就能访问了。
• 如果你之前用的是Ａ记录解析，则这里只填一级域名，即去掉主机记录“ｗｗｗ”。

• 完成了上面的设置后在你的仓库中会多出一个名为“CNAME”的文件，这个文件里面的内容为你刚填写的域名地址。
  如果下次执行了”hexo d”这个文件就会被删掉，就需要重新再填写一次，很麻烦，所以在blog文件夹下的source文件里新建一个无格式的名为“CAME”文件，里面填写自己的域名地址，例如www.stormxing.com。下次执行“hexo g”的时候，这个文件就会自动复制到post文件夹下。

---

个人博客到此就搭建好了，不过别过度沉迷网站搭建技术，写文章才是最重要的！

参考文章：
http://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
http://www.ookamiantd.top/2017/build-blog-hexo-base/
http://www.54tianzhisheng.cn/2017/03/28/%E5%88%A9%E7%94%A8Github%20Page%20%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/
https://mp.weixin.qq.com/s/daMFzkRzLPIrRkCz7ycrhA