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

别催小唐敲代码2026-03-15 9:23

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

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

一、前期准备

1.1 工具清单

工具 用途 下载地址
Node.js Hexo 运行环境 https://nodejs.org/
Git 版本控制和部署 https://git-scm.com/
Typora Markdown 编辑器 https://typoraio.cn/
PicGo 图床上传工具 https://github.com/Molunerfinn/PicGo/releases
GitHub 账号 托管博客和图片 https://github.com/

1.2 技术栈说明

复制代码

text

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

二、安装配置环境

2.1 安装 Node.js

Windows 系统
  1. 访问 https://nodejs.org/
  2. 下载 LTS 版本（长期支持版）
  3. 双击安装包，一路 Next
  4. 安装完成后验证：
复制代码

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 系统
  1. 访问 https://git-scm.com/
  2. 下载 Windows 版本
  3. 安装时全部默认选项
  4. 验证：
复制代码

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

  1. 访问 https://typoraio.cn/
  2. 下载对应系统版本
  3. 安装（一路下一步）
  4. 启动 Typora

注意：

2.5 安装 PicGo

  1. 访问 https://github.com/Molunerfinn/PicGo/releases
  2. 下载最新版：PicGo-Setup-x.x.x.exe
  3. 安装到非中文路径（如 D:\PicGo）
  4. 启动 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：新建仓库
  1. 登录 GitHub
  2. 点击右上角 + → New repository
  3. 填写信息：
复制代码

text

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

⚠️ 重要 ：仓库名必须是 用户名.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
  1. GitHub → 右上角头像 → Settings
  2. 左侧菜单 → SSH and GPG keys
  3. New SSH key
  4. 填写：
    • Title: My Computer
    • Key: 粘贴刚才复制的公钥
  5. Add SSH key
验证连接
复制代码

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 配置自定义域名（可选）

购买域名

推荐域名商：

配置 DNS 解析
  1. 进入域名管理控制台
  2. 添加 DNS 记录：
复制代码

text

复制代码 
类型：CNAME
主机记录：www
记录值：yourusername.github.io

类型：A
主机记录：@
记录值：185.199.108.153
（GitHub Pages IP 地址）
在 GitHub 配置域名
  1. 进入仓库 Settings
  2. Pages → Custom domain
  3. 输入你的域名：www.yourdomain.com
  4. Save
  5. ✅ Enforce HTTPS（勾选）
在 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 图床仓库

  1. GitHub → New repository
  2. 填写：
    • Repository name: blog-images
    • ✅ Public
    • ✅ Add a README file
  3. Create repository

5.2 生成 GitHub Token

  1. GitHub → Settings
  2. Developer settings → Personal access tokens
  3. Tokens (classic) → Generate new token (classic)
  4. 填写：
    • Note: PicGo
    • Expiration: No expiration
    • ✅ repo（全选）
  5. Generate token
  6. 复制 Token（ghp_xxx...）

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

5.3 配置 PicGo

打开 PicGo 配置
  1. 启动 PicGo
  2. 图床设置 → GitHub 图床
  3. 填写配置：
复制代码

text

复制代码 
┌─────────────────────────────────────────────┐
│ 设定仓库名：                                 │
│ yourusername/blog-images                    │
├─────────────────────────────────────────────┤
│ 设定分支名：                                 │
│ main                                        │
├─────────────────────────────────────────────┤
│ 设定 Token：                                 │
│ ghp_你的Token                               │
├─────────────────────────────────────────────┤
│ 指定存储路径：                               │
│ blog/images/                                │
│ （或按年月分类：blog/{year}/{month}/）       │
├─────────────────────────────────────────────┤
│ 设定自定义域名：                             │
│ https://cdn.jsdelivr.net/gh/yourusername/blog-images@main │
└─────────────────────────────────────────────┘
  1. 点击「确定」
  2. 点击「设为默认图床」

自定义域名说明：

  • 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 测试上传

  1. PicGo → 上传区
  2. 拖入一张图片
  3. 查看上传结果

✅ 成功显示：

复制代码

text

复制代码 
https://cdn.jsdelivr.net/gh/yourusername/blog-images@main/blog/images/xxx.png
  1. 复制链接在浏览器打开，能看到图片即可

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

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

解决方案：

  1. 检查网络环境（GitHub 在国内访问可能受限）
  2. 编辑 PicGo 配置文件：
复制代码

Bash

复制代码 
# Windows
# Win+R → %APPDATA%\picgo
# 打开 config.json

# 添加：
{
  "picBed": {
    ...
  },
  "proxy": "",
  "httpsAgent": {
    "rejectUnauthorized": false
  }
}
  1. 保存并重启 PicGo

六、Typora 写作环境

6.1 配置 Typora 图片上传

  1. Typora → 文件 → 偏好设置（Ctrl+,）
  2. 左侧菜单 → 图像
  3. 配置如下：
复制代码

text

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

6.2 验证配置

  1. 点击「验证图片上传选项」
  2. 等待测试...

✅ 成功显示：

复制代码

text

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

6.3 测试写作流程

新建文章
复制代码

Bash

复制代码 
# 在博客目录
hexo new "测试图片上传"
使用 Typora 编辑

  1. 用 Typora 打开：D:\Blog\my-blog\source\_posts\测试图片上传.md

  2. 截图（Win+Shift+S）

  3. 在 Typora 中粘贴（Ctrl+V）

  4. 观察图片是否自动上传

✅ 成功：

复制代码

Markdown

复制代码 
![](https://cdn.jsdelivr.net/gh/xxx/blog-images@main/xxx.png)

同时本地保存：

复制代码

text

复制代码 
测试图片上传.assets/xxx.png

6.4 Typora 其他配置

偏好设置 → 通用
复制代码

text

复制代码 
☑ 自动保存
☑ 退出时记住上次打开的文件
偏好设置 → 外观
复制代码

text

复制代码 
主题：选择喜欢的主题
字体：Microsoft YaHei
字号：16px
偏好设置 → Markdown
复制代码

text

复制代码 
☑ 内联公式
☑ 下标
☑ 上标
☑ 高亮
☑ 图表

七、博客主题美化

7.1 推荐主题

主题 特点 地址
NexT 最流行，简洁优雅 https://github.com/next-theme/hexo-theme-next
Fluid 现代化，Material Design https://github.com/fluid-dev/hexo-theme-fluid
Butterfly 功能丰富，动画炫酷 https://github.com/jerryc127/hexo-theme-butterfly
Matery Material 风格 https://github.com/blinkfox/hexo-theme-matery
Icarus 响应式，专业 https://github.com/ppoffice/hexo-theme-icarus

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：下载安装
  1. 访问 https://github.com/next-theme/hexo-theme-next
  2. Code → Download ZIP
  3. 解压到 themes/next 目录

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

  1. GitHub → Settings → Developer settings
  2. OAuth Apps → New OAuth App
  3. 填写：
    • Application name: Blog Comments
    • Homepage URL: https://yourusername.github.io
    • Authorization callback URL: https://yourusername.github.io
  4. Register application
  5. 记录 Client ID 和 Client Secret

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：截图粘贴（最常用）

  1. 截图（Win+Shift+S）
  2. Typora 中 Ctrl+V
  3. 自动上传到图床
  4. 本地保存备份到 .assets 文件夹

生成：

复制代码

Markdown

复制代码 
![](https://cdn.jsdelivr.net/gh/xxx/blog-images@main/xxx.png)

方法 2：拖拽本地图片

  1. 从文件夹拖图片到 Typora
  2. 自动上传

方法 3：手动插入

复制代码

Markdown

复制代码 
![图片描述](https://xxx.com/image.png)
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

解决：

  1. 确认仓库名是：yourusername.github.io
  2. 进入仓库 Settings → Pages
  3. Source 选择：Deploy from a branch
  4. Branch 选择：main / (root)
  5. Save

❌ 问题：博客样式丢失

原因 ：_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

  1. 访问 https://search.google.com/search-console
  2. 添加资源：https://yourusername.github.io
  3. 验证所有权（HTML 文件验证）
  4. 提交 sitemap：https://yourusername.github.io/sitemap.xml

百度站长平台

  1. 访问 https://ziyuan.baidu.com/
  2. 用户中心 → 站点管理 → 添加网站
  3. 验证站点
  4. 链接提交 → sitemap：https://yourusername.github.io/baidusitemap.xml

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 支持
  • 免费部署

部署步骤：

  1. 访问 https://waline.js.org/
  2. 点击「快速开始」
  3. Deploy to Vercel
  4. 连接 GitHub 仓库
  5. 获取部署后的域名

配置主题：

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"

📚 参考资源

🎉 恭喜！

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

下一步

  1. 优化内容：专注于高质量文章创作
  2. 美化主题：调整配色、布局等细节
  3. SEO 优化：提升搜索引擎收录
  4. 社交分享：分享博客到社交平台
  5. 持续更新：保持定期更新频率

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

相关推荐
妄汐霜2 小时前
小白学习笔记（ES6）
笔记·学习
zhaoyin19942 小时前
Vue面试题笔记
javascript·vue.js·笔记
猹叉叉（学习版）2 小时前
【ASP.NET CORE】 10. 数据校验
笔记·后端·c#·asp.net·.netcore
zzh0812 小时前
LNMP环境部署笔记
笔记
智者知已应修善业2 小时前
【不用第三变量交换2个数】2024-10-18
c语言·数据结构·c++·经验分享·笔记·算法
升职佳兴2 小时前
Excel 学习笔记整理：常用操作、数据清洗与公式应用实战
笔记·学习·excel
悠哉悠哉愿意2 小时前
【单片机学习笔记】math库函数补充
c语言·笔记·单片机·学习
future02102 小时前
Kafka再平衡：从救火到优雅控场
学习·kafka
tritone2 小时前
最近在学习网络配置中的Port Forwarding（端口转发）技术，为了有个稳定的实验环境，我试用了阿贝云的免费虚拟主机和免费云服务器
服务器·网络·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04本地部署 OpenClaw + DeepSeek-R1 完全指南05OpenClaw macOS 完整安装与本地模型配置教程（实战版）06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07得物前端部门，没了08UV安装并设置国内源09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）10Openclow安装保姆级教程