个人博客搭建全攻略(一):基于Hexo+Github环境搭建

个人博客搭建全攻略(一):基于Hexo+Github环境搭建

简介

相信每个有追求的开发者或多或少都产生过开博的想法，个人博客也是不少技术开发人员间“装逼炫技”的神器。那么，做为一个“牛逼”的程序员，我们要怎么去搭建自己的博客呢？

从技术角度讲，博客无非就是一个web页面，即然是web，那么两样东西必不可少：服务器与html。牛逼且野蛮的做法，自己租服务器，然后埋头敲代码，相信没人愿意这么干，毕竟要做个让人接受的页面，要写的东西可不少，更不要说评论打赏功能。如果能够像写Word文档那样，仅需专注于写作，还能提供一定样式，具备点赞评论基本功能，这才是我们想要的。要做到这些，并不是难事，且听我慢慢道来。

通行玩博客有三种方式，一是在平台写，但是限制多，改个样式，加点“私货”都不行。二是自己购买域名和vps，自己搭建后台，使用wordpress之类的框架搭建博客系统，然后自己折腾点赞、评论等功能，创建一个完完整整属于自己的博客，想想还是挺刺激，而且还有成就感，但是过不了多久就会“疲”了，因为维护起来实在太麻烦了，比如换个ip，你就要迁移整个系统，还有数据容灾备份，实践操作过程中，麻烦程度可能远超想象，再者vps也是要钱的。最后，就发展到第三个阶段，基于一些免费云空间来搭建静态网页，既可免费，迁移也方便，整个系统都可以进行git托管，通过框架工具，使用Markdown自由写作，一条指令完成页面生成与部署，这才是真正便捷实用的方式。

静态网站生成器很多，要说流行非Hexo与Jekyll莫属。这里我们选择Hexo，主要原因如下：
1. Jeky生成速度慢，创建分页比较复杂；
2. Jeky的主题都不怎么好看，个人还是比较喜欢Hexo的；
3. Jeky安装前需要安装Ruby、Python，Hexo只对Node.js有依赖；

Node.js

Hexo基于Node.js环境，Node.js是一个Javascript运行环境(runtime)，实际上它是对Google V8引擎进行了封装。围绕Node.js有许多三方资源，社区非常繁荣，生态非常火爆，相信很多开发者电脑上都有Node.js环境吧，如果你已经安装Node.js环境，可跳过此节直接安装Hexo。

安装

Windows

Windows平台请到node官网下载安装包进行安装。

Linux

Linux平台可通过包安装或nvm进行安装，这里建议采用nvm方式。

首先，安装nvm环境，进入终端，在用户家目录下执行

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash`

然后，将以下代码添加至到profile(~/.bash_profile， ~/.zshrc， ~/.profile， ~/.bashrc其中之一)文件中

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

重启终端，输入以下指令安装node最新的LTS版本

nvm install --lts=boron

Mac

Mac平台可以通过nvm进行安装，方法与Linux平台一样。另外这里特别介绍通过brew安装，brew类似于Ubuntu的apt或CentOS的yum，是Mac平台的包管理工具。brew依赖Ruby环境，Mac系统自带Ruby，如果还没brew环境，请直接在终端输入以下指令安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后输入

brew install node

加速

Node.js默认是通过npm进行包管理的，但npm官方源在国内速度那可叫一个酸爽，而且还经常抽疯，原因大家都懂的，如果没有好梯子，建议大家使用淘宝npm镜像，方法如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后，就可以能过以下指令加速安装相用包啦(对，你猜得没错，就是将npm换成cnpm就可以啦！)

cnpm install [packageName]

Hexo

安装好Node.js环境后，就可以通过node的npm包管理工具安装Hexo，执行以下指令(当然cnpm可以换成npm，这里使用淘宝加速)

cnpm install -g hexo

成功安装Hexo后，在自己的工作目录下，创建一个blog目录，在此目录下管理自己的博客源码，进入blog目录，执行以下指令完成Hexo项目环境初始化

hexo init

hexo初始化会在blog目录生成一些东西，如下图：

安装依赖包

cnpm install

生成静态页面

hexo g

启动本地服务

hexo s

当然，生成静态页面与启动本地服务可以结合成以下指令

hexo s -g

打开浏览器，输入 http://localhost:4000/ ，看到以下页面说明hexo环境安装成功。

按照刚才预览的Hello World页面的说明，通过简单几条指令，就可愉快的玩耍啦，是不是很简单？

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

部署环境

目前，我们写的东西，还只能在本机预览，别人要看到，就必须把生成的静态页部署到互联网上。那么可能有人会问了，我需要租服务器吗？当然，如果你是“人傻钱多”的壕，那也不是不可以，但我要说的是，现在都云时代啦，有大把的免费空间供我们选择，内有Coding，外有GitHub，这里我以github为例来搭建博客网站的部署环境，Coding或其他环境原理类似。

创建仓库

点击创建仓库，进入GitHub仓库创建页面。等等，别告诉你还没有GitHub账号，如果你是名开发人员，那就太Out啦，赶紧注册一个账号吧，记得完成邮箱认证，这里就不展开啦，注册流程并不复杂。

言归正题，如下图，填写仓库名称，注意仓库名称格式，一定要以yourname.github.io，标红的yourname一定要与你账户的username相同，以我为例，我的仓库名称就必须是gradyu.github.io。这个仓库名称就是以后访问你博客站点的默认域名。换言之，就是一个用户只能创建一个Github Pages环境。

最后点击Create repository按钮，完成仓库创建。

部署公钥

Hexo部署时，采用git协议，为避免暴露账户密码，最好使用证书认证，所以我们需要在Github部署公钥。如果你已经部署了公钥，可跳过此步骤。

进入账号的Personal setting页面，选择SSH and GPG keys，进入密钥配置页面。填入本机公钥，点击Add SSH key，如下图

输入以下指令，测试密钥连接

ssh -T git@github.com

如果返回Hi yourname! You've successfully authenticated, but GitHub does not provide shell access.则说明公钥部署成功。特别提醒，请注意保护本机私钥的安全，如果泄漏，请及时移除对应公钥。

如果本机还没有SSH密钥对，请自行先创建，这里就不做介绍了。

发布站点

终于搭建好站点部署环境啦，那么要怎么样将我们本地生成预览好的页面发布到github上呢？很简单，Follow!

首先，打开blog目录下的_config.yml，找到deploy段，配置成这样

deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.io.git
  branch: master

注意将代码里面的yourname换成你账号的username。

设置git身份信息

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

执行以下指令进行部署

hexo d -g

如果提示没找到git，请先执行以下指令

cnpm install hexo-deployer-git --save

再次部署后，浏览器打开 https://yourname.github.io 就可以看到刚才本地预览页面。

域名配置

现在已经可以通过 https://yourname.github.io 来访问自己的博客站点啦。这时可能有人会说了，大家都通过github.io来访问，好没个性，能不能配置用自己的域名来访问自己的站点。答案当然可以。

首先，你得有个自己的域名，如果还没，那就去买个。

进域名控制台，在解析里面添加一条CNAME记录，指向yourname.github.io即可。

到blog/source目录下创建CNAME文件，添加你要绑定的域名保存。

然后执行部署

hexo d -g

不出意外，这时用自己的域名就可以访问自己的博客站点，如果出错，极可能是DNS数据还没更新，请稍等一段时间再试，DNS数据同步更新一般不会超过48小时。

源码管理

Hexo在部署时并没有将blog目录下所有东西都上传到服务器，特别是source目录，所有的“硬货”都在这里。那么有人可能会问啦，我要怎么样管理我的源码呢？最简单的方法，就是自己把source目录与_config.yml文件备份起来，此方法虽简单但不靠谱。有没有工具帮我们完成这件事？当然有，做为开发者，大家首先想到应该是版本管控。细心朋友可能发现，blog目录已经有个.gitignore文件，玩过git的应该都清楚它的作用。所以，hexo默认是建议我们用git进行源码管理的。

提交

进入blog目录，加入到git版本管控

git init

将代码进行提交

git add .
git commit -m '博客站点项目创建'

这样，我们就把源码提交到了本地仓库。但本地仓库并不保险，万一机器出问题了，源码也可能丢失，而且转移到别的机器不方便，所以，我们还需要把本地仓库进行托管。

托管

能够进行仓库托管的平台很多，Github应该是全世界的No.1。但它不提供免费的私有仓库，所以如果你的源码里面有私密的数据，我还是建议你把它托管到Coding或者OSChina，他们都提供免费的私用仓库服务。这里我将源码托管到Github。刚才我们创建了yourname.github.io仓库，我们能不能把源码也推送到这个仓库里面呢？答案当然是可以的。

添加远程仓库。

git remote add origin git@github.com:yourname/yourname.github.io.git

创建hexo分支

git checkout -d hexo

将hexo源码推送到远程仓库的hexo分支下

git push origin hexo

删除本地的master分支(可选)

git branch -d master

检出

在本机的工作目录下执行以下指令克隆远程仓库

git clone git@github.com:yourname/yourname.github.io.git ./blog

因为git克隆时，默认会将master分支代码自动检出。还需要执行以下指令检出hexo分支才能看到源码

git checkout -b hexo origin/hexo

删除本地的master分支(可选)

git branch -d master

检出源码后，就不需要再执行hexo init，因为源码已经是hexo项目，所以不用进行初始化，可以直接愉快地写博客并部署啦。

总结

以上，我们只是完成了Hexo+Github的环境搭建，原则上，大家现在应该可以在blog里面愉快地写作，并通过简单的指令，完成预览、部署，而且源代码也进行了托管，再也不怕本机源代码丢失啦。但是，大家可能对目前页面的显示效果不太满意，而且博客基本的评论、点赞功能都没有。不用着急，下期，我将告诉大家如何切换主题，并对自己的博客进行一些个性化的定制，敬请期待！

版权声明：本文为原创，欢迎转载，转载请注明出处，勿用于商业用途！