乱七八糟

基于Github结合Hexo搭建个人博客

摘要

本文介绍如何使用Hexo构建自己的个人博客，同时利用 GitHub 的仓库将内容发布到公网上。

部署与配置

GitHub配置

申请GitHub账号，并且创建名为 weilu2.github.io 的仓库。

安装 NodeJs

安装 Git

从官网下载安装 git.

配置免密提交

打开 Git Bash，进入用于存放博客的根目录，比如 d:\blog：

1
2
3
4
weilu@weilu-PC MINGW64 ~
$ cd /d/Blog/

weilu@weilu-PC MINGW64 /d/Blog

配置 Git 用户名和邮箱

1
2
3
4
5
weilu@weilu-PC MINGW64 /d/Blog
git config --global user.name "weilu2"

weilu@weilu-PC MINGW64 /d/Blog
git config --global user.email "weilu0324@163.com"

生成密钥

1
$ ssh-keygen -t rsa -C "weilu0324@163.com"

生成的密钥存储路径一般在 C:\Users\weilu\.ssh

使用 ssh-agent 管理私钥
启动 ssh-agent

1
2
3
weilu@weilu-PC MINGW64 ~/.ssh
$ eval "$(ssh-agent -s)"
Agent pid 11508

将生成的密钥添加到 ssh-agent

1
2
3
weilu@weilu-PC MINGW64 ~/.ssh
$ ssh-add id_rsa
Identity added: id_rsa (id_rsa)

将公钥添加到GitHub中
在 GitHub 个人的设置中，添加 SSH-KEY。

验证

1
2
3
$ ssh -T git@github.com
...
Hi weilu2! You've successfully authenticated, but GitHub does not provide shell access.

配置 Hexo

安装

使用命令

1
2
3
4
5
6
7
8
C:\Users\weilu>npm install -g hexo-cli
C:\Users\weilu\AppData\Roaming\npm\hexo -> C:\Users\weilu\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any
"} (current: {"os":"win32","arch":"x64"})

+ hexo-cli@1.1.0
added 225 packages from 414 contributors in 31.47s

创建博客

在D盘创建一个目录 D:\Blog，进入该目录，使用如下命令初始化博客：

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
D:\Blog>hexo init
INFO  Cloning hexo-starter to D:\Blog
Cloning into 'D:\Blog'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 67
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'

Cloning into 'D:/Blog/themes/landscape'...
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 838 (delta 1), reused 3 (delta 0), pack-reused 832
Receiving objects: 100% (838/838), 2.55 MiB | 25.00 KiB/s, done.
Resolving deltas: 100% (441/441), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated titlecase@1.1.2: no longer maintained
npm WARN deprecated postinstall-build@5.0.3: postinstall-build's behavior is now built into npm! You should migrate off
of postinstall-build and use the new `prepare` lifecycle script with npm 5.0.0 or greater.

> nunjucks@3.1.3 postinstall D:\Blog\node_modules\nunjucks
> node postinstall-build.js src

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any
"} (current: {"os":"win32","arch":"x64"})

added 420 packages from 484 contributors and audited 4704 packages in 15.704s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

初始化的过程是从 hexo 仓库下载博客的目录结构和文件，根据网速，需要一定时间。

安装依赖模块：

1
2
3
4
5
6
7
D:\Blog>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any
"} (current: {"os":"win32","arch":"x64"})

audited 4704 packages in 2.15s
found 0 vulnerabilities

生成静态页面

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
D:\Blog>hexo g
INFO  Start processing
INFO  Files loaded in 112 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2018/09/index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: archives/2018/index.html
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: js/script.js
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: 2018/09/28/hello-world/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/images/banner.jpg
INFO  Generated: fancybox/jquery.fancybox.js
INFO  28 files generated in 288 ms

启动服务器

1
2
3
D:\Blog>hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

能够正常启动服务器，并在浏览器中访问，说明 Hexo 配置成功，接下来要做的事情就是讲生成的静态页面提交到 Github上即可。

提交 Hexo 到 GitHub

修改 _config.yml 文件，在最后增加如下内容：

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

安装 Hexo 插件：

1
2
3
4
5
6
7
8
9
10
D:\Blog>npm install hexo-deployer-git --save
npm WARN deprecated swig@1.4.2: This package is no longer maintained
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"
"} (current: {"os":"win32","arch":"x64"})

+ hexo-deployer-git@0.3.1
added 31 packages from 36 contributors and audited 5874 packages in 7.482s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

再次运行生成命令，就会自动生成静态文件，并部署到 git上了：

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
76
77
78
D:\Blog> hexo d -g
INFO  Start processing
INFO  Files loaded in 62 ms
INFO  0 files generated in 78 ms
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in D:/Blog/.deploy_git/.git/
[master (root-commit) 67b0210] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2018/09/28/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2018/09/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2018/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory
[master 9321f7e] Site updated: 2018-09-29 00:08:21
 29 files changed, 5777 insertions(+)
 create mode 100644 2018/09/28/hello-world/index.html
 create mode 100644 archives/2018/09/index.html
 create mode 100644 archives/2018/index.html
 create mode 100644 archives/index.html
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/blank.gif
 create mode 100644 fancybox/fancybox_loading.gif
 create mode 100644 fancybox/fancybox_loading@2x.gif
 create mode 100644 fancybox/fancybox_overlay.png
 create mode 100644 fancybox/fancybox_sprite.png
 create mode 100644 fancybox/fancybox_sprite@2x.png
 create mode 100644 fancybox/helpers/fancybox_buttons.png
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
 create mode 100644 fancybox/helpers/jquery.fancybox-media.js
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
 create mode 100644 fancybox/jquery.fancybox.css
 create mode 100644 fancybox/jquery.fancybox.js
 create mode 100644 fancybox/jquery.fancybox.pack.js
 create mode 100644 index.html
 create mode 100644 js/script.js
 delete mode 100644 placeholder
Branch 'master' set up to track remote branch 'master' from 'git@github.com:weilu2/weilu2.github.io.git'.
To github.com:weilu2/weilu2.github.io.git
 + c049402...9321f7e HEAD -> master (forced update)
INFO  Deploy done: git

直接访问

写作

创建分类页面

1
2
D:\Blog>hexo new page categories
INFO  Created: D:\Blog\source\categories\index.md

编辑这个页面，增加 type ：

1
2
3
4
5
---
title: categories
date: 2018-09-29 09:10:18
type: "categories"
---

修改主题下的 _config.yml 文件，在 menu 中增加分类导航：

1
2
3
4
5
menu:
  Home: /
  categories: /categories
  Archives: /archives
rss: /atom.xml

创建标签页面

1
2
D:\Blog>hexo new page tags
INFO  Created: D:\Blog\source\tags\index.md

编辑页面，增加类型：

1
2
3
4
5
---
title: tags
date: 2018-09-29 10:12:20
type: "tags"
---

在主题的配置文件中，增加标签的链接：

1
2
3
4
5
6
menu:
  Home: /
  categories: /categories
  tags: /tags
  Archives: /archives
rss: /atom.xml

创建内容页面

1
2
D:\Blog>hexo new post "基于Github结合Hexo搭建个人博客"
INFO  Created: D:\Blog\source\_posts\2018-09-29-基于Github结合Hexo搭建个人博客.md