最极客的零成本建站教程

如果你想搭建一个自己的网站，但是没有域名也没有VPS，你可以试试这个方案，这个方案不需要这两个在大多数人看来的必要条件，而且网站的访问速度也比很多没有线路优化的vps速度更快。当然，如果你想实现别人能用一串好看的链接访问网站，必须还是需要一个域名的。

这套方案我们使用了Hugo + GitHub + Cloudflare Pages，这三个工具都不需要很高的门槛，文章内提供了详细的教程。

本教程操作环境基于 Windows (Mac/Linux 操作类似)，并且我们要搭建一个简洁好看的博客（以最流行的 PaperMod 主题为例，如果你喜欢图片多的卡片风格，后面可以换成 Stack 主题，操作逻辑一样）。

准备工作 (Prerequisites)

请先确保你的电脑安装了以下三个东西（如果没有，请先搜索安装）：

Git: 用于上传代码。
Hugo (Extended 版本) : 用于生成网页。
- Windows用户推荐用 winget install Hugo.Hugo.Extended 或下载 exe 文件配置环境变量。
VS Code: 一个好用的代码编辑器（推荐），或者记事本也行。
GitHub 账号: 用于存放你的网站代码。

第一步：在本地创建网站

创建站点
找一个你喜欢的文件夹（比如 D盘），右键 -> “Open Git Bash Here” (或者在终端中打开)，输入：
Bash
1

hugo new site myblog
这会创建一个叫 myblog 的文件夹。
进入文件夹并初始化 Git
1 2

cd myblog git init
安装主题 (PaperMod)

这是让网站“好看”的关键。我们将主题作为 submodule 下载，这样以后更新方便：
1

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

配置主题
打开 hugo.toml (旧版本叫 config.toml) 文件，删除里面的所有内容，复制粘贴下面的配置（这是最基础的配置）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


baseURL = 'https://你的域名.com/' # 暂时可以不改，后面自动会变
languageCode = 'zh-cn'
title = '我的个人小站'
theme = 'PaperMod'

[params]
    defaultTheme = 'auto' # 跟随系统深色模式
    ShowReadingTime = true # 显示阅读时间
    ShowShareButtons = false # 只有国内也没人用国外的分享按钮，关掉清爽

[menu]
  [[menu.main]]
    identifier = "archives"
    name = "归档"
    url = "/archives/"
    weight = 10
  [[menu.main]]
    identifier = "search"
    name = "搜索"
    url = "/search/"
    weight = 20

如果你下载的主题有配置示例文件，建议直接使用配置示例文件进行更改，更不容易出错，主题的示例文件通常在/themes/主题名/example(或类似的文件夹下）

第二步：写第一篇文章

在终端输入：
1

hugo new posts/hello-world.md

用 VS Code 打开 content/posts/hello-world.md。你会看到上面有一段元数据（Front Matter），在下面写正文：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


---
title: "你好，世界"
date: 2023-10-27T10:00:00+08:00
draft: false  # <--- 重要！一定要把 true 改成 false，否则发布后看不见
---

## 这是我的第一篇文章

既然选择了静态网站，就要享受**极速**的快感。

- 这是一个列表
- 这里的排版很干净

第三步：上传到 GitHub

去 GitHub 创建一个新的仓库 (New Repository)。
- Repository name: myblog (或者随便起)。
- Visibility: 选 Public 或 Private 都可以（Cloudflare 都支持）。
- 点 “Create repository”。

回到你电脑的终端，执行以下命令（把下面的 URL 换成你刚才创建的仓库地址）：

1
2
3
4
5
6


git add .
git commit -m "my first commit"
git branch -M main
# 下面这行换成你自己的仓库地址！
git remote add origin https://github.com/你的用户名/myblog.git
git push -u origin main

第四步：Cloudflare Pages 部署 (重头戏)

登录 Cloudflare Dashboard。
在左侧菜单点击 Workers & Pages -> Overview。
点击 Create Application -> Connect to Git。
登录你的 GitHub 账号，选择刚才创建的 myblog 仓库。
配置构建环境 (Build settings) —— 这里很关键，别填错：
- Project name: 随便填（比如 my-awesome-blog）。
- Production branch: main。
- Framework preset (框架预设): 选择 Hugo。
- Build command: hugo (默认不用动)。
- Build output directory: public (默认不用动)。
- Environment variables (环境变量): 建议添加这一项，防止版本不兼容
  - Variable name: HUGO_VERSION
  - Value: 0.120.0 (或者写较新的版本号)
点击 Save and Deploy。

等待几十秒，你会看到 Success! ，Cloudflare 会给你分配一个 xxx.pages.dev 的临时域名。

第五步：绑定你的域名 (自定义域名)

因为你的域名就在 Cloudflare 买的，这步只需 10 秒：

在刚才部署成功的 Pages 项目页面，点击顶部的 Custom domains 标签。
点击 Set up a custom domain。
输入你买的域名（比如 blog.example.com 或者直接 example.com）。
点击 Continue。
Cloudflare 会自动检测并提示你“Activate DNS”，点击 Activate DNS -> Add record。
等待一两分钟，你的网站就可以通过自己的域名访问了！HTTPS 也是全自动的。

第六步：开启统计 (Web Analytics)

依然在这个 Pages 项目的设置页面。
点击 Settings (设置) -> Web Analytics。
点击 Enable Web Analytics (启用)。
搞定！ 不需要手动插代码，Cloudflare 会自动在边缘节点帮你在网页里注入统计脚本。

此后如何更新文章？

以后你只需要做三件事：

在本地电脑写新文章 (hugo new posts/xxx.md)。
把 draft: true 改成 false。

运行 Git 三连：

1
2
3


git add .
git commit -m "new post"
git push

Cloudflare 监测到你 Push 了代码，就会自动触发构建，1分钟后你的网站就更新了。

‍