aboutsummaryrefslogtreecommitdiff
path: root/docs/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/index.html')
-rw-r--r--docs/index.html58
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
34my own. If you are more of the &#8216;show me the code&#8217; 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
38to 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
42go 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!
46for f in $posts; do
47 file=&quot;./posts/&quot;$f # `ls` mangled our file paths
48 echo &quot;generating post $file&quot;
49
50 html=$(lowdown &quot;$file&quot;)
51 echo -e &quot;html&quot; &gt;&gt; docs/index.html
52done
53</code></pre>
54
55<p><strong>Assets</strong>: Most static site generators recommend dropping image
56assets into the site source itself. That does have it&#8217;s
57merits, but I prefer hosting images separately:</p>
58
59<pre><code># strip file extension
60ext=&quot;${1##*.}&quot;
61
62# generate a random file name
63id=$( cat /dev/urandom | tr -dc &#39;a-zA-Z0-9&#39; | fold -w 2 | head -n 1 )
64id=&quot;$id.$ext&quot;
65
66# copy to my file host
67scp -P 443 &quot;$1&quot; emerald:files/&quot;$id&quot;
68echo &quot;https://files.nerdypepper.tech/$id&quot;
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>
73brings the above bits and pieces together (with some extra
74cruft to avoid javascript). It uses <code>sed</code> to produce nice
75titles from the file names (removes underscores,
76title-case), and <code>date(1)</code> to add the date to each post
77listing!</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>