博客搭建教程【懒人版】

前言：

本来是没想着把这篇放博客上的，但是想着下学期可能要给新生讲学长课堂就还是去找了一下之前的聊天窗口，让ai总结了一下全过程。网上的视频教程很多，但本人非常爱偷懒，所以自己另外弄了一个图床来自动上传md文件里的图片，还有一个一键上传博客的脚本。不然得自己每次上传都把图片放文件夹里，还要自己敲一堆命令行。

【还是那句话，计算机岂是如此不便之物？】

学习网络安全方向，拥有一个自己的个人技术博客，不仅是记录技术、沉淀知识的极佳阵地，也是展示个人实力的“第二张身份证”。

很多新手会选择购买昂贵的云服务器（VPS）来搭建 WordPress 等动态网站。但从网络安全和运维的角度来看，动态网站存在较多的数据库交互和后台入口，容易产生 SQL 注入、XSS、弱口令爆破等安全隐患。同时，服务器维护、备案、续费也是一笔不小的开销。

因此，本文将带你采用现代极客最推崇的 静态博客方案 —— Hexo 框架 + Butterfly 主题 + 腾讯云 COS 黄金图床 + Vercel 全球部署 + 自动化中控脚本。

这套方案拥有三个核心优势：

  1. 零成本：服务器与 CDN 节点由全球大厂提供，除十来块钱的域名费外，其余完全免费白嫖。
  2. 零攻击面：全站纯静态 HTML 页面，无数据库，无后端交互，天然免疫 99% 的 Web 攻击。
  3. 极佳写作体验：配合 Typora 与自动化脚本，本地一键排版、一键公网发布。

一、 总体结构

在开始搭建前，我们先来理清整套博客系统的流量流向与数据传输链路：

1
2
3
4
5
6
7
8
9
10
11
[本地 Typora 写作] ➔ [一键中控台.bat 自动格式化]
                             │
                             ▼ (Git 极速推送)
                     [GitHub 私有仓库]
                             │
                             ▼ (自动触发 Hook)
                     [Vercel 云端部署] ➔ [绑定自定义域名 (全国秒开)]
                             │
                      (图片自动异步上传)
                             ▼
                     [腾讯云 COS 存储桶]

下面我们一步步打通这条流水线。

二、 第一阶段：本地环境准备与 Hexo 初始化

Hexo 是基于 Node.js 运行的静态网页生成引擎。我们需要在本地电脑安装环境：

1. 安装 Node.js 与 Git

  • 前往官网下载并安装 Node.js（推荐 LTS 版本）与 Git。

  • 配置你的 Git 全局身份信息：

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

2. 全局安装 Hexo 并初始化项目

为了加快下载速度，建议先将 npm 切换至国内阿里镜像源，随后挑选一个非系统盘（如 D 盘）初始化博客：

1
2
3
4
5
6
7
8
9
10
11
# 切换阿里镜像源
npm config set registry https://registry.npmmirror.com

# 全局安装 Hexo 命令行工具
npm install -g hexo-cli

# 初始化你的博客主文件夹（以 D:\myblog 为例）
D:
hexo init myblog
cd myblog
npm install

三、 第二阶段：Butterfly 主题与汉化美化

Butterfly 是目前 Hexo 圈子里最流行、颜值最高的响应式主题之一。

1. 下载主题与渲染引擎

在博客根目录（myblog）下执行：

1
2
3
4
5
6
7
8
# 安装主题包
npm install hexo-theme-butterfly --save

# 安装 Pug 和 Stylus 渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save

# 备份主题默认配置文件至根目录（便于独立配置，此为 Windows 命令）
copy .\node_modules\hexo-theme-butterfly\_config.yml _config.butterfly.yml

2. 修改配置启用主题

  • 打开主配置文件 _config.yml，定位到 theme 项：

    codeYaml

    1
    2
    3
    theme: butterfly
    language: zh-CN  # 汉化总开关
    author: 你的笔名

  • 运行 hexo s，打开浏览器访问 http://localhost:4000 即可本地预览。

四、 第三阶段：腾讯云 COS 黄金图床（摆脱图片裂开痛点）

Markdown 文件的痛点是本地图片上传到公网容易裂开。传统的 GitHub 图床在大陆常受网络限制，我们采用 腾讯云对象存储（COS） 方案。

1. 腾讯云端配置

  1. 登录腾讯云控制台，搜索进入 “对象存储（COS）”，创建存储桶（Bucket）。

  2. 访问权限（核心重点）：必须选择 公有读私有写。

    安全提示：若选“私有”，读者看不了图；若选“公有读写”，黑客可任意上传恶意文件导致欠费。

  3. 获取 API 密钥：在控制台右上角头像 ➔ API密钥管理 ➔ 新建一对 SecretId 和 SecretKey。

2. 客户端 Typora + PicGo 终极配置

  1. 下载开源上传工具 PicGo。
  2. 在 PicGo 图床设置 ➔ 选择 “腾讯云COS”，填入你的 SecretId、SecretKey、存储区域（如 ap-chengdu）、存储桶名（格式为 xxx-123456789，带数字），AppId 留空，点击确定并设为默认。
  3. Typora 绑定：强烈推荐使用 Typora 0.9.98 最后的免费 Beta 绿色版。你可以从 GitHub 干净的备份仓库中下载：
    👉 点击这里：前往 GitHub 下载 Typora 0.9.98 绿色版
    下载后直接解压运行即可，打开 偏好设置 ➔ 图像 ➔ 插入图片时选择 无特殊操作 或 复制到本地，服务选择 PicGo (app)，并填入你本地 PicGo.exe 的绝对路径。
  4. 测试成功后，以后粘贴图片，链接会自动替换为公网直链！

五、 第四阶段：极客的“全自动博客中控台.bat”

每次更新博客需反复敲打 Git 命令极度枯燥。我们编写一个通用版 自动化中控脚本。

在你的博客根目录（如 myblog 文件夹内）新建一个文本文档，改名为 博客中控台.bat，写入以下代码：
(注：建议将此文件右键“发送到桌面快捷方式”，以后在桌面双击即可使用)

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
@echo off
setlocal enabledelayedexpansion
:: 设置字符集为 UTF-8 并变成经典黑客绿底色
chcp 65001 >nul
color 0A

:: 自动获取当前脚本所在的博客根目录
set "BLOG_ROOT=%~dp0"
set "POSTS_DIR=%BLOG_ROOT%source\_posts"

:menu
cls
echo ==================================================
echo            个人网安博客管理控制台
echo ==================================================
echo   [1] 构思新文章 (自动生成名片并打开文件)
echo   [2] 一键同步公网 (扫描裸文件 + 提交所有修改)
echo   [3] 退出控制台
echo ==================================================
set /p choice="请输入你的选择 (1/2/3): "

if "%choice%"=="1" goto new_post
if "%choice%"=="2" goto sync_blog
if "%choice%"=="3" exit
goto menu

:new_post
echo.
set /p title="请输入文章标题: "
set /p category="请输入分类 (如: Web安全攻防): "
set /p tag="请输入标签 (如: SQL注入): "

set "filepath=!POSTS_DIR!\!title!.md"
for /f "delims=" %%i in ('powershell -noprofile -command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss'"') do set "current_time=%%i"

echo ---> "!filepath!"
echo title: !title!>> "!filepath!"
echo date: !current_time!>> "!filepath!"
if not "!category!"=="" (
    echo categories:>> "!filepath!"
    echo   - !category!>> "!filepath!"
)
if not "!tag!"=="" (
    echo tags:>> "!filepath!"
    echo   - !tag!>> "!filepath!"
)
echo --->> "!filepath!"
echo.>> "!filepath!"
echo 请在这里开始写你的正文...>> "!filepath!"

echo.
echo [成功] 文章已在后台创建！正在为你自动打开...
start notepad "!filepath!"
timeout /t 2 >nul
goto menu

:sync_blog
echo.
echo ====================================
echo   正在扫描是否有外部直接拖入的裸文章...
echo ====================================
cd /d "!POSTS_DIR!"

for %%f in (*.md) do (
    set "has_frontmatter=0"
    set /p firstline=<"%%f"
    if "!firstline!"=="---" set "has_frontmatter=1"

    if "!has_frontmatter!"=="0" (
        echo [发现外部新拖入文章]: %%~nf
        set "category="
        set "tag="
        set /p category="  请输入分类 (直接回车可跳过): "
        set /p tag="  请输入标签 (直接回车可跳过): "
        for /f "delims=" %%i in ('powershell -noprofile -command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss'"') do set "current_time=%%i"

        echo ---> "%%f.tmp"
        echo title: %%~nf>> "%%f.tmp"
        echo date: !current_time!>> "%%f.tmp"
        if not "!category!"=="" (
            echo categories:>> "%%f.tmp"
            echo   - !category!>> "%%f.tmp"
        )
        if not "!tag!"=="" (
            echo tags:>> "%%f.tmp"
            echo   - !tag!>> "%%f.tmp"
        )
        echo --->> "%%f.tmp"
        echo.>> "%%f.tmp"
        type "%%f" >> "%%f.tmp"
        move /y "%%f.tmp" "%%f" >nul
        echo  已自动补全名片！
    )
)

echo.
echo ====================================
echo   正在清理旧缓存 (避免删帖后残留)...
echo ====================================
cd /d "!BLOG_ROOT!"
npx hexo clean
if errorlevel 1 (
    echo [警告] hexo clean 失败，继续执行...
)

echo.
echo ====================================
echo   正在打包所有修改并推送到云端...
echo ====================================
:: 【注意】git add -A 会包含删除操作，比 git add . 更完整
git add -A
for /f "delims=" %%i in ('powershell -noprofile -command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss'"') do set "commit_time=%%i"
git commit -m "Auto Sync: !commit_time!"
if errorlevel 1 (
    echo [提示] 没有需要提交的修改，跳过 commit。
) else (
    echo [成功] 已提交修改。
)

echo.
echo ====================================
echo   正在拉取远端最新代码 (避免冲突)...
echo ====================================
git pull --rebase
if errorlevel 1 (
    echo [警告] pull 失败，可能存在冲突，请手动处理！
    pause
    goto menu
)

echo.
echo ====================================
echo   正在推送到 GitHub...
echo ====================================
:: 【硬编码】下面的 main 是你的主分支名，如果你的仓库主分支叫 master 请改成 master
git push origin main
if errorlevel 1 (
    echo [错误] push 失败，请检查网络或权限！
    pause
    goto menu
)

echo.
echo ====================================
echo   同步成功！Vercel 正在后台编译！
echo   通常 1-2 分钟后线上生效。
echo ====================================
pause
goto menu

以后只要双击桌面的快捷方式，无论是新建文章还是直接拖入没有标签的外部笔记，按 2 即可瞬间自动补全名片并上线。

六、 第五阶段：Vercel 云部署与域名绑定（免备案秒开）

1. 代码托管 GitHub

在 GitHub 上创建一个 Private（私有） 仓库。本地配置好 SSH 密钥后，将代码推送至私有仓库保护隐私。

2. Vercel 自动部署

登录 Vercel 导入你的 GitHub 私有仓库。Vercel 会自动识别 Hexo 并部署，但其默认域名在国内存在污染。

3. 绑定自定义域名

在腾讯云/阿里云购买一个便宜的域名（如 .top 后缀，首年十几元，续费三十元左右）：

  1. 由于服务器在海外 Vercel，域名直接解析 完全无需工信部 ICP 备案！
  2. 在 Vercel 控制台 ➔ Settings ➔ Domains 添加你的域名。
  3. 获取 Vercel 分配的 IP。
  4. 去云服务商的 DNS 解析处，添加 A 记录（指向 76.76.21.21，以 Vercel 显示为准）和 CNAME 记录（指向 cname.vercel-dns.com）。

静待 5 分钟，你的博客即可实现全国免挂梯子极速秒开！