基于Github Pages的个人博客搭建

基于Github Pages的个人博客搭建

---

0、写在动手之前

  很早的时候就注册了GitHub的账号，也尝试过为自己的Github Pages编写过页面。但那时候也没有输出，所以上面就是我自己手动编写的页面，把自己写的几篇小文章摆在上面。事实也的确证明了，并没有什么人回来看。即使是我的同学，顶多也就瞟上那么一眼。我对这个的需求就不是很大，就不想再去弄了，所以一直耽搁到了现在。现在又重新拾起主要还是自己学的东西多了，就要写下来不然记不住，也就是俗话说好记性不如烂笔头。因此我就准备选中Hexo作为我自己的博客框架，把自己学的东西输出出来，这样子记得会比较深比较牢。

---

1、选用Hexo作为博客框架

  不是机缘巧合，也不是金凤玉露相逢。我只是在看别人的博客时，发现他的博客做的不错。拉到最底下，powered by Hexo. 原来大佬们的博客框架都不是自己写的啊 (⊙x⊙;)
  因此我也准备使用Hexo来搭建自己的博客系统，参考了官方文档，也参考了周三Tech的视频教程。希望可以搭建起一个自己满意的博客系统，也在此记录下来搭建过程，如果能给后来人一些启发那就最好不过了。

---

2、安装Hexo

  安装Hexo需要提前安装好Node.js和Git的。如果你已经安装好了，那么就继续安装Hexo；如果没有安装好这两样的话可以参考官方的：安装Git、安装Node.js。当然你也可以自行Google或者百度。
  安装Hexo只需要键入以下命令即可：

$ npm install -g hexo-cli

---

3、建站

  安装完Hexo后，请下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

  新建完成后，指定文件夹的目录如下：

  执行操作之后：

---

4、配置

  我选择了Butterfly这个主题。

（1）在test根目录下执行代码

$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

  将主题文件放入themes/中。修改站点配置文件_config.yml，把主题改为Butterfly。

如果你沒有 pug 以及 stylus 的渲染器，請下載安裝： npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus

  然而我比较偷懒，我直接按照JerryC的配置进行修改的。

---

5、本地调试

  能够跑起来的整体给人效果不好，仍然需要在本地调试至自己满意。

$ hexo g # 生成网站代码
$ hexo server # 在本地生成服务并查看

---

6、将调试好的博客部署到自己的Github Pages

  首先安装 hexo-deployer-git，执行如下命令

$ npm install hexo-deployer-git --save

  可以通过命令来查看是否安装成功

$ npm list hexo-deployer-git

  如果输出版本号，代表你安装成功了。
  然后修改配置

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]

  中间可能出现一些与git相关的问题，比如输入ssh密码等，解决即可。

7、绑定域名到自己的博客页面

  首先取得你的Github Pages的IP：

$ ping your_name.github.io

  然后在DNS提供商那里绑定IP到你的域名，最后在你的分支下新建一个名为CNAME的文件，内容为你的域名，最后等待域名生效即可。

---