diff options
| -rw-r--r-- | notes/how-do-i-build-this-site.org | 128 | ||||
| -rw-r--r-- | notes/index.org | 7 | ||||
| -rw-r--r-- | notes/tags/philosophy.org | 2 | ||||
| -rw-r--r-- | notes/tags/web.org | 2 | ||||
| -rw-r--r-- | public/index.html | 21 | ||||
| -rw-r--r-- | public/radical-minimalist-web-design.html | 4 | ||||
| -rw-r--r-- | public/tags/minimalism.html | 4 | ||||
| -rw-r--r-- | public/tags/philosophy.html | 8 | ||||
| -rw-r--r-- | public/tags/web.html | 8 |
9 files changed, 152 insertions, 32 deletions
diff --git a/notes/how-do-i-build-this-site.org b/notes/how-do-i-build-this-site.org index d2a3422..be3a5da 100644 --- a/notes/how-do-i-build-this-site.org +++ b/notes/how-do-i-build-this-site.org @@ -1,5 +1,131 @@ #+title: 我是如何构建这个站点的 +#+filetags: :technology:emacs: #+SETUPFILE: ~/niwa/template/setup/minimal.setup #+EXPORT_FILE_NAME: /home/yingyu5658/niwa/public/how-do-i-build-this-site.html -这个站点只用到了两样东西：Emacs 和 bash。 +在[[https://github.com/yingyu5658/niwa][Github]]上查看这个项目→ + +----- + +** 这个网站是怎么做的？ + +仅用 Emacs 两个脚本文件： + +#+begin_src +$ tree scripts +scripts +├── niwa.sh +└── publish.el +#+end_src + +- =niwa.sh=: 主程序，处理命令。目前只有 new 用于新建笔记，build 用于构建。 +- =publish.el=: 一个 Elisp 脚本，做一些配置，批量导出 org 为 html。 + +*** niwa.sh + +**** new_note() + +#+begin_src bash +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" +} +#+end_src + +原理非常简单，复制模板 org 文件到命令行参数给定的文件名。并且将一个导出配置重定向到这个文件，用于导出单页 html。 + +在 =template.org= 中只有两行文本： + +#+begin_src org +#+title: +#+SETUPFILE: ~/niwa/template/setup/minimal.setup +#+end_src + +第一行标题，第二行引入 setup： + +#+begin_src 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> +#+end_src + +只是信息配置和一些为了护眼的强制暗色模式。 + + +**** build() + +#+begin_src bash +build() { + emacs --batch \ + -l ~/.config/emacs/lisp/doom.el \ + -l "${SCRIPTS_DIR}/publish.el" \ + --eval "(org-publish-project \"niwa\" t)" +} +#+end_src + +通过 emacs 的 =--batch= 选项，将 emacs 作为 elisp 脚本解释器使用。 + +*** publish.el + +#+begin_src elisp +(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")))) +#+end_src + +配置发布信息，包括源文件、输出位置、递归等。 + +*** 发布 + +先构建静态文件 + +#+begin_src +$ bash ./script/niwa.sh build +#+end_src + +然后推送到 git 仓库，Cloudflare Pages 会自动触发构建。 + + +** 一点题外话 +大概在去年，[[https://www.glowisle.me/][我的博客]]的副标题包含「数字花园」这四个字，我当时并不是特别清楚数字花园意味着什么（现在可能也是）。 + +我从 2025 年 9 月 17 日开始用手机 Obsidian的[[https://github.com/ratiger/obsidian-banyan/tree/main][Banyan]]插件来写一些文章的草稿或思考过程，但写着写着就变成日记了，而且还是不太正能量的倒垃圾日记。它早期的状态很像数字花园，我也一直有做一个公开的数字花园的想法。 + +在今年 1 月 27 日，[[https://www.eltr.ac/][eltrac]]发布了他的[[https://jar.geedea.pro/][新站]]，觉得这样的形式挺有趣的，而且在网站介绍的第一行有这样一句话： + +#+begin_quote +This is a [[https://motherfuckingwebsite.com/][mother-fucking website]]. +#+end_quote + +我点进了那个链接，仔细看了一下，非常认同他的观点： + +- 轻量、快速 +- 可用可读可访问 +- 内容优先，而不是装饰有限 + +于是就按照那个方向，开始着手做一个数字花园。 + +我用起来比较方便的工具，不是 Obsidian 和 Notion，而是 Emacs，所以我就想到了用 org-mode 来做这件事。 + +这套流程虽然不是最优解，但也许是最适合我的。 diff --git a/notes/index.org b/notes/index.org index a9101cb..46bd781 100644 --- a/notes/index.org +++ b/notes/index.org @@ -6,11 +6,12 @@ This is a [[https://motherfuckingwebsite.com/][motherfucking-website]]. -这里是 Verdant 的杂物间，也是我「[[./radical-minimalist-web-design.org][激进极简主义网页设计]]」的实验田。内容的风格上更像数字花园。会发布一些半成品文章、某些问题的解决方案或笔记。 - +这里是 Verdant 的杂物间，也是我「[[./radical-minimalist-web-design.org][激进极简主义网页设计]]」的实验田。内容的风格上更像数字花园。会发布一些半成品文章、某些问题的解决方案或笔记。如果你对这个站点使用了什么技术感兴趣，可以阅读[[./how-do-i-build-this-site.org][我是如何构建这个站点的]]。 ** 最近更新 +- [[./how-do-i-build-this-site.org][我是如何构建这个站点的]] - [[./radical-minimalist-web-design.org][激进极简主义网页设计]] ** 小径 -*** 技术 - [[./tags/web.org][网页]] +- [[./tags/technology.org][技术]] +- [[./tags/emacs.org][Emacs]] diff --git a/notes/tags/philosophy.org b/notes/tags/philosophy.org index 675b398..5ee8027 100644 --- a/notes/tags/philosophy.org +++ b/notes/tags/philosophy.org @@ -1,3 +1,3 @@ -#+title: 哲学 +#+title: #philosophy - [[file:../radical-minimalist-web-design.org][激进极简主义网页设计]] diff --git a/notes/tags/web.org b/notes/tags/web.org index 07847ad..4e1d9d6 100644 --- a/notes/tags/web.org +++ b/notes/tags/web.org @@ -1,3 +1,3 @@ -#+title: 网页 +#+title: #web - [[file:../radical-minimalist-web-design.org][激进极简主义网页设计]] diff --git a/public/index.html b/public/index.html index cd626e9..0fb312a 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> -<!-- 2026-02-02 一 22:51 --> +<!-- 2026-02-03 二 00:18 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Verdant的杂物间</title> @@ -210,11 +210,7 @@ color: white; <div id="text-table-of-contents" role="doc-toc"> <ul> <li><a href="#orgfb9cabc">最近更新</a></li> -<li><a href="#orgf64e402">小径</a> -<ul> -<li><a href="#orgcafbbc8">技术</a></li> -</ul> -</li> +<li><a href="#orgf64e402">小径</a></li> </ul> </div> </div> @@ -225,13 +221,13 @@ This is a <a href="https://motherfuckingwebsite.com/">motherfucking-website</a>. </p> <p> -这里是 Verdant 的杂物间，也是我「<a href="./radical-minimalist-web-design.html">激进极简主义网页设计</a>」的实验田。内容的风格上更像数字花园。会发布一些半成品文章、某些问题的解决方案或笔记。 +这里是 Verdant 的杂物间，也是我「<a href="./radical-minimalist-web-design.html">激进极简主义网页设计</a>」的实验田。内容的风格上更像数字花园。会发布一些半成品文章、某些问题的解决方案或笔记。如果你对这个站点使用了什么技术感兴趣，可以阅读<a href="./how-do-i-build-this-site.html">我是如何构建这个站点的</a>。 </p> - <div id="outline-container-orgfb9cabc" class="outline-2"> <h2 id="orgfb9cabc">最近更新</h2> <div class="outline-text-2" id="text-orgfb9cabc"> <ul class="org-ul"> +<li><a href="./how-do-i-build-this-site.html">我是如何构建这个站点的</a></li> <li><a href="./radical-minimalist-web-design.html">激进极简主义网页设计</a></li> </ul> </div> @@ -240,19 +236,16 @@ This is a <a href="https://motherfuckingwebsite.com/">motherfucking-website</a>. <div id="outline-container-orgf64e402" class="outline-2"> <h2 id="orgf64e402">小径</h2> <div class="outline-text-2" id="text-orgf64e402"> -</div> -<div id="outline-container-orgcafbbc8" class="outline-3"> -<h3 id="orgcafbbc8">技术</h3> -<div class="outline-text-3" id="text-orgcafbbc8"> <ul class="org-ul"> <li><a href="./tags/web.html">网页</a></li> +<li><a href="./tags/technology.html">技术</a></li> +<li><a href="./tags/emacs.html">Emacs</a></li> </ul> </div> </div> </div> -</div> <div id="postamble" class="status"> -<p class="date">Created: 2026-02-02 一 22:51</p> +<p class="date">Created: 2026-02-03 二 00:18</p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> </div> </body> diff --git a/public/radical-minimalist-web-design.html b/public/radical-minimalist-web-design.html index 099333b..702e7ed 100644 --- a/public/radical-minimalist-web-design.html +++ b/public/radical-minimalist-web-design.html @@ -3,7 +3,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> -<!-- 2026-02-02 一 22:51 --> +<!-- 2026-02-03 二 00:18 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>激进极简主义网页设计</title> @@ -286,7 +286,7 @@ color: white; </div> <div id="postamble" class="status"> <p class="date">日期: 2026-02-02 一 00:00</p> -<p class="date">Created: 2026-02-02 一 22:51</p> +<p class="date">Created: 2026-02-03 二 00:18</p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> </div> </body> diff --git a/public/tags/minimalism.html b/public/tags/minimalism.html index 95682af..6799c15 100644 --- a/public/tags/minimalism.html +++ b/public/tags/minimalism.html @@ -3,7 +3,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> -<!-- 2026-02-02 一 22:51 --> +<!-- 2026-02-03 二 00:18 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>#minimalism</title> @@ -201,7 +201,7 @@ </ul> </div> <div id="postamble" class="status"> -<p class="date">Created: 2026-02-02 一 22:51</p> +<p class="date">Created: 2026-02-03 二 00:18</p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> </div> </body> diff --git a/public/tags/philosophy.html b/public/tags/philosophy.html index 8f5e537..c9a83e9 100644 --- a/public/tags/philosophy.html +++ b/public/tags/philosophy.html @@ -3,10 +3,10 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> -<!-- 2026-02-02 一 22:51 --> +<!-- 2026-02-03 二 00:18 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> -<title>哲学</title> +<title>#philosophy</title> <meta name="generator" content="Org Mode" /> <style> #content { max-width: 60em; margin: auto; } @@ -195,13 +195,13 @@ </head> <body> <div id="content" class="content"> -<h1 class="title">哲学</h1> +<h1 class="title">#philosophy</h1> <ul class="org-ul"> <li><a href="../radical-minimalist-web-design.html">激进极简主义网页设计</a></li> </ul> </div> <div id="postamble" class="status"> -<p class="date">Created: 2026-02-02 一 22:51</p> +<p class="date">Created: 2026-02-03 二 00:18</p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> </div> </body> diff --git a/public/tags/web.html b/public/tags/web.html index e843300..27ece51 100644 --- a/public/tags/web.html +++ b/public/tags/web.html @@ -3,10 +3,10 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> -<!-- 2026-02-02 一 22:51 --> +<!-- 2026-02-03 二 00:18 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> -<title>网页</title> +<title>#web</title> <meta name="generator" content="Org Mode" /> <style> #content { max-width: 60em; margin: auto; } @@ -195,13 +195,13 @@ </head> <body> <div id="content" class="content"> -<h1 class="title">网页</h1> +<h1 class="title">#web</h1> <ul class="org-ul"> <li><a href="../radical-minimalist-web-design.html">激进极简主义网页设计</a></li> </ul> </div> <div id="postamble" class="status"> -<p class="date">Created: 2026-02-02 一 22:51</p> +<p class="date">Created: 2026-02-03 二 00:18</p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> </div> </body> |