利用Git Pages和Hexo搭建个人博客

一直以来都想要搭建一个个人博客，前段时间花了一些时间在git pages上面注册了一个个人站点，用Hexo构建博客框架，并添加主题。这篇文章把这个搭建的过程记录一下，后续对这个系统的优化也会逐步更新到这篇博客。

创建git page项目

首先在自己的github账户中创建一个github项目，项目名称取为(username).github.io，如下图所示。注意，username必须与github账户的名称相同，因为一个github账户只能绑定一个git page，需要通过用户名唯一关联。

gitpages项目创建

创建完git page项目后再上传一个index.html（必须是这个名字）作为demo看一下git page的使用。上传方式和普通的github项目同步方式相同，如下所示。

cd (项目维护的目录)
git clone https://github.com/cjh9368/cjh9368.github.io.git  ##初始化本地项目
touch index.html
echo "Hello World" > index.html  ##在inedex.html中写入hello world
git add *                        ##将本地改动需要提交的文件放入暂存区，供commit原子性提交
git commit -m "first commit" 	 ##将暂存区的改动文件提交到当前分支（即.git）	
git push -u origin master		 ##将本地的分支提交至远程仓库的主分支中

这样就将index.html上传成功了，然后再在settings中将git page用于展示的分支设定为主分支。

settings设定

经过上面的操作就用git page建好了一个个人站点了，网址就是工程名（也可以关联自己的域名，下面的Custom domain就是，只是我觉得这个域名挺好的就没改），例如我的是cjh9368.github.io，点进去就可以看到一个hello word 的网页，和本地看到的一样。

Hexo框架部署

Hexo是一个简洁高效的博客框架，安装比较简单，需要预先安装一下node js和npm，这是具体的安装步骤。安装完成后在保存博客源码的路径用hexo init自动生成框架代码，如下图。

hexo 代码结构

其中_cofig.yml是hexo的配置文件，用任意文本编辑器打开后找到deploy字段，将其修改为如下格式，用于对博客代码自动部署。

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

在终端中进入hexo init所在的文件夹执行hexo s就可以在本地跑一下hexo框架，在浏览器地址栏中输入localhost:4000就可以在本地预览hexo的博客界面，大概是这样的。

hexo初始界面

完成hexo本地部署后就可以将代码整体部署到刚才生成的git page上去了，部署的步骤也比较简单，执行以下命令即可。在刚才建的github工程中看到原来文件中的代码就说明部署成功了，此时在浏览器中输入(username).github.io就可以看到部署成功的页面了。

1
2
3

hexo clean    ##清除缓存
hexo g		  ##生成本地发布文件夹
hexo d        ##将代码发布到git page上

添加主题

到了这一步可以说构建博客系统比较麻烦的一些东西都已经完成了，剩下的工作主要是让我的博客更加符合我自己的审美。首先，可以为博客添加一个主题。我使用的主题为nexT，添加方式也很简单，将主题所在的包git clone至hexo所在的路径。

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

之后在_cofig.yml将相应的theme字段设置为next即可。

1	theme: next

功能完善

这一部分主要是一些杂七杂八的操作，目的是使我们的博客看起来更像一个博客。

基本信息修改

首先要修改博客的名称、作者名称、座右铭和语言之类的东西，这部分修改在站点__config.yaml开始的地方，修改方法如下。

title: C.J.H
subtitle: have fun
description:
author: ChengJiaHui
language: zh-Hans

此外还可以给自己添加头像，这部分需要在主题的__config.yaml中添加avatar字段，字段的value填写头像图片所在的路径，绝对路径从hexo文件夹的source路径算起。例如，我的图像存在/hexoBlog/source/img/avatar.jpg，那么路径就应该填写/img/avatar.jpg。

1	avatar: /img/avatar.jpg

发布文章

一个博客最核心的部分就是博文了，hexo的博文是用Markdown写的。hexo发布博文的命令如下所示，其中layout是文件布局的参数，主要包含post、page和draft三种。post表示将博文直接发布出来（存在source/_post 中）；page表示发布一个页面，例如归类页、标签页之类（直接存在source目录下）；draft表示先写一个草稿（存在source/draft中），完成后可以用publish将草稿移到post目录下。

hexo new [layout] <title>
hexo new post "hello world" #生成hello-world.md
hexo new page "categories"	#创建归档页
hexo new draft "test"		#创建草稿页test.md
hexo publish "test"			#发布草稿页

添加归档、标签

当博文数量到一定程度后，就需要对博文分类和添加标签来方便管理博文。注意到上文生成的md文件开头的部分有一个文章的属性列表，在这个属性列表添加tags和categories两个字段就能赋予一篇博文标签和分类的属性。

---
title: 利用Git Pages和Hexo搭建个人博客
date: 2017-10-03 08:56:53
tags: 
- 日常
- hexo
categories: 前端
---

再用hexo new page命令创建归档页和标签页，就能整体的看到博客系统的所有博文属性了。

1 2	hexo new page "categories" hexo new page "tags"

博文预览

hexo默认的主页显示的是所有博文的所有内容。这显然是不合理的，通常读者看一个博客首先不需要了解所有博客的所有内容，而只需要看一下每篇博文的大致内容或者标题，然后按照自己的兴趣去看想要的博文。此时，就需要在主页添加博文预览功能，nexT主题本身包含这一功能，只需要将主题__config.yaml文件下的auto_excerpt字段中的enable改为true即可。

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

综上，一个个人博客系统就基本搭建完成了。我的博客显示效果是下面这样的，enjoy it。

博客界面