aboutsummaryrefslogtreecommitdiff
path: root/docs/posts/static_sites_with_bash
diff options
context:
space:
mode:
Diffstat (limited to 'docs/posts/static_sites_with_bash')
-rw-r--r--docs/posts/static_sites_with_bash/index.html84
1 files changed, 84 insertions, 0 deletions
diff --git a/docs/posts/static_sites_with_bash/index.html b/docs/posts/static_sites_with_bash/index.html
new file mode 100644
index 0000000..0605147
--- /dev/null
+++ b/docs/posts/static_sites_with_bash/index.html
@@ -0,0 +1,84 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <meta charset="UTF-8">
6 <meta name="viewport" content="initial-scale=1">
7 <meta content="#ffffff" name="theme-color">
8 <meta name="HandheldFriendly" content="true">
9 <meta property="og:title" content="nerdypepper">
10 <meta property="og:type" content="website">
11 <meta property="og:description" content="a static site {for, by, about} me ">
12 <meta property="og:url" content="https://nerdypepper.tech">
13 <body>
14 <div class="posts">
15 <div class="post">
16 <div class="date">
17 23/11 2019
18 <span class="commit-hash">
19 <a href="https://github.com/nerdypepper/site/blob/master/posts/static_sites_with_bash.md
20" style="text-decoration: none">
21 d1faa7e
22 </a>
23 </span>
24 </div>
25 <span class="post-title">
26 Static Sites With Bash
27 </span>
28 <div class="post-text">
29 <p>After going through a bunch of static site generators
30(<a href="https://blog.getpelican.com/">pelican</a>,
31<a href="https://gohugo.io">hugo</a>,
32<a href="https://github.com/icyphox/vite">vite</a>), I decided to roll
33my own. If you are more of the &#8216;show me the code&#8217; kinda guy,
34<a href="https://github.com/nerdypepper/site">here</a> you go.</p>
35
36<p><strong>Text formatting</strong>: I chose to write in markdown, and convert
37to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p>
38
39<p><strong>Directory structure</strong>: I host my site on GitHub pages, so
40<code>docs/</code> has to be the entry point. Markdown formatted posts
41go into <code>posts/</code>, get converted into html, and end up in
42<code>docs/index.html</code>, something like this:</p>
43
44<pre><code>posts=$(ls -t ./posts) # chronological order!
45for f in $posts; do
46 file=&quot;./posts/&quot;$f # `ls` mangled our file paths
47 echo &quot;generating post $file&quot;
48
49 html=$(lowdown &quot;$file&quot;)
50 echo -e &quot;html&quot; &gt;&gt; docs/index.html
51done
52</code></pre>
53
54<p><strong>Assets</strong>: Most static site generators recommend dropping image
55assets into the site source itself. That does have it&#8217;s
56merits, but I prefer hosting images separately:</p>
57
58<pre><code># strip file extension
59ext=&quot;${1##*.}&quot;
60
61# generate a random file name
62id=$( cat /dev/urandom | tr -dc &#39;a-zA-Z0-9&#39; | fold -w 2 | head -n 1 )
63id=&quot;$id.$ext&quot;
64
65# copy to my file host
66scp -P 443 &quot;$1&quot; emerald:files/&quot;$id&quot;
67echo &quot;https://files.nerdypepper.tech/$id&quot;
68</code></pre>
69
70<p><strong>Templating</strong>:
71<a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a>
72brings the above bits and pieces together (with some extra
73cruft to avoid javascript). It uses <code>sed</code> to produce nice
74titles from the file names (removes underscores,
75title-case), and <code>date(1)</code> to add the date to each post
76listing!</p>
77
78 </div>
79 <a href="/" class="post-end-link">⟵ Back</a>
80 <div class="separator"></div>
81 </div>
82 </div>
83 </body>
84</html>