update styles, minify links

author: Akshay <[email protected]> 2020-01-25 17:44:36 +0000
committer: Akshay <[email protected]> 2020-01-25 17:44:36 +0000
commit: 5924e263893ac8c47a22a78c88b46c585fc9e82b (patch)
tree: 2455e8aab84e053d424eeb05f06dbcf079f7c7a6 /docs/posts/static_sites_with_bash/index.html
parent: 313fb789bbc0bf1dcbdff4b258818ec6d895b5a6 (diff)
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 @@
+<!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="nerdypepper">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="a static site {for, by, about} me ">
+    <meta property="og:url" content="https://nerdypepper.tech">
+    <body>
+      <div class="posts">
+        <div class="post">
+          <div class="date">
+            23/11 2019
+            <span class="commit-hash">
+              <a href="https://github.com/nerdypepper/site/blob/master/posts/static_sites_with_bash.md
+" style="text-decoration: none">
+                d1faa7e
+              </a>
+            </span>
+          </div>
+          <span class="post-title">
+            Static Sites With Bash
+          </span>
+          <div class="post-text">
+            <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 &#8216;show me the code&#8217; kinda guy,
+<a href="https://github.com/nerdypepper/site">here</a> you go.</p>
+<p><strong>Text formatting</strong>: I chose to write in markdown, and convert
+to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p>
+<p><strong>Directory structure</strong>: 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>
+<pre><code>posts=$(ls -t ./posts)     # chronological order!
+for f in $posts; do
+    file=&quot;./posts/&quot;$f      # `ls` mangled our file paths
+    echo &quot;generating post $file&quot;
+    html=$(lowdown &quot;$file&quot;)
+    echo -e &quot;html&quot; &gt;&gt; docs/index.html
+done
+</code></pre>
+<p><strong>Assets</strong>: Most static site generators recommend dropping image
+assets into the site source itself. That does have it&#8217;s
+merits, but I prefer hosting images separately:</p>
+<pre><code># strip file extension
+ext=&quot;${1##*.}&quot;
+# generate a random file name
+id=$( cat /dev/urandom | tr -dc &#39;a-zA-Z0-9&#39; | fold -w 2 | head -n 1 )
+id=&quot;$id.$ext&quot;
+# copy to my file host
+scp -P 443 &quot;$1&quot; emerald:files/&quot;$id&quot; 
+echo &quot;https://files.nerdypepper.tech/$id&quot;
+</code></pre>
+<p><strong>Templating</strong>:
+<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>
+          </div>
+          <a href="/" class="post-end-link">⟵ Back</a>
+          <div class="separator"></div>
+        </div>
+      </div>
+    </body>
+</html>
author	Akshay <[email protected]>	2020-01-25 17:44:36 +0000
committer	Akshay <[email protected]>	2020-01-25 17:44:36 +0000
commit	5924e263893ac8c47a22a78c88b46c585fc9e82b (patch)
tree	2455e8aab84e053d424eeb05f06dbcf079f7c7a6 /docs/posts/static_sites_with_bash/index.html
parent	313fb789bbc0bf1dcbdff4b258818ec6d895b5a6 (diff)

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
	33	my own. If you are more of the ‘show me the code’ 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
	37	to 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
	41	go 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!
	45	for f in $posts; do
	46	file="./posts/"$f # `ls` mangled our file paths
	47	echo "generating post $file"
	48
	49	html=$(lowdown "$file")
	50	echo -e "html" >> docs/index.html
	51	done
	52	</code></pre>
	53
	54	<p><strong>Assets</strong>: Most static site generators recommend dropping image
	55	assets into the site source itself. That does have it’s
	56	merits, but I prefer hosting images separately:</p>
	57
	58	<pre><code># strip file extension
	59	ext="${1##*.}"
	60
	61	# generate a random file name
	62	id=$( cat /dev/urandom \| tr -dc 'a-zA-Z0-9' \| fold -w 2 \| head -n 1 )
	63	id="$id.$ext"
	64
	65	# copy to my file host
	66	scp -P 443 "$1" emerald:files/"$id"
	67	echo "https://files.nerdypepper.tech/$id"
	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>
	72	brings the above bits and pieces together (with some extra
	73	cruft to avoid javascript). It uses <code>sed</code> to produce nice
	74	titles from the file names (removes underscores,
	75	title-case), and <code>date(1)</code> to add the date to each post
	76	listing!</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>