这是一个用 Hexo + Butterfly 搭建的个人博客，部署在阿里云轻量应用服务器上。这里记录一下从零到上线的完整过程、每一步用到的命令，以及主题风格的配置，方便以后回顾，也希望能帮到同样在折腾的人。

这是一个什么类型的博客

简单来说，它是一个个人技术博客，内容主要分两类：

  • CTF 学习笔记：以 Pwn 方向为主，记录题目分析、漏洞原理和利用过程，属于自己边学边记的 writeup；
  • 生活向页面：比如「专属菜单」这种和吃饭有关的小页面。

所以它不太像资讯或营销站，更像是一个带一点个人色彩的学习记录站：技术文章 + 少量私人内容。

用到的技术

  • 框架：Hexo 7（静态博客生成器）
  • 主题：Butterfly 5
  • 服务器：阿里云轻量应用服务器
  • 面板：宝塔 Linux 面板
  • 部署：本地生成静态文件后上传

一、本地搭建

搭建教程主要参考 B 站 UP 主「卷二兔」的视频，主题配置各种细节则参考 Butterfly 官网。

因为后续这位博主的博客关停了，他的自动化脚本没法照搬，所以后面的配置基本是自己摸索、查资料完成的。

安装 Hexo 并初始化博客：

1
2
3
4
5
6
7
8
9
# 安装 Hexo 命令行工具（全局）
npm install hexo-cli -g

# 初始化一个博客目录
hexo init blog
cd blog

# 安装依赖
npm install

安装 Butterfly 主题：

1
npm install hexo-theme-butterfly

然后在 _config.yml 里指定主题：

1
theme: butterfly

二、主题与风格

Butterfly 是我选择它的主要原因：颜值高、配置项多，开箱就有比较现代的效果。它自带这些特性：

  • 卡片式布局：首页文章以卡片形式展示，支持多种布局（左图右文、封面在上等）；
  • 深色模式：右上角可一键切换；
  • 文章目录（TOC）：长文可以在侧边显示目录，方便跳转；
  • 代码高亮 + 复制按钮：写代码笔记很实用；
  • 本地搜索：配合 hexo-generator-search 实现站内搜索；
  • 响应式：手机、平板、电脑都能正常显示。

个人的一些配置（节选自 _config.butterfly.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
# 导航栏
nav:
  logo: ./img/6.jpg
  display_title: true

# 顶部菜单
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open

# 头像与背景
avatar:
  img: ./img/6.jpg
background: './img/sky.png'
index_img: './img/lll.png'
archive_img: './img/s.png'

# 首页布局：3 = 封面与信息左右交替
index_layout: 3

# 文章目录
toc:
  post: true
  number: true
  expand: true

# 代码块主题
code_blocks:
  theme: pale night
  copy: true
  language: true

只改配置文件就能完成大部分美化，不用动主题源码，改起来比较省心。

三、常用指令

日常写作、预览、生成都会用到这几条：

1
2
3
4
hexo new "文章标题"   # 新建一篇文章
hexo clean            # 清理缓存和 public 目录
hexo generate         # 生成静态文件，简写 hexo g
hexo server           # 本地预览，简写 hexo s，默认 http://localhost:4000

也可以直接用 package.json 里封装好的脚本：

1
2
3
npm run build     # 等于 hexo generate
npm run server    # 等于 hexo clean && hexo generate && hexo server
npm run deploy    # 等于 hexo deploy

四、推送到 GitHub

博主用的推送方法我用不了，后来自己查了 AI，配置好 GitHub SSH 之后成功把代码推了上去。

1
2
3
4
5
6
7
8
9
10
11
12
13
# 生成 SSH 密钥（一路回车即可）
ssh-keygen -t rsa -C "你的邮箱"

# 查看公钥内容，复制到 GitHub -> Settings -> SSH and GPG keys
cat ~/.ssh/id_rsa.pub

# 初始化仓库并推送
git init
git add .
git commit -m "init blog"
git branch -M main
git remote add origin git@github.com:用户名/用户名.github.io.git
git push -u origin main

五、购买服务器和域名

服务器和域名都是在阿里云买的。本来以为很简单，结果卡了我很久：

  • 一开始不知道宝塔面板装在哪，还在本机上装了一个；
  • 装好之后一直登不上面板，后来才发现需要放行 8888 端口；
  • 连接面板时不要挂代理。

阿里云

六、域名备案

弄完才发现域名还没备案，只能按照阿里云的流程正常备案，前后搞了十几天。

七、部署网站

登录宝塔面板后配置网站：

宝塔网站配置

先在本地生成静态文件：

1
2
hexo clean
hexo generate

然后有两种部署方式。

方式一：把 public 文件夹里的所有内容手动上传到网站根目录（宝塔「文件」页面），并设置好网站路径：

设置路径

方式二：用 scp 直接传到服务器：

1
scp -r ./public/* root@服务器IP:/www/wwwroot/你的域名/

八、开启 HTTPS

网站建好后，http://域名 能打开，但 https://域名 打不开，原因是还没有部署 SSL 证书。解决方法：

  1. 网站设置里进入 SSL；
  2. 申请 Let’s Encrypt 免费证书；
  3. 域名同时勾选带 www 和不带 www 的两个；
  4. 申请成功后点击部署，并放行 443 端口。

九、服务器安全

防火墙端口不要全部对全网开放，尤其是管理端口。建议：

  • 对外只保留 80、443；
  • 22（SSH）、8888（宝塔面板）限制来源为自己的公网 IP；
  • 不用 FTP 就关闭 20、21 和 39000-40000；
  • 不用 phpMyAdmin 就关闭 888。

十、文章加密

如果想给带某个标签的文章设置密码，可以用 hexo-blog-encrypt 插件。先安装：

1
npm install hexo-blog-encrypt --save

然后在 _config.yml 里按标签配置密码：

1
2
3
4
5
6
7
8
9
10
encrypt:
  abstract: 这篇文章已加密，输入密码后即可查看。
  message: 请输入密码查看内容。
  wrong_pass_message: 密码错误，请重新输入。
  theme: default
  kdf:
    iterations: 600000
  tags:
    - name: zjy
      password: lZove

保存后重新生成：

1
2
hexo clean
hexo generate

这样所有带 zjy 标签的文章都会自动加密，只有输入正确密码才能查看，而且以后新增的同标签文章也会自动生效。

参考链接