本站建设指南

这是本站上线之后的第一篇文章。就用来记录网站是怎么建起来的吧。

「ash的写作档案室」是用Hugo创建的静态网站，文件存在GitHub上，Cloudflare托管分发内容。

好处：免费、极简、能用markdown、不用维护服务器。
坏处：没有评论和其他社区功能。

1. 在本地安装Hugo

Hugo 是一个快速搭建静态网站的开源软件。

我用Windows PC。在WSL Ubuntu的terminal里运行：

wget https://github.com/gohugoio/hugo/releases/download/v0.135.0/hugo_extended_0.135.0_linux-amd64.deb
sudo dpkg -i hugo_extended_0.135.0_linux-amd64.deb

2. 用Hugo创建新站点

在需要存放网站文件的路径下创建新站：

hugo new site rwen_me
cd rwen_me

创建后的目录结构如下：

tree -L 1 ./
# ./
# ├── archetypes
# ├── config.yaml
# ├── content
# ├── data
# ├── layouts
# ├── public
# ├── resources
# ├── static
# └── themes

先初始化Git（不仅是为了版本控制，后详）：

git init
git branch -M main

然后下载我之前选好的网站主题：

git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

最后用主题自带的默认配置替换当前的空白站点配置，网站的骨架就齐全了。

cp ./themes/hugo-theme-stack/exampleSite/hugo.yaml ./
rm config.yaml
mv hugo.yaml config.yaml

3. 添加第一篇文章

Hugo的默认内容格式是markdown。

在站点根目录下创建content/post/my-1st-post/index.md。该文件里需要至少有title和date两项元数据。

本文的markdown源码前十行如下：

---
title: 本站建设指南
date: 2025-11-16
slug: how-to-build-this-site
categories:
    - 生活
    - 教程
---

这是本站上线之后的第一篇文章。就用来记录网站是怎么建起来的吧。

本站的默认语言是zh-cn。多语言的文章可以在同目录添加index.en.md之类的翻译版本。

以后写新文章，只需在./content/post/里继续添加有类似元数据的markdown文件即可，网站会自动刷新。

写作，我一般也用vscode:

VSCode的Markdown编辑/预览界面

./themes/hugo-theme-stack/exampleSite/content/post/里面有一些样板文章，可以复制到./content/post/来预览各式效果。

4. 在本地预览网站

运行Hugo本地服务器（--disableFastRender在每次代码更改后会强制重build）：

hugo server --disableFastRender
# Built in 54 ms
# Environment: "development"
# Serving pages from disk
# Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
# Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
# Press Ctrl+C to stop

然后在浏览器里打开网站：http://localhost:1313/。

可以按官方指南调整出喜欢的主题风格。调得差不多了就可以准备上线了。

5. 与GitHub同步

这一步的目的是把所有站点相关文件都存储到Github的云端。我这个网站只有图文内容，不可能超过Github的「单个文件100MB」和「单个repo 5GB」的限制。

先在GitHub主页新建一个私人代码库，我的就叫rwen-me。

我一般是直接用vscode UI来同步本地代码的，但也可以：

git remote add origin https://github.com/xxx/rwen-me.git
git add .
git commit -m "init commit"
git push --set-upstream origin main

当然，之后在本地写了新文章，也需要先push进Github才能真正上线。

手边没有电脑时，可以用Github的免费Codespace开一个vscode的web app，直接在云端编辑和Commit。也就相当于一个网站的后台内容管理平台了。

6. 设置Cloudflare Pages

因为国内对GitHub的访问很不稳定，我最终选择了相对畅通的Cloudflare Pages。如果你不在乎这点，可以直接用GitHub Pages。这两个都是免费的静态网站托管服务。

Cloudflare支持从GitHub代码库读取Hugo站点。每当你push一次代码，它就会自动重新读取并编译网站。Cloudflare的免费账户每个月有500次同步的限制，对个人网站来说绰绰有余。

先去官网注册个账号。然后在你的主页的左边栏里选择Compute & AI -> Workers & Pages，再在右边选择Pages -> Import an existing Git repository。接下来按照引导一步步走。在连接GitHub账号时，选择让Cloudflare只能读取相关的那个repo就好。

完成引导后，Cloudflare会给你一个<your_app_name>.pages.dev的域名。想要私人域名的话，Cloudflare也提供域名购买和管理的一站式服务，很方便。

个人网站就搭建好了！