hexo博客搭建

Hexo博客搭建完整指南

本文详细介绍了如何使用Hexo框架搭建个人博客，并将其部署到GitHub Pages和Cloudflare Pages上。

目录

1. 事前准备

  1. 域名（非必须，可使用免费域名或GitHub.io/Pages.dev分配的域名）
  2. GitHub（必须，需要注册GitHub帐号）
  3. Cloudflare（非必须，用于CDN加速）

2. 软件支持

2.1 必需软件

  • Node.js（必须）
  • Git（必须）
  • VSCode（推荐，非必须）

2.2 安装Node.js

  1. 访问Node.js官网下载对应系统版本

  2. 安装到默认目录C:/Program Files/nodejs/

  3. 验证安装：

    1
    node -v

    Node.js安装验证

  4. 配置npm源：

    1
    npm config set registry https://mirrors.huaweicloud.com/repository/npm/

2.3 安装Git

  1. 从Git官网下载安装程序
    Git下载

  2. 安装到默认目录C:/Program Files/Git

  3. 安装后可使用：

    • Git CMD（Windows命令行风格）
    • Git Bash（Linux命令行风格，推荐）
    • Git GUI（图形界面，不推荐新手使用）

3. 配置Git密钥并连接至Github

3.1 配置用户名和邮箱

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

验证配置：

1
git config -l

Git配置验证

3.2 配置公钥连接Github

  1. 生成SSH密钥：

    1
    ssh-keygen -t rsa -C "你的邮箱"

    生成SSH密钥

  2. 配置GitHub SSH密钥：

    • 进入GitHub设置
    • 选择SSH and GPG keys
    • 添加新密钥
      GitHub SSH设置1
      GitHub SSH设置2
      GitHub SSH设置3
      GitHub SSH设置4

  3. 测试连接：

    1
    ssh -T git@github.com

    SSH连接测试1
    SSH连接测试2

3.3 创建GitHub.io仓库

  1. 创建新仓库，名称格式：<用户名>.github.io
  2. 选择Public可见性
    创建GitHub.io仓库

4. 初始化Hexo博客

  1. 创建博客目录并打开Git Bash
    打开Git Bash

  2. 安装Hexo：

    1
    npm install -g hexo-cli && hexo -v

    安装Hexo

  3. 验证安装：

    1
    hexo -v

    验证Hexo安装

  4. 初始化项目：

    1
    2
    3
    hexo init blog-demo
    cd blog-demo
    npm i

    初始化Hexo项目

  5. 项目结构说明：
    项目结构

    • node_modules: 依赖包
    • scaffolds: 文章模板
    • source: 文章存储
    • themes: 主题
    • _config.yml: 博客配置文件

  6. 启动项目：

    1
    hexo cl && hexo s

    启动Hexo

  7. 访问 http://localhost:4000 预览
    本地预览

5. 将静态博客挂载到GitHub Pages

  1. 安装部署插件：

    1
    npm install hexo-deployer-git --save

  2. 修改_config.yml：

    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:用户名/用户名.github.io.git
      branch: main

  3. 部署命令（Hexo三连）：

    1
    2
    3
    4
    5
    # Git Bash终端
    hexo clean && hexo generate && hexo deploy

    # 或 VSCode终端
    hexo cl; hexo g; hexo d

    部署过程
    部署完成

  4. 访问 https://用户名.github.io 查看结果
    GitHub Pages预览

6. 将静态博客挂载到Cloudflare Pages

  1. 选择Pages并连接Git
    Cloudflare Pages设置1
    Cloudflare Pages设置2

  2. 登录GitHub账号
    GitHub登录1
    GitHub登录2

  3. 等待部署完成
    部署进度

  4. 访问分配的域名
    Cloudflare Pages预览

  5. 绑定自定义域名（可选）
    绑定域名

7. 如何使用

创建新文章

1
hexo new "文章标题"

本地预览

1
2
3
4
5
# Git Bash终端
hexo cl && hexo s

# 或 VSCode终端
hexo cl; hexo s

部署文章

1
2
3
4
5
# Git Bash终端
hexo cl && hexo g && hexo d

# 或 VSCode终端
hexo cl; hexo g; hexo d

8. 安装主题

8.1 安装安知鱼主题

  1. 克隆主题：

    1
    git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

  2. 安装依赖：

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save

  3. 修改主题配置：

    1
    theme: anzhiyu

  4. 复制配置文件：

    1
    2
    3
    4
    # Linux
    cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

    # Windows：手动复制

9. 常见问题

VSCode终端执行报错

以管理员身份打开PowerShell执行：

1
Set-ExecutionPolicy RemoteSigned

10. 参考资料

致谢项目