oppi.li
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <link rel="stylesheet" href="/syntax.css">
6 <meta charset="UTF-8">
7 <meta name="viewport" content="initial-scale=1">
8 <meta content="#ffffff" name="theme-color">
9 <meta name="HandheldFriendly" content="true">
10 <meta property="og:title" content="Static Sites With Bash">
11 <meta property="og:type" content="website">
12 <meta property="og:description" content="a static site {for, by, about} me ">
13 <meta property="og:url" content="https://oppi.li/posts/static_sites_with_bash">
14 <link rel="icon" type="image/x-icon" href="/favicon.png">
15 <title>Static Sites With Bash · oppi.li</title>
16 <body>
17 <div class="posts">
18 <div class="post">
19 <a href="/" class="post-end-link">Home</a>
20 <span>/</span>
21 <a href="/posts" class="post-end-link">Posts</a>
22 <span>/</span>
23 <a class="post-end-link">Static Sites With Bash</a>
24 <a class="stats post-end-link" href="https://tangled.sh/@oppi.li/site/raw/main/posts/static_sites_with_bash.md
25">View Raw</a>
26 <div class="separator"></div>
27 <div class="date">
28 22/11 — 2019
29 <div class="stats">
30 <span class="stats-number">
31 21.18
32 </span>
33 <span class="stats-unit">cm</span>
34  
35 <span class="stats-number">
36 1.5
37 </span>
38 <span class="stats-unit">min</span>
39 </div>
40 </div>
41 <h1>
42 Static Sites With Bash
43 </h1>
44 <div class="post-text">
45 <p>After going through a bunch of static site generators (<a
46href="https://blog.getpelican.com/">pelican</a>, <a
47href="https://gohugo.io">hugo</a>, <a
48href="https://github.com/icyphox/vite">vite</a>), I decided to roll my
49own. If you are more of the ‘show me the code’ kinda guy, <a
50href="https://github.com/nerdypepper/site">here</a> you go.</p>
51<h3 id="text-formatting">Text formatting</h3>
52<p>I chose to write in markdown, and convert to html with <a
53href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p>
54<h3 id="directory-structure">Directory structure</h3>
55<p>I host my site on GitHub pages, so <code>docs/</code> has to be the
56entry point. Markdown formatted posts go into <code>posts/</code>, get
57converted into html, and end up in <code>docs/index.html</code>,
58something like this:</p>
59<div class="sourceCode" id="cb1"><pre
60class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="va">posts</span><span class="op">=</span><span class="va">$(</span><span class="fu">ls</span> <span class="at">-t</span> ./posts<span class="va">)</span> <span class="co"># chronological order!</span></span>
61<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="cf">for</span> f <span class="kw">in</span> <span class="va">$posts</span><span class="kw">;</span> <span class="cf">do</span></span>
62<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="va">file</span><span class="op">=</span><span class="st">"./posts/"</span><span class="va">$f</span> <span class="co"># `ls` mangled our file paths</span></span>
63<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="bu">echo</span> <span class="st">"generating post </span><span class="va">$file</span><span class="st">"</span></span>
64<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span>
65<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="va">html</span><span class="op">=</span><span class="va">$(</span><span class="ex">lowdown</span> <span class="st">"</span><span class="va">$file</span><span class="st">"</span><span class="va">)</span></span>
66<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="bu">echo</span> <span class="at">-e</span> <span class="st">"html"</span> <span class="op">>></span> docs/index.html</span>
67<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="cf">done</span></span></code></pre></div>
68<h3 id="assets">Assets</h3>
69<p>Most static site generators recommend dropping image assets into the
70site source itself. That does have it’s merits, but I prefer hosting
71images separately:</p>
72<div class="sourceCode" id="cb2"><pre
73class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co"># strip file extension</span></span>
74<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="va">ext</span><span class="op">=</span><span class="st">"</span><span class="va">${1</span><span class="op">##</span><span class="pp">*</span>.<span class="va">}</span><span class="st">"</span></span>
75<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span>
76<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="co"># generate a random file name</span></span>
77<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="va">id</span><span class="op">=</span><span class="va">$(</span> <span class="fu">cat</span> /dev/urandom <span class="kw">|</span> <span class="fu">tr</span> <span class="at">-dc</span> <span class="st">'a-zA-Z0-9'</span> <span class="kw">|</span> <span class="fu">fold</span> <span class="at">-w</span> 2 <span class="kw">|</span> <span class="fu">head</span> <span class="at">-n</span> 1 <span class="va">)</span></span>
78<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="va">id</span><span class="op">=</span><span class="st">"</span><span class="va">$id</span><span class="st">.</span><span class="va">$ext</span><span class="st">"</span></span>
79<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a></span>
80<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a><span class="co"># copy to my file host</span></span>
81<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a><span class="fu">scp</span> <span class="at">-P</span> 443 <span class="st">"</span><span class="va">$1</span><span class="st">"</span> emerald:files/<span class="st">"</span><span class="va">$id</span><span class="st">"</span> </span>
82<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a><span class="bu">echo</span> <span class="st">"https://u.peppe.rs/</span><span class="va">$id</span><span class="st">"</span></span></code></pre></div>
83<h3 id="templating">Templating</h3>
84<p><a
85href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a>
86brings the above bits and pieces together (with some extra cruft to
87avoid javascript). It uses <code>sed</code> to produce nice titles from
88the file names (removes underscores, title-case), and
89<code>date(1)</code> to add the date to each post listing!</p>
90
91 </div>
92
93 <div class="intro">
94 Hi.
95 <div class="hot-links">
96 <a href="/index.xml" class="feed-button">Subscribe</a>
97 </div>
98 <p>I'm Akshay, programmer, pixel-artist & programming-language enthusiast.</p>
99 <p>I am currently building <a href="https://tangled.sh">tangled.sh</a> — a new social-enabled code-collaboration platform.</p>
100 <p>Reach out at oppili@libera.chat.</p>
101 </div>
102
103 <a href="/" class="post-end-link">Home</a>
104 <span>/</span>
105 <a href="/posts" class="post-end-link">Posts</a>
106 <span>/</span>
107 <a class="post-end-link">Static Sites With Bash</a>
108 <a class="stats post-end-link" href="https://tangled.sh/@oppi.li/site/raw/main/posts/static_sites_with_bash.md
109">View Raw</a>
110 </div>
111 </div>
112 </body>
113</html>