0%

用Hexo搭建个人博客

Hexo

Hexo 是一款基于 Node.js 的静态博客框架,可以方便地生成静态网页并免费托管在 GitHub Coding 上,免费拥有自己的独立博客。

搭建步骤:

  • 创建个人仓库
  • 配置开发环境
  • 部署网站
  • 编写博文

参考资料:
Hexo 开发文档
GitHub + Hexo 搭建个人网站详细教程


准备开发环境

需要一个 GitHub 或 Coding 账号用于托管 Pages 服务,需要安装的软件有 Git,Node.js 和 Hexo。

创建个人仓库

注册并登录 GitHub ,点击 New repository 按钮创建新仓库,仓库名为:用户名.github.io

创建GitHub仓库

安装Git

Git 是开源的分布式版本控制系统,在本地搭建好网站后需要使用 Git 同步到 GitHub 上。安装成功后,在资源管理器可以点击右键进入 Git Bash。

设置 user.nameuser.email 配置信息,将 Git 与 GitHub 帐号绑定:

1
2
$ git config --global user.name "GitHub用户名"
$ git config --global user.email "GitHub注册邮箱"

生成密钥文件,使用默认选项:

1
$ ssh-keygen -t rsa -C "GitHub注册邮箱"

%UserProfile%\.ssh 找到 id_rsa.pub 密钥文件,用记事本打开并复制全部内容

打开 SSH 设置页面 ,选择 New SSH KeyTitle 随意填写,将刚刚复制的 id_rsa.pub 中的内容粘贴进 Key,最后点击 Add SSH key

打开 Git Bash 测试 SSH 是否成功:

1
2
3
4
$ ssh [email protected]
PTY allocation request failed on channel 0
Hi sannaha! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

如果想要了解 Git 的更多内容,参看 Git 教程

安装Node.js

Hexo 基于 Node.js,下载 Node.js 并安装。安装时会同时安装 npm 并配置环境变量,如能正确显示版本号则说明安装成功:

1
2
3
$ node -v && npm -v
v14.17.3
7.19.1

安装Hexo

Hexo 是个人博客网站的框架, 需要在电脑里创建一个文件夹 sannaha.moe 用来存放 Hexo 框架和整个网站内容。在 sannaha.moe 文件夹下进入命令行,使用 npm 命令安装 Hexo:

1
$ npm install -g hexo-cli

如果因为网络问题导致安装失败,可使用 淘宝 NPM 镜像 ,使用时用 cnpm 替换 npm 命令即可。

创建博客

初始化博客:

sannaha.moe/
1
2
# 初始化博客
$ hexo init blog

初始化后会出现一篇 hello-world 博文,也可以自己创建一篇新的博文,会根据名称生成一个 Markdown 文件,存储在 blog/source/_post 目录下:

1
$ hexo new HelloWorld

生成静态文件并启动本地服务器:

1
2
3
4
5
# 根据博文生成静态文件
$ hexo g

# 启动本地服务器,默认使用4000端口
$ hexo s

浏览器访问 http://localhost:4000 就可以看到博客了。

部署网站

上面只是把博客运行在本地,只有将网站部署到互联网上才能允许所有人访问。

认识配置文件

首先说明两个重要的配置文件,blog 目录里的 _config.yml 文件称为 站点配置文件,位置如图:

站点配置文件

进入 blog\themes\landscape 文件夹,里面也有个 _config.yml 文件,这个称为 主题配置文件,位置如图:

主题配置文件

填写仓库地址

将博客部署到 GitHub 上,需要修改 站点配置文件 并填入仓库地址,如果需要部署到多个平台,repo 可以像下面这样填写多行:

_config.yml
1
2
3
4
5
6
deploy: 
type: git
repo:
github: [email protected]:sannaha/sannaha.github.io.git
coding: [email protected]:sannaha/sannaha.coding.me.git
branch: master

如果需要部署到多个平台,repo 可以像上面那样填写多行。

安装Git部署插件

1
npm install hexo-deployer-git --save

推送到GitHub

1
2
3
4
5
6
# 清除缓存文件和已生成的静态文件
hexo clean
# 生成静态文件
hexo g
# 推送到仓库中
hexo d

推送成功后,仓库名称 https://sannaha.github.io 即为博客网址,可以在互联网上访问到。

编写博文

之前我们只是发布了一篇没有正文的博文,那么如何编写博文内容呢?

首先我们要找到博文的位置,打开 blog\source\_post\ 找到创建的 HelloWorld.md 文件。用记事本打开,看看里面的内容:

1
2
3
4
5
6
7
---
title: HelloWorld //博文标题,初始为文件名
date: 2017-11-11 11:11:11 //博文创建时间,影响主页的排序
tags: [经验,建站] //博文的标签,自行添加,多个标签之间用半角逗号隔开
---
//以上称为Front-matter,用于设置该博文的标题、日期、标签等参数
//以下写正文

Front-matter 部分参数如下:

参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
tags 标签(不适用于分页)
categories 分类(不适用于分页)
comments 开启文章的评论功能 true

认识Markdown

Markdown 是一种轻量级标记语言,允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 HTML)文档”。我们正是通过编写 Markdown 格式的文档来实现博文的编写与排版。

工欲善其事,必先利其器。虽然 Markdown 是纯文本格式,使用记事本便可以打开,但为了高效编写与预览博文,推荐使用 MarkdownPad2

如遇 Windows 10 下 MarkdownPad2 预览问题,请参考 这里 来解决。

MarkdownPad2

升级 MarkdownPad2 专业版:

1
2
3
4
# 邮箱地址
[email protected]
# 授权秘钥
GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==

Markdown语法

介绍一些常用的Markdown语法:

功能 语法 快捷键
标题 #一级标题#/##二级标题 ## Ctrl+1/2
加粗 **粗体** Ctrl+B
斜体 *斜体* Ctrl+I
引用 > 引用 Ctrl+Q
行内代码 `行内代码` Ctrl+K
代码段 每一行代码前加上制表符(Tab) Ctrl+K
有序列表 1. 有序列表1 2. 有序列表2 Ctrl,Shift+O
无序列表 - 无序列表1 - 无序列表2 Ctrl+U
超链接 [超链接](https://site.com) Ctrl+L
图片 ![图片](https://pic.jpg) Ctrl+G

更多Markdown语法参见 Markdown 语法说明 ,Markdown 兼容 HTML,可以直接在文章中插入 HTML 标签,实现更多功能。

HTML 标签

介绍一些常用的 HTML 标签。

功能 语法 示例
设置字型、颜色和大小 <font color="red" size="6">设置颜色和大小</font> 设置颜色和大小
设置字体颜色 <font color="#0000ff">设置字体颜色</font> 设置字体颜色
删除线 <del>又到了白色相簿的季节</del> 又到了白色相簿的季节
上标 上<SUP> 九天揽月 </SUP> 九天揽月
下标 下<SUB> 五洋捉鳖 </SUB> 五洋捉鳖
居左 <p align="left">居左文本</p>

居左文本

居中 <p align="center">居中文本</p>

居中文本

居右 <p align="right">居右文本</p>

居右文本

更多 HTML 标签的使用参见 w3schools

启用SSL

除了GitHub、Coding 这样的代码托管网站外,也可以像我一样将博客推送到个人服务器上的 Git 仓库中。之前一直使用 Cloudflare 提供的灵活模式加密浏览器到 Cloudflare 之间的流量,最近遇到了使用 HTTPS 无法打开网站的问题,因此选择使用服务器上的自签名证书。

Cloudflare提供的SSL加密模式

证书颁发机构选择 Let’s Encrypt,使用 Let’s Encrypt 官方推荐的 Cerbot 来自动执行证书的颁发和安装。HTTP 服务程序为 Nginx,操作系统为 CentOS 7。

  1. 为了避免其他包管理系统上发行的 Cerbot 因不能及时更新存在问题,Cerbot 团队强烈建议大多数用户通过 snap 这个包管理工具进行安装。因此我们需要先安装 snapd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 将EPEL扩展库添加到CentOS 7
$ yum install epel-release

# 安装snapd
$ yum install snapd

# 启用snapd.socket
$ systemctl enable --now snapd.socket

# 创建软链接,用来启用classic snap支持
$ ln -s /var/lib/snapd/snap /snap

# 确保snapd版本是最新的
$ snap install core; sudo snap refresh core
2021-06-05T13:53:09+08:00 INFO Waiting for automatic snapd restart...
core 16-2.50.1 from Canonical✓ installed
snap "core" has no updates available

# 移除yum上的certbot,进一步确保certbot是通过snap安装的
$ yum remove certbot
Loaded plugins: fastestmirror
No Match for argument: certbot
No Packages marked for removal
  1. 安装 cerbot
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
# 安装certbot。
$ snap install --classic certbot
certbot 1.16.0 from Certbot Project (certbot-eff✓) installed

# 准备 Certbot 命令
# 创建软链接,确保certbot命令可以运行
$ ln -s /snap/bin/certbot /usr/bin/certbot

# 获取证书并让certbot自动编辑Nginx配置以提供服务,一步开启HTTPS访问
$ certbot --nginx
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Enter email address (used for urgent renewal and security notices)
(Enter 'c' to cancel): [email protected]

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server. Do you agree?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: y

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing, once your first certificate is successfully issued, to
share your email address with the Electronic Frontier Foundation, a founding
partner of the Let's Encrypt project and the non-profit organization that
develops Certbot? We'd like to send you email about our work encrypting the web,
EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: y
Account registered.

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: sannaha.moe
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel): 1
Requesting a certificate for sannaha.moe

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/sannaha.moe/fullchain.pem
Key is saved at: /etc/letsencrypt/live/sannaha.moe/privkey.pem
This certificate expires on 2021-09-03.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

Deploying certificate
Successfully deployed certificate for sannaha.moe to /etc/nginx/conf.d/blog.conf
Congratulations! You have successfully enabled HTTPS on https://sannaha.moe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
* Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
* Donating to EFF: https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1. 测试自动续订服务是否正常:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 测试自动续订
$ certbot renew --dry-run
Saving debug log to /var/log/letsencrypt/letsencrypt.log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Processing /etc/letsencrypt/renewal/sannaha.moe.conf
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Account registered.
Simulating renewal of an existing certificate for sannaha.moe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations, all simulated renewals succeeded:
/etc/letsencrypt/live/sannaha.moe/fullchain.pem (success)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1. 访问网站,验证是否启用 HTTPS:

证书

迁移博客

如果需要使用其他电脑继续编写博客,需要先在其他电脑上重新初始化博客,然后迁移旧博客的配置文件、博文、主题并重新安装插件即可。Git 以及 node.js 的安装过程不再赘述。

初始化博客

sannaha.moe/
1
2
3
4
5
6
7
8
9
10
11
12
13
# 如果之前安装有旧版本node,可能需要重新安装最新版本
# 查看旧版node安装位置
$ where node
D:\NodeJS\node.exe

# 如果之前装有旧版本npm,重新安装新版npm来避免部分插件安装失败,-g表示全局安装
$ npm install npm -g

# 安装hexo
$ npm install hexo-cli -g

# 初始化博客
$ hexo init blog

迁移文件

需要迁移的文件包括:

  1. 博客配置文件 blog/_config.yml
  2. 主题配置文件夹 blog/themes/
  3. 文章及相关内容的文件夹 blog/source/
  4. 模板文件夹 blog/scaffolds/
  5. 记录博客插件的文件 blog/package.json

安装插件

blog/
1
2
3
4
5
6
# 安装插件,会根据package.json文件中记录的插件列表进行下载安装
$ npm install

# 避免长时间传输断开连接,每120s发送一个空包用于保持客户端的连接,发720次空包(24h)后断开连接
ClientAliveInterval 120
ClientAliveCountMax 720

部署

1
2
3
4
5
# 生成静态文件
$ hexo g

# 推送到仓库中
$ hexo d

如果博文或资源文件过多会导致生成的博客体积过大,在推送到仓库过程中很可能会因为连接超时导致推送失败,可以在 /etc/ssh/sshd_config 中添加如下配置来避免超时:

/etc/ssh/sshd_config
1
2
3
# 避免长时间传输断开连接,每120s发送一个空包用于保持客户端的连接,发720次空包(24h)后断开连接
ClientAliveInterval 120
ClientAliveCountMax 720

参考资料
Hexo 开发文档
GitHub+Hexo 搭建个人网站详细教程
Let’s Encrypt 快速入门
安装 Cerbot
安装 snap