零成本搭建个人博客网站

本文最后更新于 2026年3月12日 下午

一、想法

相信每位 IT 从业者都希望拥有一个属于自己的博客网站。大约花了一天时间，我尝试了几种方法，最终找到了可以用最低成本将自己的网站推送到互联网上的方案。考虑到自身，仅通过公众号发布文章总显得有些单一，而且搜索引擎一般无法检索到公众号内容，导致之前写过的一些文章只能在公众号平台上阅读。所以，我萌生了搭建个人博客网站的想法。考虑到囊中羞涩，本着能不花钱就白嫖的原则，我最终选择通过 Hexo 和 GitHub Pages 组合来搭建个人博客网站。

https://f0nesec.github.io

二、建站过程

提示 🔔

演示会在 MacOS 系统部署，对于 Windows 和 Linux 而言，原理基本类似，无非安装软件的方式不同。

搭建个人网站的工具非常多，但由于自身代码能力有限，手动从零开发一套完整源码并不现实，因此日常写作更倾向于使用 Markdown 文本格式。在公众号平台上，我通常会将写好的 Markdown 文档直接转换为公众号可识别的内容，稍作修改即可发布，这大大减少了排版和字体调整的时间成本。为了实现一次写作，多处发布，可以借助 Hexo 工具将 Markdown 文档生成静态网页，并通过 GitHub Pages 进行托管，从而将内容发布到互联网。当然，整个过程中也一些小的插曲，例如图片资源的保存方式、文章模板的选择、配置文件的修改以及部署时出现的各种报错。

2.1 安装 Hexo

根据 Hexo 官网文档执行一些必要的程序安装。

1
https://hexo.io/zh-cn/docs/

注意 ⚠️

需要提前安装 Node.js 和 Git 程序，注意： 国内网络可能下载较慢甚至无法下载，建议使用一些科学上网工具。

对于 Macos 首先需要安装 brew，它可以帮助我们管理系统的软件包，很多软件工具都可以通过该工具安装。

使用 brew 安装 Git 和 Node.js。

1
2
brew install git
brew install node

通过 npm 安装 Hexo，注意： 安装 Node.js 后即可直接使用 npm 来安装 Hexo 等工具。

1
npm install -g hexo-cli

如果是 Windows 系统，可在 Git 和 Node.js 官网下载安装包执行安装。

2.2 Hexo 初始化

安装完 Hexo 后，首先进行项目初始化，期间会向 GitHub 下载一些默认的依赖。

1
hexo init F0ne

初始化完成后，会自动创建一个目录（以项目名称命名），该目录包含一些配置文件，这里挑选常用的进行说明。

  • _config.yml： Hexo 的核心配置文件，包含一些全局配置信息。
  • node_modules： 插件目录，必要的时候需要修改一些插件配置信息，注意： 每个项目都有自己的插件目录，如果历史已经下载了某个插件，后来又新建了一个项目，该项目不会加载历史安装的插件，而是需要我们重新执行安装：npm install hexo-deployer-git --save。
  • source： 包含我们写的 markdown 文件，其中 _posts 为默认的文章目录，存放首页文章内容，通过 hexo new name 创建的页面会单独在 source 创建一个目录。
  • themes 存放主题目录，我们可以下载开发者创建好的主题，放置到该目录，通过修改项目的 _config.yml 文件 theme 字段使用不同主题，当然如果直接通过 npm 下载主题则会放置到 node_modules 目录。

通过 hexo s 启动项目，如果没有任何报错，访问 http://locahost:4000 即可查看初始的网站内容。

2.3 配置 Hexo 主题

Hexo 默认的主题不太美观，我们可在官网主题栏目查找自己喜欢的类型，下载项目源码放置到 themes 目录，部分主题支持 npm 下载，也可通过该方式下载到插件目录。

我最终选择了 hexo-theme-fluid 主题，它完全满足我的需求。

1
2
3
4
5
# GitHub
https://github.com/fluid-dev/hexo-theme-fluid

# docs 文档
https://hexo.fluid-dev.com/docs/

对于 hexo-theme-fluid 主题的一些注意事项：

  • 注意主题的安装方式，不同的安装方式主题的放置目录也不同。
  • 文档中介绍建议创建 _config.fluid.yml 副本，该副本会覆盖主配置文件 _config.yml ，修改 _config.fluid.yml 副本可实现全局配置，但对于 deploy 配置还是需要在 _config.yml 中配置，不然不会生效（该配置用于从本地提交代码只 GitHub），建议_config.fluid.yml 副本和主配置文件保持一致。

2.3.1 配置分享

全局配置文件 _config.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
34
35
36
37
38
39
40
41
42
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
# 一些网站默认配置，官网有每个参数的详细说明
title: F0ne'Blog
subtitle: ''
description: ''
keywords:
author: F0ne
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
# 这里配置为自己GitHub创建的GitHub Pages域名，其余不用动
url: https://name.github.io
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

...
snip # 这里均默认配置
...

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 配置主题
theme: fluid

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
# 配置 GitHub Pages，用于提交代码至GitHub
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main
  message: Power by F0ne # 自动部署commit备注，可不填

主题配置文件：配置文件每一项均有中文说明，按需配置即可。

2.4 创建 GitHub Pages

登录 GitHub，点击创建储存库，然后输入自己 GitHub 名称，其余保持默认，注意： 一定要满足 username.github.io 格式，其中 username 为自己 GitHub 名称，其次，一定要选择共享，否则无法开启 GitHub Pages。

配置 ssh 私钥进行 Git 上传，点击存储库Settings-Deploy keys，将本地生成的 ssh 私钥添加至存储库。

1
ssh-keygen -t ed25519

通过 ssh 测试配置是否正常，出现如下响应代表可正常上传代码，注意： 关于 Git 上传的配置文件已在上面说明，需完成全局配置文件 _config.yml 中 deploy 字段配置（参见 2.3.1 配置分享）。

1
ssh -T git@github.com

2.5 部署代码至 GitHub Pages

安装 Hexo Git 插件。

1
2
# 注意：在项目根目录运行
npm install hexo-deployer-git --save

主题和配置文件均配置完成后，可以写一些测试的 Markdown 文档，然后通过 Hexo Git 功能将代码部署至 GitHub Pages。

1
2
# --debug 可选，用于排查错误
hexo clean && hexo g && hexo d --debug

注意 ⚠️

这里需要特别注意，在提交代码前一定要设置好用户名和邮箱，不然你的 GitHub 作者部分会显示灰色。

1
2
3
4
5
6
7
8
# 设置用户名
git config --global user.name "f0nesec"

# 设置邮箱
git config --global user.email "xxx@xxx"

# 查看配置
git config --global --list

不添加或添加错误时页面用户会显示为灰色，看着很奇怪：

正确添加邮箱和用户名：

部署成功即可在存储库看到代码上线。

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
❯ hexo clean && hexo g && hexo d --debug
INFO  Validating config
INFO  Deleted database.
INFO  Deleted public folder.
INFO  Validating config
INFO  Start processing
INFO  hexo-blog-encrypt: encrypting "TombWatcher 靶机 WP" based on the password configured in Front-matter with theme: default.
INFO
------------------------------------------------
|                                              |
|     ________  __            _        __      |
|    |_   __  |[  |          (_)      |  ]     |
|      | |_ \_| | | __   _   __   .--.| |      |
|      |  _|    | |[  | | | [  |/ /'`\' |      |
|     _| |_     | | | \_/ |, | || \__/  |      |
|    |_____|   [___]'.__.'_/[___]'.__.;__]     |
|                                              |
|             感谢使用 Fluid 主题              |
|    文档: https://hexo.fluid-dev.com/docs/    |
|                                              |
------------------------------------------------

INFO  Files loaded in 108 ms
INFO  Generated: local-search.xml
...
snip
...
07:36:05.260 INFO  Copying files from extend dirs...
[main 6dbef3b] Power by F0ne
 2 files changed, 3 insertions(+), 3 deletions(-)
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (8/8), 627 bytes | 627.00 KiB/s, done.
Total 8 (delta 3), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To github.com:f0nesec/f0nesec.github.io.git
   bb9bd9d..6dbef3b  HEAD -> master
branch 'main' set up to track 'git@github.com:f0nesec/f0nesec.github.io.git/master'.
07:36:09.028 INFO  Deploy done: git

点击存储库Settings-pages页面，设置 GitHub Pages main 分支代码部署（上传 main 分支默认会自动开启部署）。

大约等待几分钟，即可在互联网访问 https://username.github.io 网站。

三、其他说明

截至目前网站已经部署完成，后续只需要编写 Markdown 文档，然后通过 Hexo 进行推送即可。当然了，如果资金允许的情况，完全可以购买一个 VPS，在本地使用 Hexo 将 Markdown 文档构建为 html，然后再将整个 public 目录上传至服务器，最后通过中间件将其部署至互联网，但这样一来，你会增加域名解析、网站备案、SSL 证书等一系列问题，似乎托管至 GitHub Pages 是一个不错的选择，但缺点就是访问卡慢，有时还需要挂载代理访问。

关于网站图片的问题，为了省事我选择将图片和代码一并上传至 GitHub 中。因为文章首先会发布微信公众号，其次再发布到博客网站，对于微信公众号它会在线加载图床图片，然后将其压缩另存到微信公众号服务器中，所以他只需要访问图床一次，如果博客网站也使用图床图片，他无法将其自动存放本地，这样就会增加图床的下载流量，图床的上传流量免费，下载却是收费的，所有，我选择二次加工，通过脚本的方式，将 Markdown 文本包含的图片下载至本地，然后一并托管至 GitHub 存储库中，虽然有点费劲，但是为了节约成本暂时先这样吧。

3.1 文章加密

由于官方的限制一些靶机的 WriteUp 需要加密发布，以 HackTheBox 平台为例，官方不允许学习者直接将活跃机器的 WriteUp 发布到互联网，这样会破坏学习环境（最重要的是影响商业价值），只允许学习者通过加密的方式将器发布出来，加密的密码一般为机器的用户 hash 值，解释一下，Windows 一般会以 Administrator 用户 hash 作为密码，Linux 则以 /etc/shadow 中 root 用户 hash 作为密码，回归到博客，我们可以通过 hexo-blog-encrypt 插件设置文章密码，只需要在 Markdown 开头 Front-matter 处定义密码，这样用户就必须输入正确密码才能访问。

1
2
# 注意：在项目根目录运行
npm install hexo-blog-encrypt --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: TombWatcher 靶机 WP
date: 2026-01-13 11:20:00
tags: [Windows, AD]
categories: HackTheBox
category_bar: true
index_img: /img/one/one.png
banner_img: /img/one/two.png
# 设置密码和一些提示
password: f0ne
abstract: 有东西被加密了, 请输入密码查看.
message: 测试使用密码为：f0ne
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
---

效果展示：

Thanks

如果我的文章对您有帮助或您希望与我更多交流，欢迎点击「关于我」，通过页面中的微信公众号、邮箱或 Discord 与我联系；若您发现文章中存在任何错误或不足之处，也非常欢迎通过以上方式指出，在此一并致以衷心的感谢。 😊🫡

最后，祝您生活愉快！🌞✨

博客建设
#Hexo #GitHub Pages
零成本搭建个人博客网站
https://www.f0nesec.top/2026/01/15/blog-building/
作者
F0ne
发布于
2026年1月15日
许可协议