博客搭建记录：从零开始使用 Hexo + GitHub + Netlify + Cloudflare

Posted on Edited on

在参考了多个教程后，我最终选择了使用 Hexo + GitHub + Netlify + Cloudflare 这套技术栈来搭建我的个人博客。

  • Hexo: 博客框架
  • GitHub: 用于文件托管
  • Netlify: 静态网站生成与部署
  • Cloudflare: CDN加速和域名管理

我个人在 Cloudflare 注册了域名，相比教程中在阿里云注册域名再托管到 Cloudflare 的方案，我的流程应该会更简单一些。

第零步：Git 环境配置

我的 Linux 系统已经自带了 Git，现在只需要配置用户名和邮箱：

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

有些教程提到需要生成 SSH 密钥，但我跟的这个教程没有用到，所以暂时跳过。不过我还是把命令记录在这里：

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

第一步：Hexo 环境搭建

环境配置

系统已经安装了 Node.js，这一步可以省略。正常情况下可以通过官网下载或命令行安装。

验证环境：

1
2
node --version
npm --version

能够正常显示版本信息说明环境配置完成。

npm 源配置：为了提升下载速度，可以更换为国内镜像源。

1
2
3
npm config get registry # 查看当前源
npm config set registry https://registry.npm.taobao.org # 切换为淘宝源
npm config get registry # 确认已切换

但我在这里遇到了问题，即使切换到淘宝源也下载失败：

1
2
3
npm error code CERT_HAS_EXPIRED
npm error errno CERT_HAS_EXPIRED
npm error request to https://registry.npm.taobao.org/hexo-cli failed, reason: certificate has expired

由于之前的操作失误，我不记得原来的源地址了，需要求助 AI。

第二次尝试：

1
2
3
4
# 尝试使用华为云镜像
npm config set registry https://repo.huaweicloud.com/repository/npm/
# 重新安装
npm install hexo-cli -g

结果出现权限错误：

1
2
3
4
npm error code EACCES
npm error syscall mkdir
npm error path /usr/lib/node_modules/hexo-cli
npm error Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/hexo-cli'

这是权限问题，当前用户没有在系统目录 /usr/lib/node_modules/ 安装全局包的权限。

AI 提供了多种解决方案，我选择了为当前用户配置独立的 npm 全局安装目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 创建用户本地 npm 目录
mkdir -p ~/.npm-global

# 配置 npm 使用此目录
npm config set prefix '~/.npm-global'

# 将目录添加到 PATH
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc

# 重新加载配置
source ~/.zshrc

# 现在可以正常安装
npm install hexo-cli -g

安装成功！不过我更喜欢在家目录中创建特定配置目录，比如 mkdir -p ~/npm/.npm-global，这个等博客搭建完成后再调整。

验证安装：

1
2
3
4
5
6
hexo --version

hexo-cli: 4.3.2
os: linux 6.17.7-arch1-1 Arch Linux
node: 25.1.0
# ... 其他版本信息

初始化博客

1
hexo init "你的博客目录名称" # 目录名称不含空格时双引号可省略

因网络状况不同，初始化耗时约一分钟：

1
2
3
4
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
warning hexo-renderer-stylus > stylus > glob@7.2.3: Glob versions prior to v9 are no longer supported
INFO  Start blogging with Hexo!

进入博客目录：

1
cd "博客目录"

查看目录结构：

1
2
3
4
ls -la

# 或者使用 tree 命令
tree -L 1

目录结构说明：

  • _config.yml: 全局配置文件，包含网站名称、描述、作者、语言、主题等设置
  • scaffolds: 模板文件，用于生成新页面或博客文章
  • source: 存放 Markdown 源文件，_posts 文件夹存放所有博客文章
  • themes: 主题目录，Hexo 有丰富的主题支持

创建新文章

1
2
3
hexo new post "test" # 在 source/_posts/ 目录生成 'test.md'
hexo generate        # 生成静态 HTML 文件到 /public 文件夹
hexo server          # 本地预览，访问 http://localhost:4000

添加 Netlify 构建脚本

为了方便 Netlify 部署，在 package.json 中添加构建命令：

1
2
3
4
5
6
7
8
9
{
    "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server",
        "netlify": "npm run clean && npm run build" // 新增此行
    }
}

使用 Vim 编辑文件：

1
2
vim package.json
# 按 i 进入插入模式，编辑内容，按 ESC 后输入 :wq 保存退出

博客配置

_config.yml 主要配置项说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 网站信息
title: Hexo                    # 网站标题
subtitle:                      # 副标题
description:                   # 网站描述
author: John Doe               # 作者
language:                      # 语言
timezone:                      # 时区

# URL 设置
url: http://yoursite.com       # 网站地址
root: /                        # 根目录
permalink: :year/:month/:day/:title/ # 文章链接格式

# 目录设置
source_dir: source             # 源文件目录
public_dir: public             # 输出目录
theme: landscape               # 主题名称

# 写作设置
new_post_name: :title.md       # 新文章文件名
default_layout: post           # 默认布局

# 部署设置
deploy:
  type: ''                     # 部署类型，常用 git

GitHub 项目托管

创建本地仓库并推送到 GitHub：

1
2
3
4
5
6
7
cd "博客目录"
git init
git add .
git commit -m "my blog first commit"
git remote add origin "远端github仓库地址"
git branch -M main
git push -u origin main

不过说实话……Git 我还不太熟练……

未完待续……下一章可能是《Git 入门指南》

记录一下时间：从 23:20 开始到现在 00:14，花了 54 分钟，但核心功能还没完成。下一步是 Netlify 建站。

真的未完待续……明天继续！

2025-11-06 20:33:39 更新

Git 学习资源

推荐廖雪峰的 Git 教程：廖雪峰-Git教程

教程目录：

  1. 简介
  2. Git 是什么
  3. 安装 Git
  4. 创建版本库
  5. 时光机穿梭
  6. 远程仓库

Netlify 建站部署

  1. 打开 Netlify，使用 GitHub 账号登录
  2. 进入 项目导入页面
  3. 配置构建命令：
    • Build command: npm run netlify
    • Publish directory: public

这里我遇到了一个问题：package.json 中少了一个逗号，修正后构建成功。

域名配置

将 Cloudflare 中的域名指向 Netlify 的二级域名：

  • 添加 CNAME 记录：blog.066088.xyz → scvg.netlify.app

然后在 Netlify 中配置自定义域名，否则无法直接通过自有域名访问。

由于我直接在 Cloudflare 注册域名，不需要再进行域名托管。教程中提到的 HTTPS 配置，Netlify 会自动处理，无需手动配置即可通过 HTTPS 访问。

博客基础搭建完成！接下来要学习如何写好博客内容……

下次再见！应该就是这样了，不加速也能正常访问。

2025年11月07日 00时37分11秒