Hi SANNAHA

A Link is a Promise.

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.name 和 user.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 Key。Title 随意填写，将刚刚复制的 id_rsa.pub 中的内容粘贴进 Key，最后点击 Add SSH key。

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

1
2
3
4
$ ssh git@github.com
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: git@github.com:sannaha/sannaha.github.io.git
    coding: git@git.coding.net: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 即为博客网址，可以在互联网上访问到。

推送到个人Git仓库

https://www.luckzym.com/posts/a4c9f44a/

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
# 安装 Git（略）
# 创建用户
$ adduser git
# 切换用户
$ su git

# 创建网站目录
mkdir -p /home/git/www/hexo


# 创建 blog 仓库
# --bare 创建一个裸仓库，裸仓库没有工作区
# 我们不会在裸仓库上进行操作，它只为共享而存在
git init --bare blog.git


# 配置 git hooks
$ cd /home/git/blog.git/hooks

# 在我们每次 push 完之后，把部署目录 /git/www/hexo 更新到博客的最新生成状态
$ vim post-receive
#!/bin/sh
git --work-tree=/home/git/www/hexo --git-dir=/home/git/blog.git checkout -f

$ chmod +x post-receive

# 另一种 hooks
$ cat post-receive 
#!/bin/bash -l
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/home/git/tmp/hexo_tmp
PUBLIC_WWW=/home/www/hexo
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}


非22端口推送

1
2
3
4
5
6
7
8
1.免密
2.修改配置

deploy:
  type: git
  repo: ssh://git@176.122.165.171:27332/home/git/blog.git
  #repo: git@149.28.85.183:/home/git/blog.git
  branch: master

编写博文

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

首先我们要找到博文的位置，打开 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
# 邮箱地址
Soar360@live.com
# 授权秘钥
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 。

迁移博客

如果需要使用其他电脑继续编写博客，需要先在其他电脑上重新初始化博客，然后迁移旧博客的配置文件、博文、主题并重新安装插件即可。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