diff options
-rw-r--r-- | posts/static_sites_with_bash.md | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/posts/static_sites_with_bash.md b/posts/static_sites_with_bash.md new file mode 100644 index 0000000..d87cefd --- /dev/null +++ b/posts/static_sites_with_bash.md | |||
@@ -0,0 +1,50 @@ | |||
1 | After going through a bunch of static site generators | ||
2 | ([pelican](https://blog.getpelican.com/), | ||
3 | [hugo](https://gohugo.io), | ||
4 | [vite](https://github.com/icyphox/vite)), I decided to roll | ||
5 | my own. If you are more of the 'show me the code' kinda guy, | ||
6 | [here](https://github.com/nerdypepper/site) you go. | ||
7 | |||
8 | **Text formatting**: I chose to write in markdown, and convert | ||
9 | to html with [lowdown](https://kristaps.bsd.lv/lowdown/). | ||
10 | |||
11 | **Directory structure**: I host my site on GitHub pages, so | ||
12 | `docs/` has to be the entry point. Markdown formatted posts | ||
13 | go into `posts/`, get converted into html, and end up in | ||
14 | `docs/index.html`, something like this: | ||
15 | |||
16 | ``` | ||
17 | posts=$(ls -t ./posts) # chronological order! | ||
18 | for f in $posts; do | ||
19 | file="./posts/"$f # `ls` mangled our file paths | ||
20 | echo "generating post $file" | ||
21 | |||
22 | html=$(lowdown "$file") | ||
23 | echo -e "html" >> docs/index.html | ||
24 | done | ||
25 | ``` | ||
26 | |||
27 | **Assets**: Most static site generators recommend dropping image | ||
28 | assets into the site source itself. That does have it's | ||
29 | merits, but I prefer hosting images separately: | ||
30 | |||
31 | ``` | ||
32 | # strip file extension | ||
33 | ext="${1##*.}" | ||
34 | |||
35 | # generate a random file name | ||
36 | id=$( cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 2 | head -n 1 ) | ||
37 | id="$id.$ext" | ||
38 | |||
39 | # copy to my file host | ||
40 | scp -P 443 "$1" emerald:files/"$id" | ||
41 | echo "https://files.nerdypepper.tech/$id" | ||
42 | ``` | ||
43 | |||
44 | **Templating**: | ||
45 | [`generate.sh`](https://github.com/NerdyPepper/site/blob/master/generate.sh) | ||
46 | brings the above bits and pieces together (with some extra | ||
47 | cruft to avoid javascript). It uses `sed` to produce nice | ||
48 | titles from the file names (removes underscores, | ||
49 | title-case), and `date(1)` to add the date to each post | ||
50 | listing! | ||