blob: 8391c1f3510785fa153b9363af6444548ead70ab (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
|
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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-03 二 00:25 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>我是如何构建这个站点的</title>
<meta name="generator" content="Org Mode" />
<style>
#content { max-width: 60em; margin: auto; }
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
.todo { font-family: monospace; color: red; }
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #e6e6e6;
border-radius: 3px;
background-color: #f2f2f2;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: auto;
}
pre.src:before {
display: none;
position: absolute;
top: -8px;
right: 12px;
padding: 3px;
color: #555;
background-color: #f2f2f299;
}
pre.src:hover:before { display: inline; margin-top: 14px;}
/* Languages per Org manual */
pre.src-asymptote:before { content: 'Asymptote'; }
pre.src-awk:before { content: 'Awk'; }
pre.src-authinfo::before { content: 'Authinfo'; }
pre.src-C:before { content: 'C'; }
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before { content: 'Clojure'; }
pre.src-css:before { content: 'CSS'; }
pre.src-D:before { content: 'D'; }
pre.src-ditaa:before { content: 'ditaa'; }
pre.src-dot:before { content: 'Graphviz'; }
pre.src-calc:before { content: 'Emacs Calc'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-fortran:before { content: 'Fortran'; }
pre.src-gnuplot:before { content: 'gnuplot'; }
pre.src-haskell:before { content: 'Haskell'; }
pre.src-hledger:before { content: 'hledger'; }
pre.src-java:before { content: 'Java'; }
pre.src-js:before { content: 'Javascript'; }
pre.src-latex:before { content: 'LaTeX'; }
pre.src-ledger:before { content: 'Ledger'; }
pre.src-lisp:before { content: 'Lisp'; }
pre.src-lilypond:before { content: 'Lilypond'; }
pre.src-lua:before { content: 'Lua'; }
pre.src-matlab:before { content: 'MATLAB'; }
pre.src-mscgen:before { content: 'Mscgen'; }
pre.src-ocaml:before { content: 'Objective Caml'; }
pre.src-octave:before { content: 'Octave'; }
pre.src-org:before { content: 'Org mode'; }
pre.src-oz:before { content: 'OZ'; }
pre.src-plantuml:before { content: 'Plantuml'; }
pre.src-processing:before { content: 'Processing.js'; }
pre.src-python:before { content: 'Python'; }
pre.src-R:before { content: 'R'; }
pre.src-ruby:before { content: 'Ruby'; }
pre.src-sass:before { content: 'Sass'; }
pre.src-scheme:before { content: 'Scheme'; }
pre.src-screen:before { content: 'Gnu Screen'; }
pre.src-sed:before { content: 'Sed'; }
pre.src-sh:before { content: 'shell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-sqlite:before { content: 'SQLite'; }
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before { content: 'Forth'; }
pre.src-io:before { content: 'IO'; }
pre.src-J:before { content: 'J'; }
pre.src-makefile:before { content: 'Makefile'; }
pre.src-maxima:before { content: 'Maxima'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-picolisp:before { content: 'Pico Lisp'; }
pre.src-scala:before { content: 'Scala'; }
pre.src-shell:before { content: 'Shell Script'; }
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
/* additional language identifiers per "defun org-babel-execute"
in ob-*.el */
pre.src-cpp:before { content: 'C++'; }
pre.src-abc:before { content: 'ABC'; }
pre.src-coq:before { content: 'Coq'; }
pre.src-groovy:before { content: 'Groovy'; }
/* additional language identifiers from org-babel-shell-names in
ob-shell.el: ob-shell is the only babel language using a lambda to put
the execution function name together. */
pre.src-bash:before { content: 'bash'; }
pre.src-csh:before { content: 'csh'; }
pre.src-ash:before { content: 'ash'; }
pre.src-dash:before { content: 'dash'; }
pre.src-ksh:before { content: 'ksh'; }
pre.src-mksh:before { content: 'mksh'; }
pre.src-posh:before { content: 'posh'; }
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before { content: 'Ada'; }
pre.src-asm:before { content: 'Assembler'; }
pre.src-caml:before { content: 'Caml'; }
pre.src-delphi:before { content: 'Delphi'; }
pre.src-html:before { content: 'HTML'; }
pre.src-idl:before { content: 'IDL'; }
pre.src-mercury:before { content: 'Mercury'; }
pre.src-metapost:before { content: 'MetaPost'; }
pre.src-modula-2:before { content: 'Modula-2'; }
pre.src-pascal:before { content: 'Pascal'; }
pre.src-ps:before { content: 'PostScript'; }
pre.src-prolog:before { content: 'Prolog'; }
pre.src-simula:before { content: 'Simula'; }
pre.src-tcl:before { content: 'tcl'; }
pre.src-tex:before { content: 'TeX'; }
pre.src-plain-tex:before { content: 'Plain TeX'; }
pre.src-verilog:before { content: 'Verilog'; }
pre.src-vhdl:before { content: 'VHDL'; }
pre.src-xml:before { content: 'XML'; }
pre.src-nxml:before { content: 'XML'; }
/* add a generic configuration mode; LaTeX export needs an additional
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
pre.src-conf:before { content: 'Configuration File'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
dt { font-weight: bold; }
.footpara { display: inline; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.equation-container {
display: table;
text-align: center;
width: 100%;
}
.equation {
vertical-align: middle;
}
.equation-label {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { }
</style>
<style>
body, pre {
background-color: black;
color: white;
}
a {
color: white;
}
</style>
</head>
<body>
<div id="content" class="content">
<h1 class="title">我是如何构建这个站点的</h1>
<div id="table-of-contents" role="doc-toc">
<h2>目录</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#orgccef6e1">这个网站是怎么做的？</a>
<ul>
<li><a href="#orgdfeff17">niwa.sh</a>
<ul>
<li><a href="#org1cebfa5"><code>new_note()</code></a></li>
<li><a href="#org88f87df">build()</a></li>
</ul>
</li>
<li><a href="#org81cae63">publish.el</a></li>
<li><a href="#orgcbc9f57">发布</a></li>
</ul>
</li>
<li><a href="#orgff442cd">一点题外话</a></li>
</ul>
</div>
</div>
<p>
在<a href="https://github.com/yingyu5658/niwa">Github</a>上查看这个项目→
</p>
<hr />
<div id="outline-container-orgccef6e1" class="outline-2">
<h2 id="orgccef6e1">这个网站是怎么做的？</h2>
<div class="outline-text-2" id="text-orgccef6e1">
<p>
仅用 Emacs 两个脚本文件：
</p>
<pre class="example">
$ tree scripts
scripts
├── niwa.sh
└── publish.el
</pre>
<ul class="org-ul">
<li><code>niwa.sh</code>: 主程序，处理命令。目前只有 new 用于新建笔记，build 用于构建。</li>
<li><code>publish.el</code>: 一个 Elisp 脚本，做一些配置，批量导出 org 为 html。</li>
</ul>
</div>
<div id="outline-container-orgdfeff17" class="outline-3">
<h3 id="orgdfeff17">niwa.sh</h3>
<div class="outline-text-3" id="text-orgdfeff17">
</div>
<div id="outline-container-org1cebfa5" class="outline-4">
<h4 id="org1cebfa5"><code>new_note()</code></h4>
<div class="outline-text-4" id="text-org1cebfa5">
<div class="org-src-container">
<pre class="src 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"
}
</pre>
</div>
<p>
原理非常简单，复制模板 org 文件到命令行参数给定的文件名。并且将一个导出配置重定向到这个文件，用于导出单页 html。
</p>
<p>
在 <code>template.org</code> 中只有两行文本：
</p>
<div class="org-src-container">
<pre class="src src-org">#+title:
#+SETUPFILE: ~/niwa/template/setup/minimal.setup
</pre>
</div>
<p>
第一行标题，第二行引入 setup：
</p>
<div class="org-src-container">
<pre class="src 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>
</pre>
</div>
<p>
只是信息配置和一些为了护眼的强制暗色模式。
</p>
</div>
</div>
<div id="outline-container-org88f87df" class="outline-4">
<h4 id="org88f87df">build()</h4>
<div class="outline-text-4" id="text-org88f87df">
<div class="org-src-container">
<pre class="src src-bash">build() {
emacs --batch \
-l ~/.config/emacs/lisp/doom.el \
-l "${SCRIPTS_DIR}/publish.el" \
--eval "(org-publish-project \"niwa\" t)"
}
</pre>
</div>
<p>
通过 emacs 的 <code>--batch</code> 选项，将 emacs 作为 elisp 脚本解释器使用。
</p>
</div>
</div>
</div>
<div id="outline-container-org81cae63" class="outline-3">
<h3 id="org81cae63">publish.el</h3>
<div class="outline-text-3" id="text-org81cae63">
<div class="org-src-container">
<pre class="src 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"))))
</pre>
</div>
<p>
配置发布信息，包括源文件、输出位置、递归等。
</p>
</div>
</div>
<div id="outline-container-orgcbc9f57" class="outline-3">
<h3 id="orgcbc9f57">发布</h3>
<div class="outline-text-3" id="text-orgcbc9f57">
<p>
先构建静态文件
</p>
<pre class="example">
$ bash ./script/niwa.sh build
</pre>
<p>
然后推送到 git 仓库，Cloudflare Pages 会自动触发构建。
</p>
</div>
</div>
</div>
<div id="outline-container-orgff442cd" class="outline-2">
<h2 id="orgff442cd">一点题外话</h2>
<div class="outline-text-2" id="text-orgff442cd">
<p>
大概在去年，<a href="https://www.glowisle.me/">我的博客</a>的副标题包含「数字花园」这四个字，我当时并不是特别清楚数字花园意味着什么（现在可能也是）。
</p>
<p>
我从 2025 年 9 月 17 日开始用手机 Obsidian的<a href="https://github.com/ratiger/obsidian-banyan/tree/main">Banyan</a>插件来写一些文章的草稿或思考过程，但写着写着就变成日记了，而且还是不太正能量的倒垃圾日记。它早期的状态很像数字花园，我也一直有做一个公开的数字花园的想法。
</p>
<p>
在今年 1 月 27 日，<a href="https://www.eltr.ac/">eltrac</a>发布了他的<a href="https://jar.geedea.pro/">新站</a>，觉得这样的形式挺有趣的，而且在网站介绍的第一行有这样一句话：
</p>
<blockquote>
<p>
This is a <a href="https://motherfuckingwebsite.com/">mother-fucking website</a>.
</p>
</blockquote>
<p>
我点进了那个链接，仔细看了一下，非常认同他的观点：
</p>
<ul class="org-ul">
<li>轻量、快速</li>
<li>可用可读可访问</li>
<li>内容优先，而不是装饰有限</li>
</ul>
<p>
于是就按照那个方向，开始着手做一个数字花园。
</p>
<p>
我用起来比较方便的工具，不是 Obsidian 和 Notion，而是 Emacs，所以我就想到了用 org-mode 来做这件事。
</p>
<p>
这套流程虽然不是最优解，但也许是最适合我的。
</p>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="date">Created: 2026-02-03 二 00:25</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
</html>
|
