使用Hexo+GitHub Pages搭建个人博客

折腾了一下午终于将Hexo博客成功跑起来,觉得还是蛮不错的,就把整个搭建踩坑的过程写下来,希望有用。

关于GitHub Pages

GitHub Pages本用于介绍托管在GitHub的项目,

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。

正如GitHub推出Pages服务的时候说的:

Create a blog and spread your ideas. Whatever you want!

而且,由于他的空间免费稳定,用来做搭建一个博客再好不过了。

关于Hexo

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架,可以方便的生成静态网页托管在github和Heroku上,引用Hexo作者 @tommy351 的话:

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

当然也有使用Jekyll来搭建博客,而且要比使用Hexo来更为快捷,所以为什么还是要选择Hexo呢,这里主要是因为由Jekyll搭建的博客目录、Rss、sitemap无法自动生成,而Hexo很好的解决了这些问题。关于Jekyll不再做介绍,感兴趣的同学可以参考这里

开始搭建一 创建GitHub

安装git和使用以及在GitHub上面申请账号的过程这里不在赘述,需要的同学请自行google。

在GitHub上创建新的工程命名为:yourname.github.io;

创建GitHub工程

请记下下面的链接:

GitHub工程链接

安装Node.js和Hexo

安装Node.js

由于Hexo是基于Node.js的静态框架,所以安装Node.js是必须的,可以根据自己的需要去官网自行下载。

具体安装过程也很简单,一步一步往下Next就行。安装完成以后检查如下即表示正确:
nodejs安装检查

安装Hexo

运行命令:

npm install -g hexo-cli

然后执行:

npm install hexo –save

等待运行安装完成,然后执行命令hexo -v检查是否正确安装:

hexo安装检查

这里有些同学可能因为国内网络问题安装比较慢,请使用科学上网工具,或者使用NPM淘宝镜像方法如下

执行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
接下来有关npm的命令字都使用cnpm即可

开始搭建博客

在本地新建一个文件夹blog,在文件夹内打开命令窗口,或者使用cd命令进入。执行命令:

hexo init

等待命令执行完成。

initHexo完成1

initHexo完成2

在高版本的Hexo中执行init命令会自动下载node_modules文件,由于它自动下载访问国外服务器速度较慢,这个时候可以强制停止,然后执行下面的命令

npm install

如果init执行完成以后发现执行结果和上面不一样,而且blog文件夹中没有node_modules文件,那么在执行上面的npm install 命令即可。

然后执行编译文件:

hexo g

hexo g

接着执行:

hexo s

hexo s

然后在浏览器中输入http://localhost:4000/可以看到如下页面就表示博客已经搭建成功。

本地主页

部署到GitHub Pages

这一步其实很简单,打开blog文件夹下的_config.yml文件,找到文件的末尾,修改deploy如下:

deploy:
    type: git
    repo: https://github.com/maintel/yourname.github.io.git
    branch: master

注意

yaml语法比较严格,请检查关键字冒号后面的空格一定要有

部署到github

上面repo的地址其实就是上面搭建github工程得到的地址。

然后执行命令进行部署:

hexo g

hexo d

等待执行完成,访问https://yourname.github.io 就能看到和上面本地部署时一样的主页。

一些问题

出现ERROR Deployer not found: git错误

重新执行如下命令然后再重新部署即可:

npm install hexo-deployer-git –save

访问https://yourname.github.io 出现404错误

首先打开github工程setting下拉找到GitHub Pages如下:

github Pages 配置

选择Source下的选项选择主分支即可。如下:

选择主分支作为源码

至此,基于Hexo的博客已经基本搭建完成,剩下的新建以及发布博客、选择主题和绑定域名等个性化的东西,抽空会在下一篇具体说明。

参考资料: