个人博客搭建全纪录(Github Pages + Hexo + 个人域名绑定)

发表于 | | 阅读次数

耗时一天，踩了许多坑之后，自己的独立博客终于算是搭建完成了。前后了解了Jekyll和Hexo的搭建过程，发现Jekyll并不适合没有什么网页经验的自己，而Hexo全命令行的操作更容易上手。虽然现有的主题个人感觉没有特别中意的，不过最终还是选择了Github上面星星最多的Next。此主题简洁至上，比较适合不喜欢花哨的人群。而且此主题有比较详细的官方使用文档。所以如果你纠结于选择什么主题而抓狂的时候，NEXT是一个不错的尝试。曾经也考虑过使用云主机搭建一个完全独立的博客，但考虑到自己是穷逼学生，而Github的博客有免费的300M空间，何乐而不为呢？ 最后为了避免后面的同学踩坑，将搭建博客的所有细节记录如下。

一、环境准备

首先声明，本人是在Linux系统上进行博客环境的搭建。

– 1. 首先需要一个Github Pages,当前前提是你要注册一个Github的账号

– 2. 本地配置Hexo开发环境(Hexo和Jekyll的作用一样，主要是省去我们完全自己部署博客的时间，不但提供了好看的主题，而且与Github Pages结合可以简便快捷的管理博客，博客编辑使用Markdown格式，同样是现在的主流)。

– 3. 绑定自己的独立域名(当然也可以不绑定，github pages有默认的二级域名可以使用，个人独立域名如果是学生的话推荐Name Cheap，认证后.me后缀的域名有免费的一年使用权)

二、Github Pages搭建

Github Pages是一个免费的静态博客站点，特点包括：免费托管、主题和页面的高度可定制化。

– 1. 首先注册一个Github账号，有的同学跳过此步就好了。

– 2. 最好的搭建教程当然是Github Pages的官方教程

– 3. 一些细节问题还是在这里说一下：

1
2
3
4
5
1. 首先，登录Github, 在首页右下角，点击(New repository)
2. RepositoryName的格式：yourusername.github.io，其中yourusername就是你的Github的用户名，记住，必须是自己的用户名！！！ 其他默认即可，不需要勾选生成README文件。
3. 接下来按照官方教程操作就可以得到一个原始的博客页面了。

三、Hexo环境搭建并绑定Github Pages

Hexo是一个基于Node.js的静态博客框架，他是一个快速、简洁、高效的博客框架。

Hexo的四大特点：

  • 极速生成静态页面
  • 支持Markdown
  • 一键部署博客
  • 丰富的插件支持

1. 安装

当然安装Hexo最好的还是参考官方中文文档。其中本地需要提前安装Git以及Node.js环境。
安装好Git以及Node.js之后，下面命令安装Hexo:

1
npm install hexo-cli -g

本地博客环境安装以及初始化：

1
2
3
hexo init blog #blog就是新建博客目录的名字，可以随便起
cd blog
npm install

安装完成之后执行下面命令打开本地服务器可以查看博客效果, 浏览器输入localhost:4000，即可看到本地页面效果。

1
hexo server

建站的问题同样参考官方文档。

其中博客的目录结构如下

1
2
3
4
5
6
7
~  tree -L 1 blog
blog
├── _config.yml
├── package.json
├── scaffolds
├── source
└── themes

其中hexo的配置文件是 _config.yml ，可以在官方文档配置里查看详细解释。

2. 主题切换

默认的主题可能不是很喜欢，我们可以在官方的主题页面查看并安装自己喜欢的主题。
以NEXT为例，首先下载主题文件：

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后在博客根目录的_config.yml文件中，找到theme字段，将其值求改为next:

1
theme: next

切换完成后，重新编译,看一下效果：

1
2
3
hexo clean
hexo g
hexo s

接下来，如果你想到自己修改主题以及显示等效果，可以参考NEXT或对应主题的Github官方文档，来修改对应主题下的_config.yml文件。其中也详细的介绍了绑定各种第三方插件的全流程，just try it.

3. 绑定Github Pages并发布

接下来绑定Github Pages。
首先需要安装插件：

1
npm install hexo-deployer-git --save

接下来打开_config.yml，找到deploy字段，假如Github Pages信息，如下：

1
2
3
4
deploy:
type: git
repo: git@github.com:YanceyZhangDL/YanceyZhangDL.github.io.git
branch: master

把Repo换成你自己的Github Pages的提交代码的git地址就可以了。

接下来当然还需要将你的博客发布到Github Pages的服务器上：

1
2
3
hexo clean
hexo g #生成本地发布文件夹，g是generate的缩写
hexo d #将博客部署到Github Pages, d是deploy的缩写

其他快捷键常用组合：

1
2
$ hexo d -g #生成部署
$ hexo s -g #生成预览

这个时候，其实你的独立博客已经搭建完成了。

4. 写一篇新的文章

hexo new “new article”

打开之后我们会看到：

1
2
3
4
5
---
title: new article
date: 2014-11-01 20:10:33
tags:
---

文件的开头是属性，采用统一的yaml格式，文章正文支持Markdown。

若要在博客中插入图片，使用网络上的图片直接使用网址，使用本地图片则在source文件夹下面新建img文件夹，然后将图片放入。引用的时候文件路径为/img/*.png就可以了。

四、个人域名绑定(可选)

由于笔者还是学生，针对学生Github有一个学生包的优惠，申请下来之后可以在Name Cheap申请免费域名，有一年的免费使用权，或者你可以使用国内的万网或者国外的GoDaddy等都可以。

说一下域名刚申请下来之后绑定的流程，本文以DNSPod解析为例，各大网站注册域名在DNSPod解析的帮助文档：

– 1. 首先需要在注册的网站进行DNS短地址的修改

– 2. 然后在本地站点的source目录下添加一个CNAME文件，文件中加入你的域名，例如我的是：yanceyzhang,me，不需要加www，也不需要添加http://。添加完成后重新部署(hexo d -g)

– 3. 然后注册DNSPod，添加域名，添加记录。

1
2
3
4
5
6
7
1. 添加域名填写你的域名，不用添加http://，然后在点击你的域名点进去在添加记录（其中记录中CHAME的值是你的github pages的地址）。
2. 再添加两条A记录：
@　A　默认　192.30.252.154
@　A　默认　192.30.252.153
3. 启用就可以了。

– 4. 最后把本地的Hexo文件重新部署发布到Github Pages(hexo d -g)，打开你的域名，奇迹发生了～

作者的个人博客地址：yanceyzhang.me，欢迎踩踏～

参考文章

– 1. Hexo官网：https://hexo.io/
– 2. Hexo部署：http://www.tuicool.com/articles/m6fE32
– 3. Hexo写一篇新的文章：http://www.cnblogs.com/fengsehng/p/6050527.html
– 4. 博客是如何搭建的(github pages+HEXO+域名绑定)：http://www.jianshu.com/p/834d7cc0668d　
– 5. 手把手教你使用Hexo：https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog/