个人博客搭建

这年头谁还没有个博客,真的是~~~


本文档介绍如何使用阿里云服务器,通过 Nginx 和 Hexo 搭建个人博客的详细流程,服务器系统为 Debian13,个人电脑为 Windows11。

阿里云 Debian 的操作

首先你需要在阿里云购买云服务器,不管是轻量应用服务器还是云服务器ECS都可以,个人博客对服务器性能几乎没有要求,根据预算选择就好。然后你也注册了自己的域名并且完成了备案,更进一步也完成了公安联网备案,更进一步你也申请了 ssl 证书,在阿里云可以非常方便的申请到个人测试证书。当然没有备案也可以先把服务器搭好。

阿里云开发者社区里有充足的文档可供查询:

现在在本地通过 ssh 连接到阿里云 Debian 或者在云服务器管理控制台通过网页远程连接,当你第一次连接的时候根据你自己的设置通常会是使用 root 帐户连接,接下来需要一些设置。打开 Windows Terminal:

1
ssh root@your_serverip

1. 安装 git 和 nginx

1
2
3
4
apt update
apt install git
apt install nginx
# 安装nginx后,nginx默认就是启动的

在 Debian 中,nginx 的配置文件位置为 /etc/nginx/,你对网站的一些设置和 ssl 证书的存放都将在这个位置;nginx 所管理的网站的内容文件存放位置为 /usr/share/nginx/html/。此时当启动 nginx 之后在浏览器中输入自己的网址,就可以打开自己的网站,默认为 nginx 的欢迎界面。当然为了介绍方便,我们会更改这两个存储位置。

2. 创建 Linux 用户

此时我们使用的是 Debian 的管理员帐户,我们先在阿里云 Debian 中创建一个个人帐户,这里我们假设你想创建的帐户名为 wuyo。当然如果你已经在 Debian 中拥有个人帐户,可以跳过,直接使用你的帐户即可:

1
2
useradd -d "/home/wuyo/" -m -s "/bin/bash" wuyo
passwd wuyo #设置新建帐户的密码

创建此用户的目的是在从 Windows 系统向服务器推送网站内容时,由此用户接收来自 Windows 的文件,然后再把文件放置到服务器存放网站内容的文件夹中。

接下来我们创建要存放网站内容和网站 ssl 证书的文件夹:

1
2
3
4
5
# 我们将网站内容放在 /wuyo.art/文件夹内,将ssl证书放在 /ssl/cert/文件夹内
cd /
mkdir wuyo.art
mkdir /ssl
mkdir /ssl/cert

为了能让 wuyo 帐户有权限将网站文件存放到 /wuyo.art/ 文件夹内,我们需要改变该文件夹所属用户和用户组:

1
chown -R wuyo:wuyo /usr/share/nginx/html/

3. 初始化一个 git 库

登录 wuyo 用户:

1
su wuyo -

在 wuyo 用户的用户目录下创建 git 库:

1
2
# cd ~
git init --bare wuyo.art

创建 hook

1
2
cd ~/wuyo.art/hooks
vim post-receive

在 vim 中输入下列内容:

1
2
#!/bin/bash
git --work-tree=/wuyo.art/ --git-dir=/home/wuyo/wuyo.art checkout -f

为 post-receive 添加可执行权限:

1
chmod 700 post-receive

4. 下载并安装 ssl 证书

阿里云提供了方便的官方教程:在Nginx或Tengine服务器安装 SSL证书(Linux)。这个教程中的内容你只需要看到 安装 SSL 证书到 Nginx 这里即可,后续 nginx 配置继续看本文档。如果你在向服务器上传证书时没有教程中相关上传工具,你也可以使用命令行上传:

1
2
3
scp xxx.key xxx.pem root@serverip:/ssl/cert
# 将xxx换成你的网站域名,比如wuyo.art.key
# 将serverip换为你的服务器的IP地址

5. 配置nginx

如果你的服务器只运行这一个网站并且后续不打算升级 nginx,你可以直接修改 /etc/nginx/sites-enabled/default 这个文件。但我们通常不这么做,通常我们在 /etc/nginx/sites-available/ 路径下新建一个文件并进行配置:

1
sudo vim /etc/nginx/sites-available/wuyo.art.conf

如果你已经上传了 ssl 证书,可以进行如下配置:

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
server {
listen 80 default_server;
listen [::]:80 default_server;

root /wuyo.art;
index index.html;

server_name wuyo.art;

location / {
try_files $uri $uri/ =404;
}

error_page 404 404.html;
location = /404.html {
}
}

server {
listen 443 ssl;
server_name wuyo.art www.wuyo.art;
root /wuyo.art;
index index.html;
location / {
try_files $uri $uri/ =404;
}

error_page 404 /404.html;
location = /404.html {
}

ssl_certificate /ssl/cert/wuyo.art.pem;
ssl_certificate_key /ssl/cert/wuyo.art.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;

}

如果你没有上传 ssl 证书,那么只需要配置第一个 server 块即可。然后我们需要告知 nginx 启用这个配置:

1
sudo ln -s /etc/nginx/sites-available/wuyo.art.conf /etc/nginx/sites-enabled/

为了避免可能的冲突,我们通常会禁用默认配置:

1
sudo rm /etc/nginx/sites-enabled/default

配置好后重新加载 nginx 配置文件:

1
sudo nginx -s reload

6. nginx配置优化

将来将会强制使用 https,现在你可以将 http 强制重定向到 https,优化后的 nginx 配置如下:

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
server {
listen 80;
listen [::]:80;
server_name wuyo.art www.wuyo.art;

# 强制所有 HTTP 请求 301 重定向到 HTTPS
return 301 https://$host$request_uri;
}

server {
listen 443 ssl default_server;
listen [::]:443 ssl default_server;

server_name wuyo.art www.wuyo.art;

root /wuyo.art;
index index.html;

location / {
try_files $uri $uri/ =404;
}

# --- Error Pages ---
error_page 404 /404.html;
location = /404.html {
}

# --- SSL Configuration ---
ssl_certificate /ssl/cert/wuyo.art.pem;
ssl_certificate_key /ssl/cert/wuyo.art.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;

# --- Security Headers ---
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
}

Win11 本地操作

1. 安装 git

我们需要通过 git 将 hexo 生成的网页代码推送给云服务器,所以首先需要在本地安装 git 并进行一些设置,通过本链接 Git - Downloading Package 下载 Windows 版 git 安装并进行基本设置,安装完 git 后打开 Windows Terminal 执行如下命令来配置 git:

1
2
git config --global user.email "你的邮箱地址"
git config --global user.name "你的名字"

2. 生成 ssh 公钥

为了能在使用 hexo deploy 时更高效免输密码,我们可以配置公钥登录服务器。继续在 Windows Terminal 中执行:

1
2
cd ~
ssh-keygen -t rsa

此时命令会提示设置 passphrase,可以直接回车跳过,这样在 deploy 博客内容时就不用输入密码,操作方便;当然为了安全,你可以设置并牢记 passphrase。执行完该命令之后,会在你的用户文件夹下生成 .ssh/ 文件夹,其中含有 id_rsa、id_rsa.pub 两个文件,其中 id_rsa.pub 存放了公钥,打开该文件并复制其中内容,然后 ssh 使用 wuyo 帐户登录到服务器 执行以下命令:

1
2
3
4
cd ~
mkdir .ssh
vim .ssh/authorized_keys
# 将前面复制的id_rsa.pub文件中的公钥粘贴进vim并保存

3. 安装 Node.js 和 hexo

下载 Node.js 24.11.1 LTS 进行安装,安装完成后可以打开 Windows Terminal 通过以下命令检测安装是否成功:

1
npm -v #如果安装成功,会输出你现在的npm版本

在你喜欢的位置新建一个文件夹,用于存放你网站的内容,比如我新建的文件夹为 C:\Users\zhang\wuyo.art\,进入这个文件夹,右键选择在终端中打开,开始安装 hexo:

1
npm install -g hexo # 安装hexo

如果安装速度很慢或者安装失败,先修改 npm 镜像为淘宝后再安装 hexo:

1
2
npm config set registry https://registry.npmmirror.com
npm install -g hexo

安装结束后可以通过 hexo -v 验证是否安装成功,然后执行初始化并安装必要的插件:

1
2
hexo init
npm install hexo-deployer-git --save

此时在文件夹会生成许多文件,找到并打开配置文件 _config.yml,找到最下方的 deploy 进行修改:

1
2
3
4
deploy:
type: git
repo: wuyo@serverip:/home/wuyo/wuyo.art # serverip替换为你的服务器IP地址或网站网址
branch: master

_config.yml 中其他的配置根据你网站的具体情况进行配置。

至此,所需要的基本配置已经完成,执行以下命令编译你的网站内容并进行发布:

1
hexo g -d

如果你之前生成公钥时设置了 passphrase,此时需要输入 passphrase,若此处没有报错,打开浏览器输入你的网站就可以查看你的博客了。这时你的博客会使用 hexo 默认的主题 landscape,如果你需要更多的美化,可以在这里选择你想要的主题。

强迫症:浏览器地址栏优化

在 hexo 的配置文件 _config.yml 中有两个优化选项:

设置 描述 默认值
pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html,设置为 false 时去除 true
pretty_urls.trailing_html 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) true

但第二个选项可能会受到你主题的影响而失效,导致你想达到 http://wuyo.art/hexo_blog 这样的效果,而实际却是 http://wuyo.art/hexo_blog.html 。这时我们可以通过将网站扁平化管理并配置 nginx 的重定向 rewrite 配置来消除链接尾部的 .html。所谓扁平化管理,就是让所有 post.md 生成的 post.html 直接位于网站的根路径下。

打开你 hexo 博客本地的文件夹,打开 _config.yml 配置文件,做如下修改:

1
2
#permalink: :title/
permalink: :title.html

permalink: :title/ 表示在由 .md 文件生成 .html 文件时进行如下操作:

  • /source/_post/title.md –> /title/index.html

此时由于 trailing_index 设为了 true,地址栏里显示的效果是 http://wuyo.art/hexo_blog/ 。

而 permalink: :title.html 表示在由 .md 文件生成 .html 文件时进行如下操作:

  • /source/_post/title.md –> /title.html

此时由于 trailing_html 设为了 true,地址栏里应当显示的效果是 http://wuyo.art/hexo_blog ,但由于主题的冲突,很可能实际效果是 http://wuyo.art/hexo_blog.html 。为了应对这种情况,可以对服务器上 nginx 的配置文件 /etc/nginx/sites-aailable/wuyo.art.conf 做如下修改:

1
2
3
4
5
6
7
8
9
10
server {
# 其他配置保持不变
index index.html index.htm;

rewrite ^/(?!.*index)(.*)\.html$ /$1 permanent;
location / {
try_files $uri $uri.html $uri/ =404;
}
# 其他配置保持不变
}

在配置中我们匹配链接使用的表达式是 ^/(?!.*index)(.*)\.html$,表示我们要匹配除了 index.html 之外的其他所有的 xxx.html。为什么要进行这样的配置呢,因为我们的网站中,除了文章生成的 title.html 文件外,还会存在着 /archives、/tags 这样的归类文件夹,这些内容的存储方式通常是 /archives/index.html,如果不把这些路径下的 index.html 排除出去,那么这些路径在地址栏就会变成 https://wuyo.art/archives/index ,这更加不美观,所以我们设计匹配模式时必须要排除 “index”。

修改完配置文件后重新加载配置文件:

1
sudo nginx -s reload

无聊的工作

1. 逆扁平化

前面我们采用了扁平化的网站管理,但这会导致网站根路径下文件数量非常多,我们打算把所有 post.html 放置在网站根路径下面的 /docs 文件夹内进行管理。那么我们需要修改 hexo 生成 post.html 文件时的路径,修改 hexo 网站的配置文件 _config.yml:

1
2
url: https://wuyo.art
permalink: docs/:title.html

在Hexo官方文档中这样介绍 permalink:

配置 描述 默认值
permalink 文章的 永久链接 格式 :year/:month/:day/:title/

同时 permalink 也影响了 .md 文件在生成 .html 文件时的存放路径,这样我们所有文章的 .html 文件就都自动生成在了 /docs 文件夹下。

2. 地址栏优化

当我们将文章统一放在地址栏后,我们访问文章的链接就会变成 https://wuyo.art/docs/hexo_blog 这种形式,但明显这引入了新的麻烦,地址栏链接变得繁琐,我们需要把链接中的 “/docs” 去除。但是这种效果导致我们的网站形成了混合结构,网站的根路径是 /,而文章的根路径是 /docs/。如前文的方法,我们需要配置 nginx 的重定向来去除链接中的 “/docs”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 修改 443 server
server {
listen 443 ssl default_server;
listen [::]:443 ssl default_server;

server_name wuyo.art www.wuyo.art;

root /wuyo.art;
index index.html;

# 主要修改以下位置
# --- hidden /docs and .html ---
rewrite ^/docs/(.*)$ /$1 permanent;
rewrite ^/(?!.*index)(.*)\.html$ /$1 permanent;
location / {
#try_files $uri $uri.html $uri/ =404;
try_files $uri /docs/$uri.html $uri/ =404;
}

# 其余配置保持不变
}

我们引入了新的匹配模式 ^/docs/(.*)$ 来去除 /docs,但是这会带来另一个影响,链接由 https://wuyo.art/docs/hexo_blog 重定向为 https://wuyo.art/hexo_blog 后我们的网站内不存在这样一个资源,也就是网站根路径下面没有 hexo_post.html 这个文件了,所以我们要修改 try_files 命令,让 nginx 在网站根路径下面找不到文件时,就去 /docs/ 路径下面去找,也就是 try_files $uri /docs/$uri.html $uri/ =404; 这行配置。

重新加载 nginx 配置文件,这样链接就 “优化” 完成了:

1
sudo nginx -s reload

本地文件管理

我们通过 hexo new post title 来新建文章,该命令会在本地路径的 _post 文件夹下生成 title.md 文件。有时我们会将不同类型文章分别放在不同文件夹中,这时我们使用命令 hexo new post --path cpp/hello_cpp,这条命令会在 _post/cpp/ 文件夹下生成 hello_cpp.md 文件。

我们前面使用了 hexo 配置文件 _config.yml 的 permalink 配置来将生成的 .html 文件集中管理,其实在.md 文件中也可以使用 permalink 配置。在 hexo .md 文件中可以进行许多 Front-matter 配置,当然也包括 permalink。在 Front-matter 中使用 permalink 不仅可以定义 .html 存放路径,也可以直接定义 .html 的文件名,比如本文件 01_hexo_blog.md 的 Front-matter 的设置为:

1
2
3
4
5
6
---
title: 个人博客搭建
permalink: docs/hexo_blog.html
date: 2021-01-01 00:00:01
toc: true
---

这样在 hexo generate 时生成的网页文件为 /docs/hexo_blog.html。

在 permalink 的加持下,意味着在本地你可以以任意形式组织文档,可以在 _post/ 的任意子文件夹下新建任意名称的 .md 文件,只要在 Front-matter 中设置好 permalink,就完全不会影响到你 .html 文件的管理。

个人博客搭建

https://wuyo.art/hexo_blog

作者

苏维埃不喝可乐

发布于

2021-01-01

更新于

2026-10-15

许可协议

CC BY-NC-SA 4.0