aboutsummaryrefslogtreecommitdiffstats
path: root/notes/how-do-i-build-this-site.org
blob: cc28f90af020bcf156dc535ebde7d3cdca2033ce (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
#+title: 我是如何构建这个站点的
#+filetags: :technology:emacs:
#+SETUPFILE: ~/niwa/template/setup/minimal.setup
#+EXPORT_FILE_NAME: /home/yingyu5658/niwa/public/how-do-i-build-this-site.html

在[[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 来做这件事。

这套流程虽然不是最优解,但也许是最适合我的。

嗯?你问我为什么不全在 Emacs 里做?因为我讨厌写 Elisp!!!

这门语言一点也不优雅,写多了之后,连语法怪异不堪的 shell 脚本都觉得无比香甜了……