GitHub Pages + Hexo 搭建个人博客

前言

现学现卖。搭建之前看了几篇简书的文章，感觉不难就做了，实际上还是会遇到一两个坑的，我会通过具体的图片来说明如何填坑。
目前主要有三种方法实现： WordPress、GitHub Pages + Jekell、GitHub Pages + Hexo ，简单了解三个方案后，我选择了最多人用的 GitHub Pages + Hexo，因为如果遇到解决不了的问题还可以搜索下。
GitHub Pages GitHub免费提供网站并托管我们发布的项目。
Hexo 是一个快速、简洁且高效的博客框架，支持Markdown解析文章，瞬间即可利用靓丽的主题生成静态网页。

如果打开外网速度太慢，可以下载GitHub的蓝灯Lantern或者官网的蓝灯Lantern科学上网，你懂的。

---

创建GitHub仓库

• 注册/登录GitHub
• 新建仓库 New repository
  第一种
  第二种
• 填写仓库名称
  格式为 你的仓库名称.github.io，然后点击 Create repository 按钮完成创建。
  

---

环境准备

• 下载并安装Git，下载完成后有Git Bash、Git CMD、Git GUI
• 下载并安装Node
• 安装Hexo
  不用上官网，直接打开安装好的Git Bash输入 ，
  或者win+R，输入cmd 回车，打开命令行输入

npm install hexo-cli -g

安装hexo需要等待一两分钟。

---

新建博客文件夹

• 新建一个希望博客存放的文件夹， 如 D:\Blog
• Git Bash定位到Blog目录下
  在 D:\Blog中点击右键选择Git Bash Here打开，
  或者打开Git Bash，输入cd D:/blog
• 创建初始化Hexo的文件夹
  输入命令后回车执行

hexo init 你的仓库名称.github.io  //建议和GitHub的仓库名称对应，方便以后辨认和查找

等待一两分钟后 D:\Blog目录下就多了个 你的仓库名称.github.io文件夹(我的是 D:\Blog\jimzhong.github.io)，里面有如下文件

├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #将来博客正文、404、CNAME 都应该放在这里
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json #应用程序的信息

---

本地博客效果预览

基本的框架搭建完了，Hexo安装后默认使用landscape主题。

• 生成静态页面
  Git Bash定位到 D:\Blog\jimzhong.github.io 目录下，执行命令

hexo g  //hexo generate

• 本地服务启动
  继续执行命令

hexo s  //hexo server

• 预览
  浏览器输入http://localhost:4000/
  正常的是会显示出来，而我打开的标签页一直显示在加载，之后报错。
  应该是端口号被占用，Ctrl+C停止服务后，换一个端口号启动服务

hexo s -p 5000

浏览器输入http://localhost:5000/ ，就能预览到 landscape主题的界面了。

---

部署到GitHub

• 修改配置
  文本编辑器(Notepad++、sublime等)打开配置文件_config.yml ，最下面严格按照这样的格式补充，type、repository、branch前面空两个格，冒号 ：后面空一个格
  

type: git
repository: https://github.com/JJIIMMZZ/jimzhong.github.io.git  #注意：每个人的不一样
branch: master

其中repository后面填的是仓库地址，以GitHub仓库上的为准。

• 首次部署需执行如下命令

npm install hexo-deployer-git --save

hexo d  //hexo deploy

仓库下面就多了以下文件

• 以后如果要重新部署可按以下步骤进行

hexo clean
hexo generate
hexo deploy

简写：

hexo clean
hexo g -d

附一些常用命令：

hexo new "postName"  #新建文章
hexo new page "pageName" #新建页面
hexo generate  #生成静态页面至public目录
hexo server  #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy  #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

• 开启博客网址
  点击Settings，下拉找到GitHub Pages，选择主干master branch，保存，Your site is ready to be published at 后面的链接就是你的博客网址了
  
  
  点击打开却是这样
  
  查看源代码，原因是页面引用css、js文件的路径不对，应该获取 https://jjiimmzz.github.io/jimzhong.github.io/js/script.js ，实际是 https://jjiimmzz.github.io/js/script.js ，所以没有结果。
  一劳永逸的解决办法是更换为自定义的域名。
  

---

自定义域名

• 购买域名
  我是在阿里云购买的域名，jimzhong.win
  
• 解析域名
  打开控制台——域名与网站(万网)——域名——解析
  分别添加两个A 记录类型，一个主机记录为 www，另一个为 @，记录值都为 GitHub Pages提供的 IP： 151.101.72.133
  
• 新增CNAME
  接着在仓库中新建一个文件CNAME，文件中写入你要绑定的域名，比如我的是 jimzhong.win
  几分钟后通过浏览器访问 http://jimzhong.win ，就能打开博客了。

由于每次执行部署的时候，所有的文件都会被覆盖，所以最好在 D:\Blog\jimzhong.github.io\source 目录下新建CNAME文件，这样每次部署后就不用动手创建了。

---

更换主题

Hexo提供了一百个左右的主题，还有使用说明：

• 将_config.yml文件中的theme字段设置为与 <themename>一致
• Git Bash执行命令 git clone https://<git/repository> themes/<themename>
  

比如，我用的Yilia主题

点击打开下拉有效果图和使用说明

• 安装 Git Bash定位到 D:\Blog\jimzhong.github.io 目录下输入

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

• 修改 D:\Blog\jimzhong.github.io目录下的 _config.yml ， theme: yilia
• 更新

cd themes/yilia
git pull

• 重新部署到GitHub，浏览器清除历史记录，访问 http://jimzhong.win
  

个人域名的博客就建好了，后续还有更换样式、添加元素、发布博文，最后被我调教成了这样。

---

参考文章

• 利用 GitHub Pages 快速搭建个人博客
• Hexo在github上构建免费的Web应用