个人笔记网站搭建完整教程

本教程基于 Hexo + GitHub Pages + PicGo 图床，从零搭建个人技术博客

由于限制：更多详细内容访问：别催小唐敲代码

一、前期准备

1.1 工具清单

1.2 技术栈说明

text

┌─────────────────────────────────────────────┐
│ │
│ Typora (写作) │
│ ↓ │
│ PicGo (图片上传) │
│ ↓ │
│ GitHub (图片存储) │
│ ↓ │
│ Hexo (生成静态博客) │
│ ↓ │
│ GitHub Pages (博客托管) │
│ ↓ │
│ 你的博客网站 ✨ │
│ │
└─────────────────────────────────────────────┘

二、安装配置环境

2.1 安装 Node.js

Windows 系统

Bash

# 打开 CMD（Win+R 输入 cmd）
node -v
npm -v

# 正常显示版本号即可：
# v18.17.0
# 9.6.7

提示：有基础的开发者可以使用 nvm 进行 Node.js 版本管理

Mac 系统

Bash

# 使用 Homebrew 安装（推荐）
brew install node

# 验证
node -v
npm -v

2.2 安装 Git

Windows 系统

Bash

# CMD 中输入
git –version

# 显示：git version 2.43.0

配置 Git 用户信息

Bash

# 设置用户名和邮箱（替换为你的信息）
git config –global user.name "你的名字"
git config –global user.email "你的邮箱@example.com"

# 验证配置
git config –global –list

2.3 安装 Hexo

Bash

# 全局安装 Hexo CLI
npm install -g hexo-cli

# 验证安装
hexo -v

# 显示类似：
# hexo: 7.1.0
# hexo-cli: 4.3.1

加速技巧：如果安装慢，配置国内镜像

Bash

# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

# 验证
npm config get registry

2.4 安装 Typora

注意：

• 新版 Typora 收费（89元）
• 可以下载旧版免费使用：https://typoraio.cn/windows/dev_release.html
• 或使用其他 Markdown 编辑器（如 VS Code、MarkText 等）

2.5 安装 PicGo

三、Hexo 博客初始化

3.1 创建博客项目

Bash

# 1. 创建博客文件夹（选择你喜欢的位置）
# 示例：创建在 D 盘
cd D:
mkdir Blog
cd Blog

# 2. 初始化 Hexo 博客
hexo init my-blog
cd my-blog

# 3. 安装依赖
npm install

项目结构：

text

my-blog/
├── _config.yml # 博客配置文件
├── package.json # 依赖包信息
├── scaffolds/ # 文章模板
├── source/ # 源文件
│ ├── _posts/ # 博客文章存放处
│ └── about/ # 关于页面
├── themes/ # 主题文件夹
└── public/ # 生成的静态网站

开发提示：有基础的开发者可以用 VS Code 打开整个项目，安装 Copilot 插件辅助开发

3.2 本地预览博客

Bash

# 生成静态文件
hexo generate
# 或简写
hexo g

# 启动本地服务器
hexo server
# 或简写
hexo s

# 看到提示：
# INFO Hexo is running at http://localhost:4000/

在浏览器访问：http://localhost:4000

看到默认博客页面说明成功！🎉

停止服务器：Ctrl + C

3.3 创建第一篇文章

Bash

# 使用命令创建
hexo new "我的第一篇博客"

# 生成文件：source/_posts/我的第一篇博客.md

编辑文章（用 Typora 或其他编辑器打开）：

Markdown

—
title: 我的第一篇博客
date: 2024-01-15 10:30:00
tags: [Hexo, 博客]
categories: 技术
—

# 欢迎来到我的博客

这是我的第一篇博客文章！

<!– more –>

## 正文内容

这里是文章正文…

## 插入图片


Front-matter 说明：

YAML

—
title: 文章标题
date: 发布日期
tags: [标签1, 标签2] # 标签
categories: 分类 # 分类
description: 文章摘要 # SEO 描述
cover: 封面图片链接 # 文章封面
—

3.4 重新生成并预览

Bash

# 清除旧文件
hexo clean

# 重新生成
hexo g

# 启动服务
hexo s

访问 http://localhost:4000 查看新文章！

四、GitHub Pages 部署

4.1 创建 GitHub 仓库

步骤 1：新建仓库

text

┌─────────────────────────────────────┐
│ Repository name * │
│ yourusername.github.io │
│ （必须是：你的用户名.github.io） │
├─────────────────────────────────────┤
│ Description (optional) │
│ My Personal Blog │
├─────────────────────────────────────┤
│ ✅ Public │
│ （必须公开） │
├─────────────────────────────────────┤
│ ☐ Initialize this repository with: │
│ （什么都不勾选） │
└─────────────────────────────────────┘

⚠️ 重要：仓库名必须是 用户名.github.io

步骤 2：获取仓库地址

创建后会显示：

text

https://github.com/yourusername/yourusername.github.io

复制这个地址备用

4.2 配置 SSH 密钥（推荐）

生成 SSH 密钥

Bash

# 1. 打开 Git Bash（Windows）或 Terminal（Mac）

# 2. 生成密钥（替换为你的邮箱）
ssh-keygen -t rsa -C "your_email@example.com"

# 3. 一路回车（使用默认设置）

# 4. 查看公钥
cat ~/.ssh/id_rsa.pub

# 5. 复制显示的内容（以 ssh-rsa 开头）

添加到 GitHub

验证连接

Bash

ssh -T git@github.com

# 显示：
# Hi yourusername! You've successfully authenticated…
# 说明成功！

4.3 安装部署插件

Bash

# 在博客目录下安装
cd D:\\Blog\\my-blog
npm install hexo-deployer-git –save

4.4 配置 Hexo 部署

编辑博客根目录的 _config.yml：

YAML

# 找到 Deployment 部分（在文件最底部）
# 修改为：

deploy:
type: git
repository: git@github.com:yourusername/yourusername.github.io.git
branch: main

# 完整示例：
# deploy:
# type: git
# repository: git@github.com:zhangsan/zhangsan.github.io.git
# branch: main

⚠️ 注意：

• 替换 yourusername 为你的 GitHub 用户名
• 新仓库默认分支是 main，旧仓库可能是 master
• 使用 SSH 地址（git@github.com:）而非 HTTPS

4.5 部署到 GitHub

Bash

# 清除旧文件
hexo clean

# 生成静态文件
hexo generate

# 部署到 GitHub
hexo deploy

# 或者三连：
hexo clean && hexo g && hexo d

首次部署可能需要确认 GitHub 身份

部署成功提示：

text

INFO Deploy done: git

4.6 访问博客

等待 1-2 分钟后访问：

text

https://yourusername.github.io

看到博客页面说明部署成功！🎉

4.7 配置自定义域名（可选）

购买域名

推荐域名商：

• 阿里云：https://wanwang.aliyun.com/
• 腾讯云：https://dnspod.cloud.tencent.com/
• GoDaddy：https://www.godaddy.com/

配置 DNS 解析

text

类型：CNAME
主机记录：www
记录值：yourusername.github.io

类型：A
主机记录：@
记录值：185.199.108.153
（GitHub Pages IP 地址）

在 GitHub 配置域名

在 Hexo 配置域名

编辑 _config.yml：

YAML

# URL
url: https://www.yourdomain.com
root: /

创建 source/CNAME 文件（无扩展名）：

text

www.yourdomain.com

重新部署：

Bash

hexo clean && hexo g && hexo d

五、PicGo 图床配置

5.1 创建 GitHub 图床仓库

5.2 生成 GitHub Token

⚠️ 只显示一次，务必保存好！

5.3 配置 PicGo

打开 PicGo 配置

text

┌─────────────────────────────────────────────┐
│ 设定仓库名： │
│ yourusername/blog-images │
├─────────────────────────────────────────────┤
│ 设定分支名： │
│ main │
├─────────────────────────────────────────────┤
│ 设定 Token： │
│ ghp_你的Token │
├─────────────────────────────────────────────┤
│ 指定存储路径： │
│ blog/images/ │
│ （或按年月分类：blog/{year}/{month}/） │
├─────────────────────────────────────────────┤
│ 设定自定义域名： │
│ https://cdn.jsdelivr.net/gh/yourusername/blog-images@main │
└─────────────────────────────────────────────┘

自定义域名说明：

• GitHub 原始链接：https://raw.githubusercontent.com/用户名/仓库名/分支/
• jsDelivr CDN：https://cdn.jsdelivr.net/gh/用户名/仓库名@分支/
• 备用 CDN：https://fastly.jsdelivr.net/gh/用户名/仓库名@分支/

5.4 PicGo 其他设置

1. PicGo 设置 → 设置 Server

text

✅ 设置 Server
监听端口：36677（默认）
✅ 开机自启
✅ 时间戳重命名
✅ 上传后自动复制 URL

2. 快捷键设置（可选）

text

上传剪贴板图片：Ctrl+Shift+P
上传选择图片：Ctrl+Shift+O

5.5 测试上传

✅ 成功显示：

text

https://cdn.jsdelivr.net/gh/yourusername/blog-images@main/blog/images/xxx.png

5.6 解决访问问题（如遇到）

问题：上传失败或 SSL 证书错误

解决方案：

Bash

# Windows
# Win+R → %APPDATA%\\picgo
# 打开 config.json

# 添加：
{
"picBed": {
…
},
"proxy": "",
"httpsAgent": {
"rejectUnauthorized": false
}
}

六、Typora 写作环境

6.1 配置 Typora 图片上传

text

┌─────────────────────────────────────────────┐
│ 图像 │
│ │
│ 插入图片时… │
│ ┌──────────────────────┐ │
│ │ 上传图片 ▼ │ │
│ └──────────────────────┘ │
│ │
│ ☑ 对本地位置的图片应用上述规则 │
│ ☑ 对网络位置的图片应用上述规则 │
│ ☑ 优先使用相对路径 │
│ │
│ 上传服务设定 │
│ ┌──────────────────────┐ │
│ │ PicGo(app) ▼ │ │
│ └──────────────────────┘ │
│ │
│ PicGo 路径： │
│ D:\\PicGo\\PicGo.exe │
│ │
│ ☑ 上传前先复制到本地 │
│ 本地路径：./${filename}.assets │
│ │
│ [验证图片上传选项] │
└─────────────────────────────────────────────┘

6.2 验证配置

✅ 成功显示：

text

Upload Success:
https://cdn.jsdelivr.net/gh/xxx/blog-images@main/xxx.png

6.3 测试写作流程

新建文章

Bash

# 在博客目录
hexo new "测试图片上传"

使用 Typora 编辑

✅ 成功：

Markdown


同时本地保存：

text

测试图片上传.assets/xxx.png

6.4 Typora 其他配置

偏好设置 → 通用

text

☑ 自动保存
☑ 退出时记住上次打开的文件

偏好设置 → 外观

text

主题：选择喜欢的主题
字体：Microsoft YaHei
字号：16px

偏好设置 → Markdown

text

☑ 内联公式
☑ 下标
☑ 上标
☑ 高亮
☑ 图表

七、博客主题美化

7.1 推荐主题

7.2 安装 NexT 主题（示例）

方法 1：Git 安装（推荐）

Bash

# 进入博客目录
cd D:\\Blog\\my-blog

# 克隆主题到 themes 目录
git clone https://github.com/next-theme/hexo-theme-next themes/next

方法 2：下载安装

7.3 启用主题

编辑博客根目录 _config.yml：

YAML

# 找到 theme 配置
# 修改为：
theme: next

清除缓存并预览：

Bash

hexo clean
hexo g
hexo s

访问 http://localhost:4000 查看新主题！

7.4 配置主题

编辑 themes/next/_config.yml：

选择主题方案

YAML

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini # 取消注释启用

侧边栏设置

YAML

sidebar:
position: left # 位置：left/right
display: post # 显示时机：post/always/hide/remove
width: 300 # 宽度

社交链接

YAML

social:
GitHub: https://github.com/yourusername || fab fa-github
E-Mail: mailto:your@email.com || fa fa-envelope
微博: https://weibo.com/xxx || fab fa-weibo
知乎: https://www.zhihu.com/people/xxx || fab fa-zhihu

头像设置

YAML

avatar:
url: /images/avatar.png # 头像图片
rounded: true # 圆形
rotated: false # 鼠标悬停旋转

添加头像图片：将头像图片放到 source/images/avatar.png

菜单设置

YAML

menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive

创建对应页面：

Bash

# 创建关于页面
hexo new page about

# 创建标签页面
hexo new page tags

# 创建分类页面
hexo new page categories

编辑 source/tags/index.md：

YAML

—
title: 标签
type: tags
comments: false
—

编辑 source/categories/index.md：

YAML

—
title: 分类
type: categories
comments: false
—

代码高亮

YAML

codeblock:
theme:
light: default
dark: stackoverflow-dark
copy_button:
enable: true
show_result: true

阅读进度

YAML

reading_progress:
enable: true
position: top # top/bottom
color: "#37c6c0"
height: 3px

返回顶部

YAML

back2top:
enable: true
sidebar: false
scrollpercent: true

7.5 添加评论功能

使用 Gitalk（基于 GitHub Issues）

1. 创建 GitHub OAuth App

2. 配置主题

编辑 themes/next/_config.yml：

YAML

gitalk:
enable: true
github_id: yourusername
repo: yourusername.github.io
client_id: 你的ClientID
client_secret: 你的ClientSecret
admin_user: yourusername
distraction_free_mode: true
language: zh-CN

7.6 添加搜索功能

Bash

# 安装插件
npm install hexo-generator-searchdb –save

编辑博客 _config.yml：

YAML

# 添加到文件末尾
search:
path: search.xml
field: post
content: true
format: html

编辑 themes/next/_config.yml：

YAML

local_search:
enable: true

7.7 添加统计功能

字数统计

Bash

npm install hexo-word-counter –save

编辑 themes/next/_config.yml：

YAML

symbols_count_time:
separated_meta: true
item_text_total: true

访问统计（不蒜子）

YAML

busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye

八、日常写作发布流程

8.1 完整工作流程

text

┌────────────────────────────────────────────┐
│ │
│ 1. 创建文章 │
│ hexo new "文章标题" │
│ ↓ │
│ 2. Typora 编辑 │
│ – 写作内容 │
│ – 粘贴图片（自动上传） │
│ ↓ │
│ 3. 本地预览 │
│ hexo clean && hexo g && hexo s │
│ 访问 http://localhost:4000 │
│ ↓ │
│ 4. 发布到 GitHub │
│ hexo deploy │
│ ↓ │
│ 5. 访问博客 │
│ https://yourusername.github.io │
│ │
└────────────────────────────────────────────┘

8.2 详细步骤

Step 1：新建文章

Bash

# 进入博客目录
cd D:\\Blog\\my-blog

# 创建新文章
hexo new "Vue 3 学习笔记"

# 或指定布局
hexo new post "Vue 3 学习笔记"
hexo new page "关于我"
hexo new draft "草稿文章"

生成文件：source/_posts/Vue-3-学习笔记.md

Step 2：编辑文章

用 Typora 或其他编辑器打开文章：

Markdown

—
title: Vue 3 学习笔记
date: 2024-01-15 14:30:00
tags:
– Vue
– 前端
categories:
– 技术
– 前端开发
description: Vue 3 核心特性学习总结
cover: https://xxx.com/cover.jpg
—

# Vue 3 新特性

这是文章摘要，会显示在首页…

<!– more –>

## Composition API

详细内容…

### 响应式原理

 ← 直接粘贴，自动上传

## 代码示例

\\```javascript
import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Vue 3' })
\\```

## 总结

Front-matter 完整参数：

YAML

—
title: 文章标题 # 必填
date: 2024-01-15 14:30:00 # 创建日期
updated: 2024-01-16 10:00:00 # 更新日期
tags: # 标签（数组）
– 标签1
– 标签2
categories: # 分类（层级）
– 一级分类
– 二级分类
description: 文章描述 # SEO 描述
keywords: 关键词1, 关键词2 # SEO 关键词
top: true # 置顶
cover: 封面图片链接 # 封面图
comments: true # 开启评论
permalink: custom-url # 自定义链接
—

Step 3：插入图片

方法 1：截图粘贴（最常用）

生成：

Markdown


方法 2：拖拽本地图片

方法 3：手动插入

Markdown


Step 4：本地预览

Bash

# 清除缓存
hexo clean

# 生成静态文件
hexo generate

# 启动本地服务
hexo server

# 简写三连
hexo clean && hexo g && hexo s

访问预览：http://localhost:4000

检查：

• 文章是否显示
• 图片是否加载
• 样式是否正常
• 标签分类是否正确

停止服务：Ctrl + C

Step 5：部署到 GitHub

Bash

# 清除 + 生成 + 部署
hexo clean && hexo g && hexo d

# 或分步执行
hexo clean
hexo generate
hexo deploy

部署成功提示：

text

INFO Deploy done: git

等待 1-2 分钟后访问：https://yourusername.github.io

8.3 常用命令速查

Bash

# 新建
hexo new "title" # 新建文章
hexo new page "about" # 新建页面
hexo new draft "draft" # 新建草稿

# 生成
hexo generate # 生成静态文件
hexo g # 简写

# 服务器
hexo server # 启动服务器
hexo s # 简写
hexo s -p 5000 # 指定端口
hexo s –draft # 显示草稿

# 部署
hexo deploy # 部署
hexo d # 简写

# 清理
hexo clean # 清除缓存

# 组合命令
hexo clean && hexo g && hexo d # 一键部署
hexo clean && hexo g && hexo s # 清除并预览

8.4 草稿管理

创建草稿

Bash

hexo new draft "未完成的文章"

# 草稿位置：source/_drafts/未完成的文章.md

预览草稿

Bash

hexo server –draft

发布草稿

Bash

hexo publish draft "未完成的文章"

# 将文章从 _drafts 移到 _posts

8.5 文件管理建议

text

my-blog/
├── source/
│ ├── _posts/ # 已发布文章
│ │ ├── 2024-01-Vue学习笔记.md
│ │ ├── 2024-01-Vue学习笔记.assets/ # 图片备份
│ │ ├── 2024-02-React入门.md
│ │ └── 2024-02-React入门.assets/
│ ├── _drafts/ # 草稿
│ │ └── 待完成.md
│ ├── about/ # 关于页面
│ ├── tags/ # 标签页面
│ ├── categories/ # 分类页面
│ └── images/ # 全局图片
│ └── avatar.png # 头像
└── themes/
└── next/

九、常见问题解决

9.1 部署问题

❌ 问题：hexo d 报错 Permission denied

原因：SSH 密钥配置问题

解决：

Bash

# 1. 检查 SSH 连接
ssh -T git@github.com

# 2. 如果失败，重新配置 SSH（参考 4.2 节）

❌ 问题：GitHub Pages 404

原因：仓库名不对或未启用 Pages

解决：

❌ 问题：博客样式丢失

原因：_config.yml 中 url 配置错误

解决：

编辑 _config.yml：

YAML

# URL
url: https://yourusername.github.io
root: /

如果使用自定义域名：

YAML

url: https://www.yourdomain.com
root: /

重新部署：

Bash

hexo clean && hexo g && hexo d

9.2 图片问题

❌ 问题：图片上传失败 404

解决：参考第五章第 5.6 节解决网络问题

❌ 问题：jsDelivr CDN 国内无法访问

原因：jsDelivr 在国内可能受限

解决方案：

方法 1：使用备用 CDN

PicGo 自定义域名改为：

text

https://fastly.jsdelivr.net/gh/yourusername/reponame@main

或使用 GitHub 原始链接：

text

https://raw.githubusercontent.com/yourusername/reponame/main

方法 2：换用国内图床

• 七牛云
• 阿里云 OSS
• 腾讯云 COS
• 又拍云

方法 3：自建图床

使用 Vercel + GitHub 搭建图床服务

❌ 问题：本地图片显示但部署后 404

原因：图片路径大小写不一致

解决：

• Windows 不区分大小写，Linux 区分
• 确保图片文件名统一小写
• Markdown 引用路径与实际文件名一致

9.3 主题问题

❌ 问题：主题更新后配置丢失

解决：使用主题配置文件覆盖

创建 _config.next.yml（博客根目录）：

YAML

# 复制 themes/next/_config.yml 的内容到这里
# 此文件优先级更高，主题更新不会覆盖

scheme: Gemini
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
…

❌ 问题：第三方插件不生效

检查：

Bash

# 1. 插件是否安装
npm list –depth 0

# 2. _config.yml 配置是否正确

# 3. 清除缓存重试
hexo clean && hexo g && hexo s

9.4 性能优化

问题：博客加载慢

解决方案：

1. 图片压缩

Bash

# 安装压缩插件
npm install hexo-image-minifier –save

_config.yml：

YAML

image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false

2. 启用 CDN

themes/next/_config.yml：

YAML

vendors:
jquery: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
font_awesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css

3. 代码压缩

Bash

npm install hexo-all-minifier –save

_config.yml：

YAML

all_minifier: true

十、进阶优化

10.1 SEO 优化

安装 SEO 插件

Bash

# 生成 sitemap
npm install hexo-generator-sitemap –save
npm install hexo-generator-baidu-sitemap –save

# 自动 nofollow
npm install hexo-autonofollow –save

配置 sitemap

_config.yml：

YAML

# Sitemap
sitemap:
path: sitemap.xml

baidusitemap:
path: baidusitemap.xml

# nofollow
nofollow:
enable: true
exclude:
– exclude1.com
– exclude2.com

提交搜索引擎

Google Search Console

百度站长平台

10.2 自动化部署

使用 GitHub Actions

创建 .github/workflows/deploy.yml：

YAML

name: Deploy Hexo

on:
push:
branches:
– source # 源码分支

jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
– name: Checkout
uses: actions/checkout@v3

– name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'

– name: Install Dependencies
run: npm install

– name: Build
run: npm run build

– name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
publish_branch: main

使用方式：

Bash

# 创建 source 分支存放源码
git checkout -b source
git add .
git commit -m "source"
git push origin source

# 推送到 source 分支后自动部署到 main 分支

10.3 多设备同步

方案：使用 Git 管理源码

Bash

# 1. 初始化 Git（如果还没有）
git init

# 2. 添加 .gitignore
cat > .gitignore << EOF
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
EOF

# 3. 提交到 source 分支
git checkout -b source
git add .
git commit -m "blog source"
git push origin source

# 4. 在新设备克隆
git clone -b source https://github.com/yourusername/yourusername.github.io.git
cd yourusername.github.io
npm install

日常使用：

Bash

# 设备 A 写作后
git add .
git commit -m "new post"
git push

# 设备 B 同步
git pull
npm install # 如果有新依赖

10.4 备份方案

自动备份脚本

Linux/Mac (backup.sh)：

Bash

#!/bin/bash

# 备份目录
BACKUP_DIR="$HOME/BlogBackup"
DATE=$(date +%Y%m%d)

# 创建备份
echo "开始备份…"
mkdir -p $BACKUP_DIR
tar -czf $BACKUP_DIR/blog-$DATE.tar.gz \\
–exclude='node_modules' \\
–exclude='public' \\
–exclude='.deploy_git' \\
.

echo "备份完成: blog-$DATE.tar.gz"

# 保留最近 7 天的备份
find $BACKUP_DIR -name "blog-*.tar.gz" -mtime +7 -delete

Windows (backup.bat)：

batch

@echo off
set BACKUP_DIR=D:\\BlogBackup
set DATE=%date:~0,4%%date:~5,2%%date:~8,2%

echo 开始备份…
if not exist %BACKUP_DIR% mkdir %BACKUP_DIR%

7z a -tzip %BACKUP_DIR%\\blog-%DATE%.zip ^
-xr!node_modules ^
-xr!public ^
-xr!.deploy_git ^
*

echo 备份完成

10.5 评论系统升级

使用 Waline（推荐）

特点：

• 无需登录即可评论
• 支持邮件通知
• Markdown 支持
• 免费部署

部署步骤：

配置主题：

themes/next/_config.yml：

YAML

waline:
enable: true
serverURL: https://yourdomain.vercel.app
placeholder: 欢迎留言…
avatar: mp
meta: [nick, mail, link]
pageSize: 10
lang: zh-CN
visitor: true
comment_count: true

🎯 总结：完整工作流程

初次搭建

Bash

# 1. 安装环境
# 安装 Node.js, Git, Typora, PicGo

# 2. 初始化博客
hexo init my-blog
cd my-blog
npm install

# 3. 配置 GitHub 仓库
# 创建 yourusername.github.io 仓库
# 配置 SSH 密钥

# 4. 配置 Hexo
# 编辑 _config.yml

# 5. 安装主题
git clone 主题仓库 themes/主题名

# 6. 配置图床
# 创建 blog-images 仓库
# 配置 PicGo
# 配置 Typora

# 7. 首次部署
hexo clean && hexo g && hexo d

日常写作

Bash

# 1. 创建文章
hexo new "文章标题"

# 2. 编辑文章
# 用 Typora 打开 source/_posts/文章.md
# 写作 + 粘贴图片（自动上传）

# 3. 本地预览
hexo clean && hexo g && hexo s
# 访问 http://localhost:4000

# 4. 发布
hexo deploy
# 访问 https://yourusername.github.io

快速命令备忘

Bash

# 新建
hexo new "title"

# 预览
hexo clean && hexo g && hexo s

# 部署
hexo clean && hexo g && hexo d

# 一键操作（创建别名）
alias hd="hexo clean && hexo g && hexo d"
alias hs="hexo clean && hexo g && hexo s"

📚 参考资源

• Hexo 官方文档：https://hexo.io/zh-cn/docs/
• NexT 主题文档：https://theme-next.js.org/
• PicGo 文档：https://picgo.github.io/PicGo-Doc/
• GitHub Pages 文档：https://docs.github.com/cn/pages
• Markdown 语法：https://www.markdown.xyz/

🎉 恭喜！

你已经完成了个人博客的搭建！

下一步

记住：内容才是王道，坚持写作！💪