diff options
Diffstat (limited to 'docs/index.html')
-rw-r--r-- | docs/index.html | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html index c27cc06..f0282e1 100644 --- a/docs/index.html +++ b/docs/index.html | |||
@@ -23,6 +23,64 @@ | |||
23 | 23 | ||
24 | <details class="post"> | 24 | <details class="post"> |
25 | <summary> | 25 | <summary> |
26 | <div class="date">23/11 2019</div> | ||
27 | <span class="post-link">Static Sites With Bash</span> | ||
28 | </summary> | ||
29 | <div class="post-text"> | ||
30 | <p>After going through a bunch of static site generators | ||
31 | (<a href="https://blog.getpelican.com/">pelican</a>, | ||
32 | <a href="https://gohugo.io">hugo</a>, | ||
33 | <a href="https://github.com/icyphox/vite">vite</a>), I decided to roll | ||
34 | my own. If you are more of the ‘show me the code’ kinda guy, | ||
35 | <a href="https://github.com/nerdypepper/site">here</a> you go.</p> | ||
36 | |||
37 | <p><strong>Text formatting</strong>: I chose to write in markdown, and convert | ||
38 | to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> | ||
39 | |||
40 | <p><strong>Directory structure</strong>: I host my site on GitHub pages, so | ||
41 | <code>docs/</code> has to be the entry point. Markdown formatted posts | ||
42 | go into <code>posts/</code>, get converted into html, and end up in | ||
43 | <code>docs/index.html</code>, something like this:</p> | ||
44 | |||
45 | <pre><code>posts=$(ls -t ./posts) # chronological order! | ||
46 | for f in $posts; do | ||
47 | file="./posts/"$f # `ls` mangled our file paths | ||
48 | echo "generating post $file" | ||
49 | |||
50 | html=$(lowdown "$file") | ||
51 | echo -e "html" >> docs/index.html | ||
52 | done | ||
53 | </code></pre> | ||
54 | |||
55 | <p><strong>Assets</strong>: Most static site generators recommend dropping image | ||
56 | assets into the site source itself. That does have it’s | ||
57 | merits, but I prefer hosting images separately:</p> | ||
58 | |||
59 | <pre><code># strip file extension | ||
60 | ext="${1##*.}" | ||
61 | |||
62 | # generate a random file name | ||
63 | id=$( cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 2 | head -n 1 ) | ||
64 | id="$id.$ext" | ||
65 | |||
66 | # copy to my file host | ||
67 | scp -P 443 "$1" emerald:files/"$id" | ||
68 | echo "https://files.nerdypepper.tech/$id" | ||
69 | </code></pre> | ||
70 | |||
71 | <p><strong>Templating</strong>: | ||
72 | <a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> | ||
73 | brings the above bits and pieces together (with some extra | ||
74 | cruft to avoid javascript). It uses <code>sed</code> to produce nice | ||
75 | titles from the file names (removes underscores, | ||
76 | title-case), and <code>date(1)</code> to add the date to each post | ||
77 | listing!</p> | ||
78 | <div class=separator></div> | ||
79 | </div> | ||
80 | </details> | ||
81 | |||
82 | <details class="post"> | ||
83 | <summary> | ||
26 | <div class="date">07/11 2019</div> | 84 | <div class="date">07/11 2019</div> |
27 | <span class="post-link">My Setup</span> | 85 | <span class="post-link">My Setup</span> |
28 | </summary> | 86 | </summary> |