1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<meta content="#ffffff" name="theme-color">
<meta name="HandheldFriendly" content="true">
<meta property="og:title" content="Static Sites With Bash">
<meta property="og:type" content="website">
<meta property="og:description" content="a static site {for, by, about} me ">
<meta property="og:url" content="https://peppe.rs">
<link rel="icon" type="image/x-icon" href="/favicon.png">
<title>Static Sites With Bash · peppe.rs</title>
<body>
<div class="posts">
<div class="post">
<a href="/" class="post-end-link">⟵ Back</a>
<a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/static_sites_with_bash.md
">View Raw</a>
<div class="separator"></div>
<div class="date">
23/11 — 2019
<div class="stats">
<span class="stats-number">
21.17
</span>
<span class="stats-unit">cm</span>
 
<span class="stats-number">
1.5
</span>
<span class="stats-unit">min</span>
</div>
</div>
<h1>
Static Sites With Bash
</h1>
<div class="post-text">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>static_sites_with_bash</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { font-weight: bold; } /* Alert */
code span.an { font-style: italic; } /* Annotation */
code span.cf { font-weight: bold; } /* ControlFlow */
code span.co { font-style: italic; } /* Comment */
code span.cv { font-style: italic; } /* CommentVar */
code span.do { font-style: italic; } /* Documentation */
code span.dt { text-decoration: underline; } /* DataType */
code span.er { font-weight: bold; } /* Error */
code span.in { font-style: italic; } /* Information */
code span.kw { font-weight: bold; } /* Keyword */
code span.pp { font-weight: bold; } /* Preprocessor */
code span.wa { font-style: italic; } /* Warning */
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<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>
<h3 id="text-formatting">Text formatting</h3>
<p>I chose to write in markdown, and convert to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p>
<h3 id="directory-structure">Directory structure</h3>
<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>
<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>
<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>
<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>
<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>
<span id="cb1-5"><a href="#cb1-5"></a></span>
<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>
<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>
<span id="cb1-8"><a href="#cb1-8"></a><span class="kw">done</span></span></code></pre></div>
<h3 id="assets">Assets</h3>
<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>
<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>
<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>
<span id="cb2-3"><a href="#cb2-3"></a></span>
<span id="cb2-4"><a href="#cb2-4"></a><span class="co"># generate a random file name</span></span>
<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>
<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>
<span id="cb2-7"><a href="#cb2-7"></a></span>
<span id="cb2-8"><a href="#cb2-8"></a><span class="co"># copy to my file host</span></span>
<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>
<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>
<h3 id="templating">Templating</h3>
<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>
</body>
</html>
</div>
<div class=intro>
Hi. <a href=https://peppe.rs/index.xml class=feed-button>Subscribe</a>
<p>I'm Akshay, I go by nerd or nerdypepper on the internet.</p>
<p>
I am a compsci undergrad, Rust programmer and an enthusiastic Vimmer.
I write open-source stuff to pass time. I also design fonts: scientifica, curie.
</p>
<p>Send me a mail at [email protected] or a message at [email protected].</p>
</div>
<a href="/" class="post-end-link">⟵ Back</a>
<a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/static_sites_with_bash.md
">View Raw</a>
</div>
</div>
</body>
</html>
|
