摘要:本文主要介绍使用 hexo博客框架 + GitHub托管代码 + GitHub Pages 搭建个人博客网站。

由于各种原因,博主一直都有搭建个人博客的想法。在使用hexo之前,博主曾尝试过使用SpringBoot + JQuery编写了一个包含博客功能的网站,由于这种运行于Java环境的项目正式部署到线上比较麻烦,所以就舍弃了。
偶然间发现了hexo搭配GitHub Pages可以快速搭建一个博客网站,心中甚是欢喜,立马就动手搭建了起来。在这里分享下使用这种方式搭建博客网站的过程。

环境搭建

安装git

进入git官网,下载安装git工具即可。

安装node.js

同样的,进入node.js官网,下载安装node.js工具即可。

安装hexo

hexo的安装需要node.js环境,在命令行中输入以下命令安装hexo-cli(hexo的命令行工具)。

1
npm install hexo-cli -g

使用hexo

创建本地hexo项目

1
2
3
4
hexo init blog  #使用hexo初始化blog项目
cd blog #进入blog目录
npm install #安装依赖
hexo server #启动本地web服务,在浏览器输入localhost:4000预览博客

生成静态网站

1
hexo generate

生成静态网站后,项目的目录结构如下。

1
2
3
4
5
6
7
.deploy/        #需部署文件
node_modules/ #node.js依赖的插件
public/ #生成的静态网页文件
scaffolds/ #模版
source/ #博客正文和其他源文件
themes/ #主题
_config.yml #全局配置文件

编辑_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
# Hexo Configuration     
## Docs: [https://hexo.io/docs/configuration.html](https://hexo.io/docs/configuration.html)
## Source: [https://github.com/hexojs/hexo/](https://github.com/hexojs/hexo/)
# Site
title: #标题
subtitle: #副标题
description: #站点描述
author: #作者
language: zh-cn #语言
timezone:
# URL
## If your site is put in a subdirectory, set url as ‘[http://yoursite.com/child](http://yoursite.com/child)‘ and root as ‘/child/‘
url: #网址
root: /
permalink: :year/:month/:day/:title/ #文章的链接格式
permalink_defaults:
# Directory
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
tag_dir: tags #标签目录
archive_dir: archives #归档目录
category_dir: categories #分类目录
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md #新文章标题
default_layout: post #默认模版,包括post、page、photo、draft(文章、页面、照片、草稿)
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
Tagdefault_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/](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: 10
pagination_dir: page
# Extensions
## Plugins: [https://hexo.io/plugins/](https://hexo.io/plugins/)
## Themes: [https://hexo.io/themes/](https://hexo.io/themes/)
theme: apollo #主题
# Deployment
## Docs: [https://hexo.io/docs/deployment.html](https://hexo.io/docs/deployment.html)
deploy:
type: git
repo: 远程仓库地址
branch: master

hexo命令行

  • 常用命令
1
2
3
4
5
6
7
8
hexo help                   #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可在public目录查看
hexo server #本地预览
hexo deploy #部署.deploy目录
hexo clean #清除缓存,每次部署前都要删除.deploy目录
  • 简写
1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

编辑文章

使用hexo new postName命令新建文章之后,可以在/source/_posts/目录下看到以postName命名的markdown文件,对该md文件进行编辑即可。

插件使用

  • 添加rss订阅功能

安装hexo-generator-feed插件。

1
npm install hexo-generator-feed –-save

安装完成后,打开**_config.yml**文件进行配置。

1
2
3
4
5
6
7
8
9
10
11
# Extensions
## Plugins: [http://hexo.io/plugins/](http://hexo.io/plugins/)
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
#可选项,可以不填
type: atom
path: atom.xml
limit: 20

打开当前主题的**_config.yml**文件,添加RSS订阅链接。

1
Rss: /atom.xml

GitHub Pages

注册GitHub帐号

进入GitHub官网注册帐号。

创建代码仓库

使用注册的GitHub帐号登录之后,创建名称为username.github.io的仓库,这是特殊的命名约定。可以通过http://username.github.io来访问个人主页。

使用SSH方式push代码到GitHub仓库

打开Git Bash工具,进入.ssh/目录,生成新的SSH key。

1
2
cd ~/.ssh
ssh-keygen -t rsa -C "Email地址"

之后会看到如下信息:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

回车之后会要求输入密码。

Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

如果输入的密码为空,在提交代码时系统不会弹出要求输入密码的弹框。

进入GitHub, 点击头像进入settings SSH and GPG keys New SSH key选项,将公钥文件~/.ssh/id_rsa.pub的内容复制到Key里,点击Add SSH key按钮即可向GitHub添加SSH key。

部署hexo到GitHub Pages

配置代码仓库

打开 _config.yml文件,配置代码仓库。

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

部署

打开Git Bash工具,输入以下命令部署hexo到GitHub Pages。

1
2
3
hexo clean  #清除缓存
hexo g #生成网页文件
hexo d #部署

生成SSH key的时候如果设置了密码的话,系统会弹窗提示输入密码,输入正确的密码即可完成部署。

查看

进入GitHub Pages可以查看博客。如果有自己的域名的话,可以在 GitHub 的项目 settings -> GitHub Pages -> Custom Domain 中填写个人博客域名保存,并将个人博客域名以 CNAME 方式解析到 yupaits.github.io 即可在自己的博客域名中浏览博客。如果不想每次 hexo d 部署博客之后都去 GitHub Pages 中修改域名,可以在 sources 目录下新建一个名为 CNAME 的文件,并用文本编辑器打开该文件输入博客域名保存即可。