Github-Pages-Hexo搭建博客

发表于 | 分类于

写在前面的话

阮一峰说过，喜欢写Blog的人，会经历三个阶段。

（1）第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。

（2）第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。

（3）第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

第一部分

GitHub Pages是什么？

GitHub Pages本用于介绍托管在GitHub的项目， 不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。

为什么选择GitHub Pages？

  • GitHub Pages有300M免费空间，搭建的博客可以很方便的进行管理，并且保存可靠；
  • GitHub 是趋势，GitHub上面有很多大牛，学IT的人应该尽早融入这样的环境，
  • 程序员应该学会使用Git来管理项目，熟悉版本控制。
  • Github上有很多的开源项目，多学习学习，眼界会开阔很多；

接下来应该怎么做？

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github。我们要使用Github Pages + Hexo搭建博客站点，就必须注册Github账号，安装git、node.js以及hexo等，接下来就一起来实践吧！

Github注册与配置

注册

如果你还没有自己的Github账号，那请到Github官网注册账号：https://github.com/

注册成功后github会发送验证邮件到你的邮箱，请查收邮件并进行验证。

新建版本库

注册完成后，点击Start a project来新建一个版本库。

如果你已经注册，则在自己的主页，点击”New repository”，即可新建一个版本库

img

输入Repository name:yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了)

启用GitHub Page

进入版本库后，点击右上方的setting

img

下来到Githubs pages栏目，点击Launch automatic page generator

img

来到New user site页面后点击右下角的Continue to layouts

最后点击”Publish page”,发布github默认生成的一个静态站点

img

至此，我们已经配置好了github默认的静态站点，并且可以访问：你的github用户名.github.io测试我们刚刚建立好的站点主页。

下载并安装Git

下载

根据自己电脑操作系统的位数到git官网下载相应的版本：

https://git-scm.com/download/win

安装

根据自己的需要安装到相应的路径下，其他的一路点击next即可

配置环境变量

选中桌面图标计算机，右键选择属性，打开左边的高级系统设置，打开弹出窗口的环境变量，找到path进行编辑。

找到git的安装目录，将其复制后粘贴到path后面。注意每一个加进来的路径后面都要带英文格式的分号。

安装与配置过程可参考图文教程：git的安装和配置

测试是否安装成功

windows+R输入cmd打开命令提示符窗口，输入如下命令：

1
git --version

若安装成功会打印出本机安装的git的版本。

添加SSH KEY到Github

SSH Key是一个认证，让github识别绑定这台机器，允许这台机器提交。

（1）检查本机是否有SSH KEY设置

打开git bash，输入cd ~/.ssh 或cd .ssh

如果没有则提示： No such file or directory

如果有则进入~/.ssh路径下（ls查看当前路径文件，rm * 删除所有文件）

（2）配置生成SSH KEY

1
2
3
4
5
6
7
8
9
10
$ cd ~  #保证当前路径在”~”下
$ ssh-keygen -t rsa -C "这里填写你的邮箱地址"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/xxxx_000/.ssh/id_rsa):   #不填直接回车
Enter passphrase (empty for no passphrase):   #输入密码（可以为空）
Enter same passphrase again:   #再次确认密码（可以为空）
Your identification has been saved in /c/Users/xxxx_000/.ssh/id_rsa.   #生成的密钥
Your public key has been saved in /c/Users/xxxx_000/.ssh/id_rsa.pub.  #生成的公钥
The key fingerprint is:
e3:51:33:xx:xx:xx:xx:xxx:61:28:83:e2:81 xxxxxx@yy.com

至此，已经生成ssh key，其存放路径为：c:/Users/你电脑的用户名/.ssh/下。

注释：可生成ssh key自定义名称的密钥，默认id_rsa。

（3）复制SSH KEY到Github

到C盘你的用户目录下找到.ssh文件夹，查看里面是否有id_rsa和id_rsa.pub这两个文件。

登录GitHub系统；点击右上角账号头像的“▼”→Settings→SSH kyes→Add SSH key，Title自定义，复制id_rsa.pub的公钥内容到GitHub中Add an SSH key的key输入框，最后“Add Key”。

（4）配置账户

1
2
3
$ git config --global user.name “your_username”  #设置用户名
$ git config --global user.email “your_registered_github_Email” 
#设置邮箱地址(建议用注册giuhub的邮箱)

（5）测试SSH KEY是否设置成功

1
$ ssh -T git@github.com

接下来会返回一些信息，并需要你输入一次yes，若生成ssh key时设置有密码则还会让你输入生成ssh key时设置的密码。

Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. #出现词句话，说明设置成功。

SSH-KEY的生成与配置可参考图文教程window下配置SSH连接GitHub、GitHub配置ssh key：

下载并安装node.js

下载

根据自己电脑操作系统的位数到git官网下载相应的版本：

https://nodejs.org/en/download/

安装

根据自己的需要安装到响应的地方，其他的一路点击next即可

配置环境变量

选中桌面图标计算机，右键选择属性，打开左边的高级系统设置，打开弹出窗口的环境变量，找到path进行编辑。

找到node.js的安装目录，将其复制后粘贴到path后面。注意每一个加进来的路径后面都要带英文格式的分号。

测试是否安装成功

windows+R输入cmd打开命令提示符窗口，输入如下命令：

1
node -v

若安装成功会打印出本机安装的node.js的版本。

安装和配置hexo

hexo是基于node.js的静态博客，官网也是搭建在GitHub上。

安装

在你喜欢的路径下新建一个文件夹blog，用来存放博客的文件，在此文件夹中右键打开Git Bash

输入如下指令进行安装：

1
$ npm install -g hexo-cli

如果执行这条命令时长时间未成功，那么请先使用下面的命令将npm镜像源更改为国内的镜像，再执行上面的安装命令，因为国外的镜像源很有可能被墙了。

1
npm config set registry https://registry.npm.taobao.org
初始化hexo
1
$ hexo init hexo

这里会将Github上的hexo项目clone下来，得到hexo文件夹。

初始化成功后会在最后打印一行：INFO Start blogging with Hexo!

安装依赖文件

进入到hexo文件夹

1
$ cd hexo

安装依赖文件：

1
$ npm install

部署形成文件：

1
$ hexo generate

本地测试

1
$ hexo server

在浏览器输入：http://localhost:4000/ 即可访问到我们搭建好的hexo站点。

将本地hexo项目托管到Github

修改全局配置文件_config.yml

说明： hexo文件夹下一个_config.yml，我们称之为全局配置文件，在每个主题文件夹内还会有一个_config.yml文件，我们称之为主题配置文件。

用sublime text3或者notepad++等编辑器打开hexo文件夹下的_config.yml文件。

注意：配置文件中每个字段后面的冒号是英文格式的，且在其后要加一个空格再写值

编辑最后面的deploy属性，加入代码：

1
2
3
4
deploy:
  type: git
  repository:  ssh://git@github.com/guojingyinan/guojingyinan.github.io.git
  branch: master

type使用是git。

repository属性改成你的刚才创建仓库git地址，这里使用的是ssh。

分支branch填写master。

安装hexo-deployer-git插件
1
$ npm install hexo-deployer-git --save
部署到Github上

依次执行以下三条命令：

1
2
3
$ hexo clean  #清除缓存 网页正常情况下可以忽略此条命令
$ hexo generate  #生成静态页面至public目录
$ hexo deploy  #将.deploy目录部署到GitHub

执行hexo deploy命令之后，如果最后一行打印出如下信息则表示部署成功

1
INFO  Deploy done: git

然后你再去访问你创建的Github pages地址，也就是：你的Github用名.github.io，即可看到你本地的hexo项目已经被部署到github上去了。此时博客的默认主题是landscape，即上面本地测试时的样子。

第二部分

主要讲解Hexo的站点配置、主题配置和使用以及博客文章的发布。

在Hexo中有两份主要的配置文件，其名称都是_config.yml。其中，一份位于站点根目录下，主要包含Hexo本身的配置,我们称之为全局配置文件；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项,我们称之为主题配置文件。

hexo的官方网站：https://hexo.io/，里面有hexo的详细说明文档，不过是英文的。没关系，英语不好的请往下看。

注意：配置文件中每个字段后面的冒号是英文格式的，且在其后要加一个空格再写值

比如：

1
title: Myblog

hexo的站点配置

编辑hexo目录下的_config.yml文件，具体配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点信息配置，根据自己的需要进行修改
title: Zeng's Blog    #站点名，会在浏览器页面标签左上角显示
subtitle: Love Coding,Enjoy Life  #副标题
description: zeng  #对站点的描述，给搜索引擎看的，可以自定义
author: zeng  #网站作者
language: zh-Hans  #网站语言
timezone: Asia/Shanghai  #时区
avatar: /images/logo.jpg  #网站logo，会在浏览器页面标签左上角显示

# URL 博客地址,与申请的GitHub一致
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://fzy-line.github.io/
root: /
#博客链接格式
permalink: :year/:month/:day/:title/ 
permalink_defaults:

# Directory  #目录设置，一般不修改
source_dir: source  #资源文件夹，放在里面的文件会上传到github中
public_dir: public  #公共文件夹，存放生成的静态文件
tag_dir: tags  #标签文件夹，默认是tags。实际存放在source/tags中。
archive_dir: archives  #档案文件夹，默认是archives。
category_dir: categories  #分类文件夹，默认是categories。实际存放在source/categories中。
code_dir: downloads/code  #代码文件夹，默认是downloads/code
i18n_dir: :lang  #国际化文件夹，默认跟language相同
skip_render:  #跳过指定文件的渲染，您可使用 glob 来配置路径。

# Writing  这是文章布局、写作格式的定义，一般不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag  #分类和标签，一般不修改
default_category: uncategorized
category_map:
tag_map:

# Date / Time format  #日期、时间格式，一般不修改
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD 
time_format: HH:mm:ss

# Pagination  #可根据自己需要修改
## Set per_page to 0 to disable pagination
per_page: 6  #分页，每页文章数量
pagination_dir: page

# Extensions  #扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next  #博客主题
  
# Deployment 这里配置站点部署到Github，上一节中已经讲过
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:你的Github用户名.github.io.git
  branch: master

hexo使用主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。

hexo官方主题下载地址：https://hexo.io/themes/，里面有多种多样的主题模板供大家选择。

这里推荐一款很火的主题：next，下面的配置也是以这个主题为例。如果你使用的是其他的主题，那么请你自己根据说明文档进行配置。

next主题的官网，有很详细的配置文档：http://theme-next.iissnan.com/

下载主题

next下载地址：https://github.com/iissnan/hexo-theme-next

到Gtihub下载此主题后解压，打开可以看到里面很多主题相关的文件，我们将此文件夹改名为next，然后将它复制到站点目录的/themes/目录下。

启用主题

hexo默认是使用的landscape主题，我们可以在站点目录下的/themes/目录下看到landscape文件夹。

我们的themes文件夹里可以放很多主题的文件夹，但是实际上我们的网站采用哪一个主题，这是需要我们进行配置的，打开编辑全局配置文件，找到下面的内容：

1
2
3
4
# Extensions  #扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next  #博客主题，默认是landscape

在theme字段这里填上你下载的主题的文件夹的名字，例如我们使用next主题就填上next。这样配置文件就和我们的主题文件关联起来了。

配置主题配置文件

主题配置文件位于站点目录下的/themes/next/目录下，打开编辑，这里我们只贴出需要修改的地方进行介绍，如下：

（1）配置基本信息

1
2
3
4
5
6
7
8
9
10
11
# 网站图标，将其放在hexo站点/source/目录下
favicon: /logo.jpg

# 关键词，例如下面是我写的
keywords: "Python,Life,Android"

# 网站建立时间，显示在页面底部
since: 2016

# 网站版权声明，显示在页面底部
copyright: true

（2）选择外观样式

目前 NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白

Mist - Muse 的紧凑版本，整洁有序的单栏外观

Pisces - 双栏 Scheme，小家碧玉似的清新

1541751766152

找到主题配置文件的如下三行，其中#号表示注释，要启用哪一种样式就把#号去掉即可。

1
2
3
4
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces

（3）设置菜单

菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。

1
2
3
4
5
6
7
8
menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  about: /about
  #sitemap: /sitemap.xml
  #commonweal: /404.html

此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

1
2
3
4
5
6
7
8
9
10
11
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat
测试配置效果
1
2
3
$ hexo clean #用于清除缓存
$ hexo generate #生成静态网页
$ hexo server #开启本地预览

访问：http://localhost:4000/ 查看效果。

解决遇到的问题

到这里会发现点击左侧菜单的分类、标签和关于会提示找不到页面。

这是因为我们只是创建了菜单，还没有创建相应的页面。

新建页面的hexo命令是：

1
$ hexo new page "pageName"

我们新建分类、标签、关于页面：

1
2
3
$ hexo new page 'categories'
$ hexo new page 'tags'
$ hexo new page 'about'

分别执行完这三条命令后，我们会发现站点目录下的/source/目录下多了三个文件夹：categories，tags，about，每个文件夹里面都会生成一个index.md文件，如下：

默认都只会生成title和date字段，我们要为其添加上type字段，并赋值。

注意：博客文章的抬头信息中每个字段后面的冒号是英文格式的，而且其后要加一个空格再写值

categories下的index.md：

1
2
3
4
5
---
title: categories
date: 2016-12-02 23:28:27
type: categories
---

tags下的index.md：

1
2
3
4
5
---
title: tags
date: 2016-12-02 23:31:23
type: tags
---

about下的index.md：

1
2
3
4
5
---
title: about
date: 2016-12-02 23:31:23
type: about
---

这样我们的这几个页面也就没有问题了。至此，基本的配置也就完成了，接下来介绍如何写博客与发布博客。

发布博客

新建博客文章
1
$ hexo new "Name"

实例：

新建博客《我的第一篇博客》

1
$ hexo new "我的第一篇博客"

到站点目录下的/source/_posts/目录下可以看到生成了名为：我的第一篇博客.md的文件，这是Markdown格式的文件，可以用sublime text3或者notepad++等编辑器打开，也可以下载一个MarkdownPad来编辑Markdown文件。

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

如果你没有使用过Markdown编辑器，那请你自己去学习一下Markdown语法。

Markdown 语法说明(简体中文版)：认识与入门MarkDown

编辑博客

Hexo默认新建的文章抬头已有title、date、tags等属性，可能缺乏categories和meta标签，想要指定目录就需要添加categories属性，而meta标签则是为了便于搜索引擎的收录。如下：

1
2
3
4
5
---
title: 我的第一篇博客
date: 2016-12-02 23:44:20
tags: #文章标签 可以省略
---

tags字段是文章的标签，可以指定标签也可以不指定，如果要指定多个标签需要这样做：

1
2
3
tags: 
 - Linux
 - Http

我们可以添加上categories字段，对博客进行分类管理，然后点击主页左侧菜单的分类就可看到具体的分类。例如：

1
categories: Linux

如何实现上图的阅读全文功能？

在自己喜欢的位置添加一个：

1
<!--more-->

或者在主题配置文件里设置

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

即可，主题会自动识别这个标签，生成对应的阅读全文按钮。

发布博客
1
2
$ hexo clean  #清除缓存 网页正常情况下可以忽略此条命令
$ hexo generate  #生成静态页面至public目录

写好之后可以现在本地预览，确定无误之后再部署到Github上。

1
2
$ hexo server  #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
$ hexo deploy  #将.deploy目录部署到GitHub

需要说明的是：

我们博客文章的编写都是Markdown文件，但是发布到github上的其实是html文件，将Markdown转换成html这个工作我们只要输入hexo generate命令即可，hexo会帮我们完成转换。

hexo命令简写形式
1
2
3
4
hexo n "我的博客" == hexo new "我的博客"
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

第三部分

主要介绍了自己的博客站点所使用的一些第三方服务的配置，以及主题的一些优化。当然，每个人的需要都不太相同，大家也可以根据自己的喜好去选择使用第三方服务来让自己的博客站点更完善更强大。

再次强调：在Hexo中有两份主要的配置文件，其名称都是_config.yml。其中，一份位于站点根目录下，主要包含Hexo本身的配置,我们称之为全局配置文件；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项,我们称之为主题配置文件。

博客图片存放

Markdown编辑器支持插入图片，可以直接给出图片的链接，因此我们可以将图片存放在我们hexo项目的目录下，再填写对应的路径，也可以将其存放在云服务器上，然后给出链接。

但是服务器可能会出各种问题。

这里我们使用另外一种方法。

  1. 到博客根目录下修改_config.yml文件：
1
post_asset_folder: true

设置 post_asset_folder为true 后，在建立文章时，Hexo 会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到此文件夹内，这样就可以更方便的使用资源。

  1. 到博客的根目录下安装插件

    1
    npm install https://github.com/CodeFalling/hexo-asset-image --save

然后创建一文章 hexo new “test” 然后查看博客的 ../source/_posts 目录下的文件

配置第三方服务

多说社会化评论

（1）多说创建站点

多说官网：http://duoshuo.com/

登录多说官网，点击主页的我要安装来到创建站点页面填写基本信息：

点击创建后出现：服务异常,请联系客服人员的错误不是因为真的出现异常，而是你填写的用户名或者其他信息不符合他的要求，只是他没有提示你，这是需要注意的地方。比如我遇到的是用户名不能使用‘-’中划线和‘_’下划线，或者多说域名填写格式错误。

（2）创建站点完成后在主题配置文件中新增duoshuo_shortname字段。

值设置成上一步中填写的值（红色方框框出部分的值）

例如：

1
duoshuo_shortname: fzyLine
多说分享

多说分享必须与多说评论同时使用

编辑主题配置文件，添加字段 duoshuo_share，值为 true。

1
2
# 多说分享服务
duoshuo_share: true

可以修改成如下的样子：

当site_uv: true时，代表在页面底部显示站点的UV值。即访客数：

1
2
3
4
# 效果：本站访客数12345人次
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次

当site_pv: true时，代表在页面底部显示站点的PV值。即总访问量：

1
2
3
4
# 效果：本站总访问量12345次
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次

当page_pv: true时，代表在文章页面的标题下显示该页面的PV值（阅读数）。

1
2
3
4
# 效果：本文总阅读量12345次
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次
站内搜索

next主题的官方文档提供了几种实现搜索服务的方式，我们就使用配置最简单的Local Search，添加百度/谷歌/本地 自定义站点内容搜索。

（1）安装 hexo-generator-searchdb，在站点目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

（2）编辑全局配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

（3）编辑主题配置文件启用本地搜索

1
2
3
# Local search
local_search:
  enable: true

Github pages + Hexo搭建静态博客站点的系列文章到这里就完结了，其实也算是一个很详细的教程了，花了一些时间来整理。之后可能不会再更新，但是，如果之后遇到一些问题或者有更好的推荐，可能还会再写。