使用Hexo搭建博客

# 环境准备

# Nodejs安装

• 安装 Node 和 hexo , 我是在 Windows 采用 Scoop 进行环境管理。具体可以在博客中搜索了解

  scoop install nvm
  nvm install --lts; nvm use --lts
  npm install -g yarn 
  yarn global add hexo-cli

# 新建Github仓库

• Github 新建一个私有的仓库 blog_hexo

  

# 配置 SSH

• 查看 Github 中 repo 的地址

  

• 复制公钥内容 ~/.ssh/id_ed25519.pub, GitHub 设置 → SSH and GPG keys → New SSH Key → 粘贴并保存。

  # 生成并配置 SSH 密钥 （默认路径 ~/.ssh/id_ed25519 或 ~/.ssh/id_rsa）
  ssh-keygen -t ed25519 -C "[email protected]"  # 推荐 Ed25519
  # 或
  ssh-keygen -t rsa -b 4096 -C "[email protected]"  # 兼容性更好
  
  ssh -T [email protected]  # 测试连接
  Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.
  

• 使用 Git 工具 clone 项目到本地, SSH 方式需要在 Github 中配置 SSH 公钥, 具体百度 ssh-keygen

  git clone [email protected]:fulsun/blog_hexo.git  blog-hexo
  # 使用 vscode 打开目录
  code  blog-hexo

# 初始化Hexo项目

• 进入项目后，打开终端 ，初始化 hexo , 使用 Yarn 安装依赖

  # 而 hexo init 要求目标目录必须为空
  mkdir ./hexo-temp ; cd ../hexo-temp
  hexo init
  # 复制 Hexo 初始化内容 配置
  Copy-Item * ..\blog-hexo\ -Recurse
  cd ..\blog-hexo
  del hexo-temp
  yarn install

• 使用 hexo s 预览, 访问 http://localhost: 4000/ 看到如下页面表示正常。

  PS C:\Users\fulsun\Desktop\blog-hexo> hexo s
  INFO  Validating config
  INFO  Start processing
  INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

  

# Hexo主题设置

• 可以根据自己的喜好 选择喜欢的主题 https://hexo.io/themes/

• 这里推荐一下我比较喜欢的主题

  • https://github.com/volantis-x/hexo-theme-volantis
  • https://github.com/jerryc127/hexo-theme-butterfly
  • https://github.com/xaoxuu/hexo-theme-stellar

• 更换主题

  # 删除默认主题
  yarn remove hexo-theme-landscape
  del _config.landscape.yml
  yarn add hexo-theme-stellar

• 编辑 _config.yml:

  # theme: landscape 修改
  theme: stellar

• 加载主题配置文件

  cp .\node_modules\hexo-theme-stellar\_config.yml ./_config.stellar.yml 
  
  ## 可以根据主题文档进行配置

• 预览新主题 http://localhost: 4000/ , 眼前一亮的感觉

  yarn install 
  hexo s

  

• 提交代码到 Github

  git add .
  git commit -m "first commit"
  # 推送到 Github
  git push origin main
  
  To github.com:fulsun/blog_hexo.git
     f672d4d..928fa22  main -> main

# Github Page 部署

# 配置 GitHub 仓库

• 访问 GitHub 新建仓库，命名格式：

  • <username>.github.io（个人主页，如 yourname.github.io）

  • 或任意名称（项目站点，如 my-blog，访问地址为 yourname.github.io/my-blog）

  

# 手动部署

• 安装 Git 部署插件

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

• 配置 GitHub 仓库

  deploy:
    type: git
    repo: [email protected]:fulsun/-my-blog.git  # 替换为你的仓库地址
    branch: main  # 或 gh-pages（如果使用项目站点）
    message: "Deploy Hexo: <!--swig0-->"  # 可选：自定义提交信息

• 生成静态文件并部署

  hexo clean && hexo generate  # 或简写 hexo g
  hexo deploy  # 或简写 hexo d

# 启用 Github page 服务

1. 进入仓库设置： 访问你的仓库 → 点击 Settings → 左侧菜单选择 Pages。

2. 配置发布源

   • Branch：选择包含静态文件的分支（如 main、gh-pages 或 docs 文件夹所在分支）。
   • Folder：选择根目录 / 或特定文件夹（如 /public、/docs）。

3. 保存并生效

   • 点击 Save，稍等 1-2 分钟，页面顶部会显示绿色提示框：
     Your site is published at https://<username>.github.io/<repo>/

   

4. 访问发现样式丢失，这里是因为我不是采用 fulsun.github.io 命名，导致路径不匹配，可以通过调整配置

   #  Hexo 主目录的 _config.yml
   # 将默认的根路径改为子路径
   url: https://fulsun.github.io/my-blog  # 注意：末尾不要加斜杠！
   root: /my-blog/  # 注意：开头和结尾都要有斜杠！

   

5. 指定域名方式调整

   

6. 添加 CNAME 记录

   DNS → 添加记录 → 类型 CNAME，名称 @，目标 fulsun.github.io(GitHub 强制要求），代理状态（橙色云图标）✅

   

7. 再次访问 https://fulsun.dpdns.org/ , 发现正常了

   

# GitHub Actions 自动部署

手动部署 Hexo 博客到 GitHub 虽然简单直接，但是强依赖本地环境，通过自动部署则能狗一键触发，减少操作，提高效率。这里基于 GitHub Actions 自动部署

• 在项目中创建 .github/workflows/deploy.yml

  name: Deploy to Public Repo
  
  on:
    push:
      branches: [ "main" ]
  
  env:
    PUBLIC_REPO: "my-blog"       # 公开仓库名称
    TARGET_BRANCH: "gh-pages"    # 目标分支
  
  jobs:
    deploy:
      runs-on: ubuntu-latest
      steps:
        # 步骤1：检出私有仓库代码
        - name: Checkout Private Repo
          uses: actions/checkout@v4
  
        # 步骤2：安装 Hexo 和生成静态文件
        - name: Setup Node.js
          uses: actions/setup-node@v4
          with:
            node-version: "20.x"
  
        - name: Install and Build
          run: |
            npm install -g hexo-cli
            npm install
            hexo clean && hexo generate
  
        # 步骤3：推送到公开仓库
        - name: Push to Public Repo
          env:
            GH_TOKEN: $<!--swig1-->  # 使用 Token 认证
          run: |
            cd ./public
            git init
            git add .
            git config user.name "GitHub Actions"
            git config user.email "[email protected]"
            git commit -m "Deploy: $<!--swig2-->"
            git push --force \
              "https://$<!--swig3-->:$<!--swig4-->@github.com/$<!--swig5-->/$<!--swig6-->.git" \
              HEAD:$<!--swig7-->

# 密钥配置

1. 在公开仓库 my-blog 中生成 Token

   • 进入 GitHub → Settings → Developer Settings → Personal Access Tokens (PAT)

     

   • 指定仓库

     

   • 权限设置

     权限分类	具体权限	理由
     Repository permissions → Contents	Read and write	允许推送静态文件到 my-blog 仓库的 gh-pages 分支
     Repository permissions → Metadata	Read-only	获取仓库基本信息（必选，但对安全无影响）

     

   • 点击生成

     

   • 复制生成的 Token（稍后使用）

2. 在私有仓库 blog-hexo 中添加 Secret

   • 进入 blog-hexo → Settings → Secrets → New repository secret

   • 添加以下 Secret：MY_BLOG_REPO_TOKEN

     

3. 此时我们将脚本推送到 Gihtub

   git add .
   git commit -m "添加自动部署脚本"
   git push origin 

4. 访问 Github Action

   

5. 查看 my-blog 仓库, 发现 hexo g 生产的静态文件已经被部署了

   

# Vercel 自动部署

• GitHub Pages：服务器主要位于海外，国内访问常出现加载慢、不稳定甚至间歇性无法打开的情况。

  • https://ping.chinaz.com/fulsun.dpdns.org
  • 测速网-网站测速-网站速度诊断 HTTP 速度测速-WEB 速度测试
  • 炸了么 - 网站测速, HTTP 测速, PING 检测, TCPPING 检测, CDN 测速, 多地区网站测速, 网络拨测工具
  • 测速网-免费在线 Ping 检测-免费 Ping 测试工具-网站在线测速工具
  • 拨测-免费的域名检测工具网-网站测速-ping 检测-域名污染-域名拦截-dns 查询-IPv6 网站测试-路由跟踪查询-劫持检测-站长工具
  • 全球主机监控 - 国内外 VPS、云服务器的库存监控和优惠信息

  

  

• Vercel：拥有全球 CDN 节点，特别优化了亚洲节点（含港台），国内平均访问速度实测可提升 5~7 倍，延迟更低，稳定性更强。

# Vercel 部署

1. 登录 Vercel （支持 GitHub 登录）

   

2. 选择仓库，点击导入

   

3. Vercel 自动识别了这个仓库是一个 Hexo 项目，直接点击 Deploy 按钮部署。

   

   ·

4. 成功部署后的页面如下，点击 Go to Dashboard，即可前往该项目的控制面板。

   

5. Domains 下的链接即为博客的访问链接，左边为该网站的预览图片

   

6. 点击访问

   

# 解析域名至 Vercel

• 如果使用 vercel 部署， 这里我们可以删除 Github 上的 my-blog 仓库了

• 点击 Vercel 项目中的 Settings → Domains → Add，将你的域名解析至 Vercel 部署的网页上。

• 输入你的域名（可以是二级域名）后点击 Add 按钮，即可绑定域名至该项目.

  

• 检查结果

  

• 进入 CF 配置 DNS ，这里我们从下面选择进行指定 CNAME 解析地址

  • vercel-cname.xingpingcn.top [CF、Vercel、Netlify 优选 IP 加速](https://github.com/xingpingcn/enhanced-FaaS-in-China),
  • cname-china.vercel-dns.com 中国大陆优化的 CNAME 记录

  

• 再次 refresh 查看发现域名已配置成功

  

• 访问自定义的域名后，可成功访问，证明部署成功了。