博客诞生记 | RenaXu 's Wonderland

本指南是我搭建这个网站的全过程，让Manus给我生成的搭建指南，现在把指南全部保留分享给大家，指南很详细，亲测有效，总之，不要畏惧，AI时代，想法落地So Easy！相信自己！Enjoy it ～

环境准备

开始搭建个人博客之前，需要在Windows系统上安装必要的软件环境。本指南将详细介绍每个步骤，确保您能够顺利完成博客的搭建。

系统要求

Windows 10 或更高版本
至少 4GB RAM
2GB 可用磁盘空间
稳定的网络连接

所需软件

Node.js - JavaScript运行环境
Git - 版本控制工具
代码编辑器 - 推荐 VS Code 或 Notepad++

Node.js安装

Node.js 是运行 Hexo 的基础环境，我们需要先安装它。

步骤1：下载Node.js

访问 Node.js 官方网站：https://nodejs.org/
点击 “LTS” 版本下载（推荐使用长期支持版本）
选择 Windows Installer (.msi) 64位版本

步骤2：安装Node.js

双击下载的 .msi 文件启动安装程序
点击 “Next” 继续
接受许可协议，点击 “Next”
选择安装路径（建议使用默认路径）
在功能选择页面，确保勾选以下选项：
- Node.js runtime
- npm package manager
- Add to PATH（重要：这将自动配置环境变量）
点击 “Next” 然后 “Install”
等待安装完成，点击 “Finish”

步骤3：验证安装

按 Win + R 打开运行对话框
输入 cmd 并按回车打开命令提示符
输入以下命令验证安装：

1 2	node --version npm --version

如果显示版本号，说明安装成功。

配置npm镜像（可选但推荐）

为了提高包下载速度，建议配置国内镜像：

1	npm config set registry https://registry.npmmirror.com

验证配置：

1	npm config get registry

Git安装

Git 是版本控制工具，用于管理代码和部署博客到 GitHub Pages。

步骤1：下载Git

访问 Git 官方网站：https://git-scm.com/
点击 “Download for Windows”
下载最新版本的 Git

步骤2：安装Git

双击下载的 .exe 文件启动安装程序
点击 “Next” 继续
选择安装路径（建议使用默认路径）
在组件选择页面，建议勾选：
- Git Bash Here（右键菜单集成）
- Git GUI Here
- Git LFS (Large File Support)
选择默认编辑器（推荐 VS Code 或 Notepad++）
选择初始分支名称：选择 “Override the default branch name for new repositories” 并输入 “main”
调整PATH环境：选择 “Git from the command line and also from 3rd-party software”
选择HTTPS传输后端：使用 “Use the OpenSSL library”
配置行尾转换：选择 “Checkout Windows-style, commit Unix-style line endings”
配置终端模拟器：选择 “Use MinTTY”
其他选项保持默认，点击 “Install”

步骤3：验证安装

打开命令提示符，输入：

1	git --version

如果显示版本号，说明安装成功。

步骤4：配置Git用户信息

1 2	git config --global user.name "你的用户名" git config --global user.email "你的邮箱@example.com"

这些信息将用于提交记录。

Hexo安装与配置

现在我们开始安装和配置 Hexo 博客框架。

步骤1：安装Hexo CLI

打开命令提示符（以管理员身份运行），输入：

1	npm install -g hexo-cli

等待安装完成。

步骤2：验证Hexo安装

1	hexo version

如果显示版本信息，说明安装成功。

创建博客项目

步骤1：选择博客目录

在您希望存放博客的位置创建一个文件夹，例如 D:\MyBlog
在该目录下打开命令提示符：
- 在文件夹空白处按住 Shift 键，右键点击
- 选择 “在此处打开命令窗口” 或 “在此处打开PowerShell窗口”

步骤2：初始化Hexo项目

1
2
3

hexo init my-blog
cd my-blog
npm install

这将创建一个名为 my-blog 的文件夹，包含完整的博客项目结构。

步骤3：项目结构说明

my-blog/
├── _config.yml          # 站点配置文件
├── package.json         # 应用程序信息
├── scaffolds/           # 模板文件夹
├── source/              # 资源文件夹
│   ├── _drafts/         # 草稿文件夹
│   └── _posts/          # 文章文件夹
├── themes/              # 主题文件夹
└── node_modules/        # 依赖包文件夹

步骤4：启动本地服务器

1	hexo server

或简写为：

hexo s

打开浏览器访问 http://localhost:4000，您应该能看到默认的博客页面。

博客配置与定制

基本配置

编辑根目录下的 _config.yml 文件，配置您的博客信息：

# 网站信息
title: 我的个人博客
subtitle: '分享技术与生活'
description: '这是一个基于Hexo搭建的个人博客，记录技术学习和生活感悟'
keywords: 技术,博客,生活,学习
author: 您的名字
language: zh-CN
timezone: 'Asia/Shanghai'

# URL配置
url: https://yourusername.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true
  trailing_html: true

创建新文章

# 创建新文章
hexo new "文章标题"

# 创建新页面
hexo new page "页面名称"

文章将在 source/_posts/ 目录下生成，使用 Markdown 格式编写。

文章格式示例

---
title: 我的第一篇博客
date: 2025-01-27 10:00:00
tags: [标签1, 标签2]
categories: [分类名称]
---

这里是文章内容，使用Markdown语法编写。

## 二级标题

### 三级标题

- 列表项1
- 列表项2

**粗体文字**

*斜体文字*

[链接文字](https://example.com)

![图片描述](图片路径)

主题安装

Hexo 有丰富的主题生态，推荐几个优秀主题：

1. NexT主题（简洁优雅）

1 2	cd themes git clone https://github.com/theme-next/hexo-theme-next next

修改 _config.yml：

1	theme: next

2. Butterfly主题（功能丰富）

1	npm install hexo-theme-butterfly

修改 _config.yml：

1	theme: butterfly

3. Fluid主题（现代化设计）

1	npm install hexo-theme-fluid

修改 _config.yml：

1	theme: fluid

常用插件

安装一些有用的插件来增强博客功能：

# 生成站点地图
npm install hexo-generator-sitemap --save

# 生成RSS订阅
npm install hexo-generator-feed --save

# 搜索功能
npm install hexo-generator-searchdb --save

# 部署插件
npm install hexo-deployer-git --save

GitHub Pages部署

GitHub Pages 是免费的静态网站托管服务，非常适合托管 Hexo 博客。

步骤1：创建GitHub账户

访问 https://github.com/
点击 “Sign up” 注册账户
验证邮箱地址

步骤2：创建仓库

登录GitHub后，点击右上角的 “+” 号
选择 “New repository”
仓库名称必须是：你的用户名.github.io
- 例如：如果用户名是 zhangsan，仓库名就是 zhangsan.github.io
设置为 Public（公开）
勾选 “Add a README file”
点击 “Create repository”

步骤3：配置SSH密钥（推荐）

为了安全地推送代码，建议配置SSH密钥：

打开Git Bash
生成SSH密钥：

1	ssh-keygen -t rsa -b 4096 -C "你的邮箱@example.com"

按回车使用默认路径，可以设置密码或直接回车
复制公钥内容：

1	cat ~/.ssh/id_rsa.pub

在GitHub上添加SSH密钥：
- 点击头像 → Settings
- 左侧菜单选择 “SSH and GPG keys”
- 点击 “New SSH key”
- 粘贴公钥内容，点击 “Add SSH key”

步骤4：配置Hexo部署

编辑博客根目录下的 _config.yml 文件，在文件末尾添加：

# 部署配置
deploy:
  type: git
  repo: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

如果没有配置SSH，也可以使用HTTPS：

deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

步骤5：安装部署插件

1	npm install hexo-deployer-git --save

步骤6：部署博客

# 清理缓存
hexo clean

# 生成静态文件
hexo generate

# 部署到GitHub
hexo deploy

或者使用简写命令：

1	hexo clean && hexo g && hexo d

步骤7：访问博客

部署成功后，访问 https://你的用户名.github.io 即可看到您的博客。

常见问题解决

问题1：npm安装速度慢

解决方案：

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

# 或者使用cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install hexo-cli -g

问题2：hexo命令不识别

可能原因：

Node.js未正确安装
环境变量未配置

解决方案：

重新安装Node.js，确保勾选”Add to PATH”
手动添加环境变量：
- 右键”此电脑” → 属性 → 高级系统设置
- 环境变量 → 系统变量 → Path
- 添加Node.js安装路径（通常是 C:\Program Files\nodejs\）

问题3：端口4000被占用

错误信息：

1	Error: listen EADDRINUSE :::4000

解决方案：

# 使用其他端口
hexo server -p 5000

# 或者找到占用进程并结束
netstat -ano | findstr :4000
taskkill /PID 进程ID /F

问题4：部署时权限错误

解决方案：

确保SSH密钥配置正确
检查仓库权限设置
使用HTTPS方式部署

问题5：中文文件名乱码

解决方案：

# 设置Git编码
git config --global core.quotepath false
git config --global gui.encoding utf-8
git config --global i18n.commit.encoding utf-8
git config --global i18n.logoutputencoding utf-8

问题6：主题安装后样式异常

解决方案：

清理缓存：hexo clean
重新生成：hexo generate
检查主题配置文件
确保主题版本与Hexo版本兼容

问题7：图片无法显示

解决方案：

将图片放在 source/images/ 目录下
在文章中使用相对路径：![描述](/images/图片名.jpg)
或者安装图片处理插件：
1
npm install hexo-asset-image --save

问题8：GitHub Pages访问慢

解决方案：

使用CDN加速
考虑使用国内的Gitee Pages
优化图片大小和数量

进阶配置

自定义域名

如果您有自己的域名，可以配置自定义域名：

在 source/ 目录下创建 CNAME 文件
在文件中写入您的域名（不带http://）：
1
www.yourdomain.com
在域名提供商处配置DNS记录：
- 添加CNAME记录，指向 你的用户名.github.io

博客备份

为了防止数据丢失，建议定期备份：

创建备份仓库
将整个博客项目推送到备份仓库：

git init
git add .
git commit -m "博客备份"
git remote add origin https://github.com/你的用户名/blog-backup.git
git push -u origin main

评论系统

添加评论功能：

使用Gitalk

安装：
1
npm install gitalk --save
在GitHub创建OAuth App：
- Settings → Developer settings → OAuth Apps
- 记录Client ID和Client Secret
在主题配置中启用Gitalk

使用Valine

注册LeanCloud账户
创建应用，获取App ID和App Key
在主题配置中启用Valine

SEO优化

提高搜索引擎排名：

安装SEO插件：

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

配置 _config.yml：

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

提交站点地图到搜索引擎

统计分析

添加访问统计：

Google Analytics
- 注册Google Analytics账户
- 获取跟踪ID
- 在主题配置中添加
百度统计
- 注册百度统计账户
- 获取统计代码
- 在主题配置中添加

性能优化

提升博客加载速度：

图片优化
1
npm install hexo-imagemin --save
代码压缩
1
npm install hexo-all-minifier --save
CDN加速
- 使用jsDelivr加速静态资源
- 配置图片CDN

自动化工作流

使用GitHub Actions自动部署：

在博客仓库创建 .github/workflows/deploy.yml：

name: Deploy Hexo

on:
  push:
    branches: [ source ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: npm install
      
    - name: Generate static files
      run: npm run build
      
    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

总结

恭喜您！通过本指南，您已经学会了：

✅ 在Windows系统上安装必要的开发环境
✅ 使用Hexo创建个人博客
✅ 配置和定制博客外观
✅ 部署博客到GitHub Pages
✅ 解决常见问题
✅ 进行进阶配置和优化

有用的资源

Hexo官方文档：https://hexo.io/zh-cn/docs/
主题市场：https://hexo.io/themes/
插件市场：https://hexo.io/plugins/
Hexo社区：https://github.com/hexojs/hexo

本指南最后更新于：2025年7月29日