diff options
author | Akshay <[email protected]> | 2023-02-12 06:43:49 +0000 |
---|---|---|
committer | Akshay <[email protected]> | 2023-02-12 06:43:49 +0000 |
commit | 366df8852f503523cc4f9046d82ba9a99dd51d7f (patch) | |
tree | 635884dd5700cdc2a22a8885031aa67816bbe1b0 /docs/posts/static_sites_with_bash | |
parent | 57a1fc656e05e1fcf07e4cff3dc988c6b5c2bc59 (diff) |
new art: lapse
Diffstat (limited to 'docs/posts/static_sites_with_bash')
-rw-r--r-- | docs/posts/static_sites_with_bash/index.html | 36 |
1 files changed, 27 insertions, 9 deletions
diff --git a/docs/posts/static_sites_with_bash/index.html b/docs/posts/static_sites_with_bash/index.html index 07313be..6921529 100644 --- a/docs/posts/static_sites_with_bash/index.html +++ b/docs/posts/static_sites_with_bash/index.html | |||
@@ -28,7 +28,7 @@ | |||
28 | 23/11 — 2019 | 28 | 23/11 — 2019 |
29 | <div class="stats"> | 29 | <div class="stats"> |
30 | <span class="stats-number"> | 30 | <span class="stats-number"> |
31 | 21.17 | 31 | 21.18 |
32 | </span> | 32 | </span> |
33 | <span class="stats-unit">cm</span> | 33 | <span class="stats-unit">cm</span> |
34 |   | 34 |   |
@@ -42,12 +42,22 @@ | |||
42 | Static Sites With Bash | 42 | Static Sites With Bash |
43 | </h1> | 43 | </h1> |
44 | <div class="post-text"> | 44 | <div class="post-text"> |
45 | <p>After going through a bunch of static site generators (<a href="https://blog.getpelican.com/">pelican</a>, <a href="https://gohugo.io">hugo</a>, <a href="https://github.com/icyphox/vite">vite</a>), I decided to roll my own. If you are more of the ‘show me the code’ kinda guy, <a href="https://github.com/nerdypepper/site">here</a> you go.</p> | 45 | <p>After going through a bunch of static site generators (<a |
46 | href="https://blog.getpelican.com/">pelican</a>, <a | ||
47 | href="https://gohugo.io">hugo</a>, <a | ||
48 | href="https://github.com/icyphox/vite">vite</a>), I decided to roll my | ||
49 | own. If you are more of the ‘show me the code’ kinda guy, <a | ||
50 | href="https://github.com/nerdypepper/site">here</a> you go.</p> | ||
46 | <h3 id="text-formatting">Text formatting</h3> | 51 | <h3 id="text-formatting">Text formatting</h3> |
47 | <p>I chose to write in markdown, and convert to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> | 52 | <p>I chose to write in markdown, and convert to html with <a |
53 | href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> | ||
48 | <h3 id="directory-structure">Directory structure</h3> | 54 | <h3 id="directory-structure">Directory structure</h3> |
49 | <p>I host my site on GitHub pages, so <code>docs/</code> has to be the entry point. Markdown formatted posts go into <code>posts/</code>, get converted into html, and end up in <code>docs/index.html</code>, something like this:</p> | 55 | <p>I host my site on GitHub pages, so <code>docs/</code> has to be the |
50 | <div class="sourceCode" id="cb1"><pre class="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> | 56 | entry point. Markdown formatted posts go into <code>posts/</code>, get |
57 | converted into html, and end up in <code>docs/index.html</code>, | ||
58 | something like this:</p> | ||
59 | <div class="sourceCode" id="cb1"><pre | ||
60 | class="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> | ||
51 | <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> | 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> |
52 | <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> | 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> |
53 | <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> | 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> |
@@ -56,19 +66,27 @@ | |||
56 | <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> | 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> |
57 | <span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="cf">done</span></span></code></pre></div> | 67 | <span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="cf">done</span></span></code></pre></div> |
58 | <h3 id="assets">Assets</h3> | 68 | <h3 id="assets">Assets</h3> |
59 | <p>Most static site generators recommend dropping image assets into the site source itself. That does have it’s merits, but I prefer hosting images separately:</p> | 69 | <p>Most static site generators recommend dropping image assets into the |
60 | <div class="sourceCode" id="cb2"><pre class="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> | 70 | site source itself. That does have it’s merits, but I prefer hosting |
71 | images separately:</p> | ||
72 | <div class="sourceCode" id="cb2"><pre | ||
73 | class="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> | ||
61 | <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> | 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> |
62 | <span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span> | 75 | <span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span> |
63 | <span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="co"># generate a random file name</span></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> |
64 | <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="ex">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> | 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> |
65 | <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> | 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> |
66 | <span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a></span> | 79 | <span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a></span> |
67 | <span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a><span class="co"># copy to my file host</span></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> |
68 | <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> | 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> |
69 | <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> | 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> |
70 | <h3 id="templating">Templating</h3> | 83 | <h3 id="templating">Templating</h3> |
71 | <p><a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> brings the above bits and pieces together (with some extra cruft to avoid javascript). It uses <code>sed</code> to produce nice titles from the file names (removes underscores, title-case), and <code>date(1)</code> to add the date to each post listing!</p> | 84 | <p><a |
85 | href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> | ||
86 | brings the above bits and pieces together (with some extra cruft to | ||
87 | avoid javascript). It uses <code>sed</code> to produce nice titles from | ||
88 | the file names (removes underscores, title-case), and | ||
89 | <code>date(1)</code> to add the date to each post listing!</p> | ||
72 | 90 | ||
73 | </div> | 91 | </div> |
74 | 92 | ||