我是如何构建这个站点的
在Github上查看这个项目→
这个网站是怎么做的?
仅用 Emacs 两个脚本文件:
$ tree scripts scripts ├── niwa.sh └── publish.el
niwa.sh: 主程序,处理命令。目前只有 new 用于新建笔记,build 用于构建。publish.el: 一个 Elisp 脚本,做一些配置,批量导出 org 为 html。
niwa.sh
new_note()
new_note() {
file_name=$1
cp $TEMPLATE_FILE "$NOTES_DIR/${file_name}.org" && echo "创建笔记成功:$NOTES_DIR/${file_name}.org"
echo "#+EXPORT_FILE_NAME: $PUBLIC_DIR/${file_name}.html" >> "$NOTES_DIR/${file_name}.org"
}
原理非常简单,复制模板 org 文件到命令行参数给定的文件名。并且将一个导出配置重定向到这个文件,用于导出单页 html。
在 template.org 中只有两行文本:
#+title: #+SETUPFILE: ~/niwa/template/setup/minimal.setup
第一行标题,第二行引入 setup:
#+AUTHOR: Verdant
#+EMAIL: i@glowisle.me
#+LANGUAGE: zh-CN
#+OPTIONS: num:nil
#+HTML_HEAD: <style>
#+HTML_HEAD: body {
#+HTML_HEAD: background-color: black;
#+HTML_HEAD: color: white;
#+HTML_HEAD: }
#+HTML_HEAD: a {
#+HTML_HEAD: color: white;
#+HTML_HEAD: }
#+HTML_HEAD: </style>
只是信息配置和一些为了护眼的强制暗色模式。
build()
build() {
emacs --batch \
-l ~/.config/emacs/lisp/doom.el \
-l "${SCRIPTS_DIR}/publish.el" \
--eval "(org-publish-project \"niwa\" t)"
}
通过 emacs 的 --batch 选项,将 emacs 作为 elisp 脚本解释器使用。
publish.el
(setq org-publish-project-alist
'(("niwa-notes"
:base-directory "~/niwa/notes"
:base-extension "org"
:recursive t
:publishing-directory "~/niwa/public"
:publishing-function org-html-publish-to-html
:with-author nil
:with-creator nil
:section-numbers nil)
("niwa"
:components ("niwa-notes"))))
配置发布信息,包括源文件、输出位置、递归等。
发布
先构建静态文件
$ bash ./script/niwa.sh build
然后推送到 git 仓库,Cloudflare Pages 会自动触发构建。
一点题外话
大概在去年,我的博客的副标题包含「数字花园」这四个字,我当时并不是特别清楚数字花园意味着什么(现在可能也是)。
我从 2025 年 9 月 17 日开始用手机 Obsidian的Banyan插件来写一些文章的草稿或思考过程,但写着写着就变成日记了,而且还是不太正能量的倒垃圾日记。它早期的状态很像数字花园,我也一直有做一个公开的数字花园的想法。
在今年 1 月 27 日,eltrac发布了他的新站,觉得这样的形式挺有趣的,而且在网站介绍的第一行有这样一句话:
This is a mother-fucking website.
我点进了那个链接,仔细看了一下,非常认同他的观点,网页应该应该:
- 轻量、快速
- 可用、可读、可访问
- 内容优先,而不是装饰优先
于是就按照那个方向,开始着手做一个数字花园。
我用起来比较方便的工具,不是 Obsidian 和 Notion,而是 Emacs,所以我就想到了用 org-mode 来做这件事。
这套流程虽然不是最优解,但也许是最适合我的。
嗯?你问我为什么不全在 Emacs 里做?因为我讨厌写 Elisp!!!
这门语言一点也不优雅,写多了之后,连语法怪异不堪的 shell 脚本都觉得无比香甜了……