diff options
author | Akshay <[email protected]> | 2020-04-16 09:10:50 +0100 |
---|---|---|
committer | Akshay <[email protected]> | 2020-04-16 09:10:50 +0100 |
commit | 2a778912251874f9b808f82e61244efcd12210aa (patch) | |
tree | 72cd692749c36f068fe22a32ede51a88a65bc759 /docs/posts/static_sites_with_bash/index.html | |
parent | d71a288d944959057064d64ce03cad759a42ba06 (diff) |
rerender with pandoc
Diffstat (limited to 'docs/posts/static_sites_with_bash/index.html')
-rw-r--r-- | docs/posts/static_sites_with_bash/index.html | 148 |
1 files changed, 93 insertions, 55 deletions
diff --git a/docs/posts/static_sites_with_bash/index.html b/docs/posts/static_sites_with_bash/index.html index 1919cea..fff53dc 100644 --- a/docs/posts/static_sites_with_bash/index.html +++ b/docs/posts/static_sites_with_bash/index.html | |||
@@ -37,61 +37,99 @@ | |||
37 | Static Sites With Bash | 37 | Static Sites With Bash |
38 | </h1> | 38 | </h1> |
39 | <div class="post-text"> | 39 | <div class="post-text"> |
40 | <p>After going through a bunch of static site generators | 40 | <!DOCTYPE html> |
41 | (<a href="https://blog.getpelican.com/">pelican</a>, | 41 | <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> |
42 | <a href="https://gohugo.io">hugo</a>, | 42 | <head> |
43 | <a href="https://github.com/icyphox/vite">vite</a>), I decided to roll | 43 | <meta charset="utf-8" /> |
44 | my own. If you are more of the ‘show me the code’ kinda guy, | 44 | <meta name="generator" content="pandoc" /> |
45 | <a href="https://github.com/nerdypepper/site">here</a> you go.</p> | 45 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> |
46 | 46 | <title>static_sites_with_bash</title> | |
47 | <h3 id="Text%20formatting">Text formatting</h3> | 47 | <style> |
48 | 48 | code{white-space: pre-wrap;} | |
49 | <p>I chose to write in markdown, and convert | 49 | span.smallcaps{font-variant: small-caps;} |
50 | to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> | 50 | span.underline{text-decoration: underline;} |
51 | 51 | div.column{display: inline-block; vertical-align: top; width: 50%;} | |
52 | <h3 id="Directory%20structure">Directory structure</h3> | 52 | div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} |
53 | 53 | ul.task-list{list-style: none;} | |
54 | <p>I host my site on GitHub pages, so | 54 | pre > code.sourceCode { white-space: pre; position: relative; } |
55 | <code>docs/</code> has to be the entry point. Markdown formatted posts | 55 | pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } |
56 | go into <code>posts/</code>, get converted into html, and end up in | 56 | pre > code.sourceCode > span:empty { height: 1.2em; } |
57 | <code>docs/index.html</code>, something like this:</p> | 57 | code.sourceCode > span { color: inherit; text-decoration: inherit; } |
58 | 58 | div.sourceCode { margin: 1em 0; } | |
59 | <pre><code>posts=$(ls -t ./posts) # chronological order! | 59 | pre.sourceCode { margin: 0; } |
60 | for f in $posts; do | 60 | @media screen { |
61 | file="./posts/"$f # `ls` mangled our file paths | 61 | div.sourceCode { overflow: auto; } |
62 | echo "generating post $file" | 62 | } |
63 | 63 | @media print { | |
64 | html=$(lowdown "$file") | 64 | pre > code.sourceCode { white-space: pre-wrap; } |
65 | echo -e "html" >> docs/index.html | 65 | pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } |
66 | done | 66 | } |
67 | </code></pre> | 67 | pre.numberSource code |
68 | 68 | { counter-reset: source-line 0; } | |
69 | <h3 id="Assets">Assets</h3> | 69 | pre.numberSource code > span |
70 | 70 | { position: relative; left: -4em; counter-increment: source-line; } | |
71 | <p>Most static site generators recommend dropping image | 71 | pre.numberSource code > span > a:first-child::before |
72 | assets into the site source itself. That does have it’s | 72 | { content: counter(source-line); |
73 | merits, but I prefer hosting images separately:</p> | 73 | position: relative; left: -1em; text-align: right; vertical-align: baseline; |
74 | 74 | border: none; display: inline-block; | |
75 | <pre><code># strip file extension | 75 | -webkit-touch-callout: none; -webkit-user-select: none; |
76 | ext="${1##*.}" | 76 | -khtml-user-select: none; -moz-user-select: none; |
77 | 77 | -ms-user-select: none; user-select: none; | |
78 | # generate a random file name | 78 | padding: 0 4px; width: 4em; |
79 | id=$( cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 2 | head -n 1 ) | 79 | } |
80 | id="$id.$ext" | 80 | pre.numberSource { margin-left: 3em; padding-left: 4px; } |
81 | 81 | div.sourceCode | |
82 | # copy to my file host | 82 | { } |
83 | scp -P 443 "$1" emerald:files/"$id" | 83 | @media screen { |
84 | echo "https://u.peppe.rs/$id" | 84 | pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } |
85 | </code></pre> | 85 | } |
86 | 86 | code span.al { font-weight: bold; } /* Alert */ | |
87 | <h3 id="Templating">Templating</h3> | 87 | code span.an { font-style: italic; } /* Annotation */ |
88 | 88 | code span.cf { font-weight: bold; } /* ControlFlow */ | |
89 | <p><a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> | 89 | code span.co { font-style: italic; } /* Comment */ |
90 | brings the above bits and pieces together (with some extra | 90 | code span.cv { font-style: italic; } /* CommentVar */ |
91 | cruft to avoid javascript). It uses <code>sed</code> to produce nice | 91 | code span.do { font-style: italic; } /* Documentation */ |
92 | titles from the file names (removes underscores, | 92 | code span.dt { text-decoration: underline; } /* DataType */ |
93 | title-case), and <code>date(1)</code> to add the date to each post | 93 | code span.er { font-weight: bold; } /* Error */ |
94 | listing!</p> | 94 | code span.in { font-style: italic; } /* Information */ |
95 | code span.kw { font-weight: bold; } /* Keyword */ | ||
96 | code span.pp { font-weight: bold; } /* Preprocessor */ | ||
97 | code span.wa { font-style: italic; } /* Warning */ | ||
98 | </style> | ||
99 | <!--[if lt IE 9]> | ||
100 | <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> | ||
101 | <![endif]--> | ||
102 | </head> | ||
103 | <body> | ||
104 | <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> | ||
105 | <h3 id="text-formatting">Text formatting</h3> | ||
106 | <p>I chose to write in markdown, and convert to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> | ||
107 | <h3 id="directory-structure">Directory structure</h3> | ||
108 | <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> | ||
109 | <div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1"></a><span class="va">posts=$(</span><span class="fu">ls</span> -t ./posts<span class="va">)</span> <span class="co"># chronological order!</span></span> | ||
110 | <span id="cb1-2"><a href="#cb1-2"></a><span class="kw">for</span> <span class="ex">f</span> in <span class="va">$posts</span><span class="kw">;</span> <span class="kw">do</span></span> | ||
111 | <span id="cb1-3"><a href="#cb1-3"></a> <span class="va">file=</span><span class="st">"./posts/"</span><span class="va">$f</span> <span class="co"># `ls` mangled our file paths</span></span> | ||
112 | <span id="cb1-4"><a href="#cb1-4"></a> <span class="bu">echo</span> <span class="st">"generating post </span><span class="va">$file</span><span class="st">"</span></span> | ||
113 | <span id="cb1-5"><a href="#cb1-5"></a></span> | ||
114 | <span id="cb1-6"><a href="#cb1-6"></a> <span class="va">html=$(</span><span class="ex">lowdown</span> <span class="st">"</span><span class="va">$file</span><span class="st">"</span><span class="va">)</span></span> | ||
115 | <span id="cb1-7"><a href="#cb1-7"></a> <span class="bu">echo</span> -e <span class="st">"html"</span> <span class="op">>></span> docs/index.html</span> | ||
116 | <span id="cb1-8"><a href="#cb1-8"></a><span class="kw">done</span></span></code></pre></div> | ||
117 | <h3 id="assets">Assets</h3> | ||
118 | <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> | ||
119 | <div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1"></a><span class="co"># strip file extension</span></span> | ||
120 | <span id="cb2-2"><a href="#cb2-2"></a><span class="va">ext=</span><span class="st">"</span><span class="va">${1##</span>*.<span class="va">}</span><span class="st">"</span></span> | ||
121 | <span id="cb2-3"><a href="#cb2-3"></a></span> | ||
122 | <span id="cb2-4"><a href="#cb2-4"></a><span class="co"># generate a random file name</span></span> | ||
123 | <span id="cb2-5"><a href="#cb2-5"></a><span class="va">id=$(</span> <span class="fu">cat</span> /dev/urandom <span class="kw">|</span> <span class="fu">tr</span> -dc <span class="st">'a-zA-Z0-9'</span> <span class="kw">|</span> <span class="ex">fold</span> -w 2 <span class="kw">|</span> <span class="fu">head</span> -n 1 <span class="va">)</span></span> | ||
124 | <span id="cb2-6"><a href="#cb2-6"></a><span class="va">id=</span><span class="st">"</span><span class="va">$id</span><span class="st">.</span><span class="va">$ext</span><span class="st">"</span></span> | ||
125 | <span id="cb2-7"><a href="#cb2-7"></a></span> | ||
126 | <span id="cb2-8"><a href="#cb2-8"></a><span class="co"># copy to my file host</span></span> | ||
127 | <span id="cb2-9"><a href="#cb2-9"></a><span class="fu">scp</span> -P 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> | ||
128 | <span id="cb2-10"><a href="#cb2-10"></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> | ||
129 | <h3 id="templating">Templating</h3> | ||
130 | <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> | ||
131 | </body> | ||
132 | </html> | ||
95 | 133 | ||
96 | </div> | 134 | </div> |
97 | 135 | ||