用自己写的静态网页生成器生成个人网站

2026-05-01

在最初建立个人网站的时候，我使用了某位朋友推荐的 Fuwari 主题。但是：

它需要 JavaScript 才能完全工作，作为一个在乎隐私和自由的人，我对于 JavaScript 有发自内心深处的反感。
它的页面设计过于花哨，花哨的设计华而不实而且很容易让人联想到各种散发着铜臭味的商业化实体的网站。

后来又听说了 Hugo，但是 Hugo 主题库里的主题也没有我太喜欢的，而且很多都会嵌入连接到 Google 或其他外部服务器的资源，这也会导致隐私问题。

所以我决定从头造轮子。我将自己实现一个静态网页生成器，用它来生成我的网站。这也是为了练习刚刚学会不久的 C++ 和完成对于自由软件社区的第一次贡献。

到了五一劳动假期，我终于得以空闲在家完成这件事。

静态网页生成器

我给它取的名字叫做 asssg，也就是 Aurora's Simple Static Site Generator 的简写。

它只做一件事：把源目录中的 Markdown 用模板转换为相应的 HTML，其余文件直接复制。

所有代码都是我自己手写的，没有使用 ChatGPT 或其他生成类人工智能技术生成。

代码托管在 Codeberg 上。

模板

前面提到过我反感花里胡哨。所以我的模板用了相对简约的风格，只做了以下四点定制：

全局背景颜色 #def4cf
默认文字颜色 `#083b2c
保证图片宽度不超过页面宽度
字体顺序：Noto Sans > Noto Sans CJK SC > sans-serif

用 ChatGPT 生成了一个 CSS，最后的模板是这样的：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>顾悦萱的个人网站</title>
  <style>
:root {
  --bg-color: #def4cf;
  --text-color: #083b2c;
  --font-stack: "Noto Sans", "Noto Sans CJK SC", sans-serif;
}

/* Global defaults */
html, body {
  height: 100%;
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-stack);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Inherit box-sizing */
*, *::before, *::after {
  box-sizing: inherit;
}

/* Ensure images don't overflow the page */
img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Keep figures responsive */
figure {
  margin: 0;
  max-width: 100%;
}
  </style>
</head>
<body>
  <!-- ASSSG: BODY -->
</body>
</html>

管理

我的个人网站所在的目录结构是这样的：

website
├── pages
│   ├── .git
│   │   └── ......
│   ├── blog
│   │   └── ......
│   ├── blogroll.html
│   ├── contact.html
│   ├── index.html
│   └── pub.key
├── source
│   ├── about.md
│   ├── blog
│   │   └── ......
│   ├── blogroll.md
│   ├── contact.md
│   ├── index.md
│   └── pub.key
├── asssg
├── create
├── publish
└── template.html

pages 是我的 Codeberg Git 仓库。
source 是我的个人网站源文件。
asssg 是我的静态网页生成器的二进制可执行文件。
create 是一个 Python 脚本。它的作用是快速创建一篇新文章。因为只有我自己用，而我是一个比较懒的人，所以这个脚本很简陋，“够用就好”的程度。第一个参数传用户名，第二个参数传标题，特意加进去的 filename.encode('ascii') 是为了防止把目录名和标题写反。

#!/bin/python3
import sys
from datetime import date
from pathlib import Path
today_iso = date.today().isoformat()
filename = sys.argv[1]
filename.encode('ascii')
title = sys.argv[2]
Path(f"source/blog/{filename}").mkdir(parents=True)
with open("source/blog/index.md", "a") as f:
    f.write(f"- [{title} ({today_iso})]({filename})")
with open(f"source/blog/{filename}/index.md", "w") as f:
    f.write(f"# {title}\n\n{today_iso}\n")

publish 是个 Shell 脚本，它可以一次性完成网站的生成和提交操作。

#!/bin/bash
./asssg
mv -v pages/.git target/
rm -rvf pages/
mv target pages
cd pages
git add --all
git commit
git push

template.html 是前面的模板。

总结和一些计划

今天自己动手，丰衣足食，实现了一个简约风、符合我的审美观的个人网站。它没有嵌入会导致追踪的外部资源和 JavaScript，隐私友好，且避免了花里胡哨、华而不实的设计。

未来有时间会加上 RSS；也可能再写一个通用的博客生成与管理工具替换 create，并把它发布到我的 Codeberg 上贡献给社区。