如何构建一个静态网站？

本文最后更新于 2025年2月9日

注：本教程适用于 Windows 平台。

预先要求

git
node.js
一个 GitHub 账号
一个 Cloudflare 账号

步骤

本地站点

打开终端管理员，输入
1
npm install -g hexo-cli
在你喜欢的位置打开终端，输入
1
hexo init myblog
会新建一个 myblog 文件夹。你可以按照喜好命名。
继续执行：
1
2
cd myblog npm install
继续执行：
1
2
3
hexo clean hexo g hexo s
打开浏览器，输入 http://localhost:4000/，可见：

初始界面

这样，我们本地的网站就初步构建好了。

上线

GitHub

登录 GitHub，新建一个 repository，名字最好和刚刚 hexo init 的名字一致，权限设置 Private，其余保持默认。
在本地博客目录下：
1
git init
设置用户名和邮箱地址 & 远程存储库：
如果喜欢可视化的话可以使用Visual Studio
1. 右键 ->Open with Visual Studio
2. 工具 -> 选项 -> 源代码管理 ->Git仓库设置 -> 常规里，修改用户名和电子邮件
3. 工具 -> 选项 -> 源代码管理 ->Git仓库设置 -> 远程里，设置远程链接为仓库链接，保存

在vs中添加远程

(可选) 在.gitignore 末尾添加
1
2
.github/ .vs/

在本地博客目录下：

1
2
3

git add .
git commit -m "up"
git push --force-with-lease

这样，网站代码已经上传到 GitHub 中了。

Cloudflare

登录或注册账号
计算 (Workers) -> Workers 和 Pages -> 创建
Pages -> 连接到 git 里，关联 GitHub 账号，选择仓库，开始设置
按喜好修改名称 (同时域名也会改变)，构建命令写 npx hexo generate，构建输出目录写 public，保存并部署
等待构建成功

约一分钟后网站可访问。

Hello World!

在本地博客目录下:
1
hexo new "first"
转到 source\_post\，找到新建的 md 文件，用你喜欢的 markdown 编辑器编辑
修改好后，在本地博客目录下：
1
2
3
hexo clean hexo g hexo s
打开浏览器，输入 http://localhost:4000/，可以看到修改生效了

如果确认可以提交了，在本地博客目录下：

1
2
3

git add .
git commit -m "up"
git push --force-with-lease

约一分钟后访问你的网址，可以看到修改生效了

自定义站点样式

hexo 提供许多主题和配色方案，个人推荐 fluid。

它的优点比较显著：

免费 & 开源
成熟 & 优雅
简单，适合初学者
文档丰富

fluid 主题配置

安装与启用

1	`npm install --save hexo-theme-fluid`

修改_config.fluid.yml 里 theme: fluid

自定义配置

详见_config.yml 和官方文档

一些自定义的配置：

评论功能

1
2
3

comments:
  enable: true
  type: # your scheme

方案一：valine

需要先注册 LeanCloud，创建应用，点击，再在设置 - 安全中心 - Web 安全域名里填你的域名

配置：

valine:
  appId: xxx # 设置-应用凭证
  appKey: yyy # 设置-应用凭证
  meta: ['nick', 'mail'] # 弃用link
  placeholder: '说点什么吧...'
  serverURLs: https://xxx.yyy # 设置-应用凭证-服务器地址

~~可以在数据存储 - 结构化数据 - Comment 里控评~~

方案二：waline

相对复杂但效果更好，详见这篇博客

技巧

在本地博客目录下新增：
push.bat

@echo off
git add .
git diff-index --quiet --cached HEAD --
if %errorlevel% == 0 (
   echo no change, skip commit
) else (
   git commit -m "up"
)
git push --force-with-lease

build.cmd

1	`cmd /c hexo clean && hexo g`