基于Hexo框架+GitHub Pages搭建个人博客

2016-04-10 本文已影响1417人 dukecui

这篇文章最初发表在我的个人博客上：dukecui技术博客，欢迎大家访问！

作为一个程序猿，或者立志希望在程序猿的道路上有所发展的骚年们，相信都应该有一个属于自己的技术博客。至于为什么需要有自己的技术博客，Android大神stormzhang的这篇文章，已经讲的很清楚了，大家可以去学习下，相信你读完肯定会有感悟，而我自己也深受其影响和鼓舞。于是花了两三天的时间，折腾了一个自己的博客出来，同时写下这篇文章记录和总结自己搭建博客的过程，并希望能为后来者提供一个较为完善可用的参考。

说起博客的搭建，从萌生这个想法开始到现在基本的搭建完成也有将近快一个月的时间。这期间，不得不再次感叹下自己的执行力。首先从3月份自己做的两个小的demo说起，这个过程学习到了很多Android开发APP的知识，自己在开发的过程中遇到不少的问题，也花了很多时间去解决。期间曾想记录下学到的一些关键知识点和收获，并希望通过晚上的时间搭建好自己的博客，但在项目做到关键的时候，总是会晚上加班到比较晚，还有一种今天不解决这个问题就不结束的纠结。这就导致搭建博客的事情一拖再拖，直到两个demo做到自己基本满意之后，开始休假，终于到清明假期回来才算真正开始完成这件事情。

搭建博客，我首先想到的是Strikingly，一个自动建站的工具，虽说该公司原来的主要业务和服务器均在国外，但他们团队目前在发展国内的业务，在国内的产品“上线啦”仍在测试阶段。有兴趣可以了解下这个公司，履历还是非常牛逼的，第一个获得YC孵化的中国团队。但是在使用的过程中我发现，博客编辑系统似乎有些薄弱，无法插入代码文本，也不支持MarkDown编辑，这使得我最终放弃了这个方案。于是开始尝试在简书上撰写自己的第一篇博文，不得不说简书满足了我的对博客的大部分需求，MarkDown编辑，简单易用，干净清爽，还有丰富的社交系统等等，因此也为很多技术达人所喜爱。但建成之后总感觉缺了点什么，怪怪的，对，我怎么向别人推荐我的主页呢？域名的参数居然是一个字符串，连我的id都没有啊，这也太low了吧，万一我以后出名了可怎么办？梦想还是要有的对吧。。。于是索性下决心搭一个自己的博客，也算是一个尝试的过程，而且还能接触到前端的一些知识，做互联网做技术的就是要多尝试多接触多折腾，多学习最前沿的知识。。。

好吧，废话终于说完了，下面是正题，如何通过Hexo+GitHub搭建个人博客。

首先，这里有Hexo的官方网站，上面有非常详细的内容，大家可以直接参考：Hexo

一、环境的配置

Node.js
因为Hexo是一个基于Node.js的静态博客框架，因此需要先安装Node.js环境，下载地址：Node.js
Git
此处为Windows平台下的下载地址：Git
或者可以选择直接下载:GitHub Desktop。（冒着有可能会被嘲笑的风险。。。）
Mac及其他操作系统请参考Hexo官方提供的下载链接。

二、安装Hexo

完成以上环境配置之后，通过下面的命令安装Hexo

npm install -g hexo-cli

出现下图所示信息表示Hexo安装成功。

三、建站

安装完成之后，选择一个目录作为建站所需文件的存放路径，如我选择d:\work\blog，执行以下命令完成hexo的初始化：

hexo init d:\work\blog

然后命令行进入该目录下

cd d:\work\blog

执行下面的命令，系统会可以根据package.json文件中dependencies的配置安装所有依赖包

npm install

新建完成之后，根目录文件夹下各个目录的含义，可以参考Hexo官网的解释：目录信息

四、启动

在建站工具的根目录（如上d:\work\blog）下通过以下命令启动服务器，之后访问网址 http://localhost:4000/ 即可看到我们刚刚建立的博客，Hexo会默认生成一个Hello World的博文。

hexo server

这样我们就已经可以在本地浏览我们自己的博客了。以后每次对博客进行修改，都可以先通过这种方式进行本地的预览，满意之后再部署到GitHub Pages上。

五、部署到GitHub

首先在你的GitHub上新建一个Repository，仓库名的固定写法为 your_user_name.github.io
配置SSH-Key，网上有很多方法可供大家参考
修改根目录的网站配置文件_config.yml，搜索deploy字段，修改成如下所示的格式。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:DukeCuiChen/DukeCuiChen.github.io.git 
    branch: master

其中，repo是我们刚刚建立的远程仓库，换成你自己的id，同时因为刚才配置了SSH-Key，所以必须是SSH形式的URL。值得注意的是，每一个: 后面都必须有一个空格，否则会引起错误。

安装Git包，执行以下命令

npm install hexo-deployer-git --save

部署到GitHub上，执行以下的命令

hexo deploy

现在我们可以通过访问 http://dukecuichen.github.io/ 来访问我们自己的博客啦！到此，我们的博客已经基本建立完成，当然，下面要讲怎么使用喽~

六、使用

新建一篇博文可通过以下的命令

hexo new "name"

其中name为博文的名字，建立完成之后，可以在./source/_posts文件夹下发现我们刚刚建立的 name.md文件。使用你熟悉的编辑器打开，便可以进行博文的撰写。博文支持MarkDown语法的编写，下面是一个示例文件的内容

---
title: name
date: 2016-04-06 10:34:21
tags: 
- 开始
- 日志
categories: 
- 日志
---
我的第一篇博文。。。。。。

博文写好之后，在每次发布之前，我们要先将写好的博客生成静态文件，执行以下命令

hexo generate

之后生成的文件会放在./public目录下，这便是我们将要部署到GitHub上的全部内容。

静态文件生成之后，便可以部署到GitHub上

hexo deploy

再重新打开我们的博客 http://dukecuichen.github.io/ 已经可以看到刚刚新加入的博文

七、主题

Hexo提供了丰富的主题可供我们选择和使用，在./themes目录下存放主题。刚才默认生成的博客用的就是默认的主题landscape。这里有在GitHub上Hexo所有的主题，可以访问https://github.com/hexojs/hexo/wiki/Themes 另外我们总是站在巨人的肩膀之上，感谢前人的归纳总结，推荐两篇Hexo主题推荐的文章：

一篇是知乎上的：有哪些好看的 Hexo 主题？
一篇是简书上的：Hexo博客主题推荐

我自己的博客采用了知名度最高的Next主题，其他主题没有过多的尝试，也不敢评论。Next主题集成了非常多的第三方服务可供选择，例如评论系统，统计系统，分享服务，搜索服务等。这些第三方的服务可以极大的提高博客的体验。

八、设置域名

博客搭建好之后，我们可以通过http://dukecuichen.github.io/ 类似的域名进行访问，而且GitHub提供这样的服务是完全免费的。当然我们也可以通过我们自己的域名来进行访问，这就需要首先购买我们想要的域名。我是在DNSPod上购买的域名并进行管理操作的，具体的购买方式可以去DNSPod的主页查看。购买成功后，下面来看如何绑定我们的域名。在DNSPod的控制台，我们点击添加记录，设置主机记录为@，类型为A，到IP 192.30.252.153（固定值）。

设置完成保存后，可能等几分钟生效。可以通过ping我们的域名来检验设置是否生效。而后，在./source目录下新建文件CNAME（无后缀名），文件中写上我们要绑定的域名，例如dukecuichen.com，再hexo generate生成静态文件，并hexo deploy部署到GitHub上。这时就可以通过http://dukecuichen.com/ 访问我们的博客啦

九、一些建议

Hexo同样具有良好的扩展性，你可以安装很多第三方的插件，例如sitemap，安装sitemap插件之后，你可以生成自己的站点地图，然后将你的sitemap提交给谷歌或者百度，让这些搜索引擎可以抓取到你的博客的内容，提高访问量。

安装sitemap插件

npm install hexo-generator-sitemap --save

设置启用sitemap插件，在根目录打开配置文件_config.yml，增加以下内容

#sitemap
sitemap:
  path: sitemap.xml

之后再执行hexo server，访问 http://localhost:4000/sitemap.xml ，即可看到站点地图，说明我们的设置生效。

总结

以上就是通过Hexo搭建个人博客的全部流程，但是对一些具体的细节文章可能并没有阐述，同时在实际的操作中可能会遇到各种各样的问题，大家可以自行参考网上大量的解决方案。因为我自己并不是做前端，对前端的知识也知之甚少，通过搭建博客的过程也多少了解了一些，因此可能存在理解或操作上的错误，欢迎大家批评指正。最后，在搭建整个博客的过程中，大量参考了以下三篇文章，在此对原文的作者表达感谢！
HEXO+Github,搭建属于自己的博客：
http://www.jianshu.com/p/465830080ea9
Hexo搭建Github静态博客：http://www.cnblogs.com/zhcncn/p/4097881.html
Hexo在github上构建免费的Web应用：http://blog.fens.me/hexo-blog-github/