diff options
| 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.html | |
| parent | 313fb789bbc0bf1dcbdff4b258818ec6d895b5a6 (diff) | |
update styles, minify links
Diffstat (limited to 'docs/posts/static_sites_with_bash.html')
| -rw-r--r-- | docs/posts/static_sites_with_bash.html | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/docs/posts/static_sites_with_bash.html b/docs/posts/static_sites_with_bash.html deleted file mode 100644 index 5fdfcfe..0000000 --- a/docs/posts/static_sites_with_bash.html +++ /dev/null | |||
| @@ -1,76 +0,0 @@ | |||
| 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">23/11 2019</div> | ||
| 17 | <span style="font-size: 2rem; font-weight: 600"> | ||
| 18 | Static Sites With Bash | ||
| 19 | </span> | ||
| 20 | <div class="post-text"> | ||
| 21 | <p>After going through a bunch of static site generators | ||
| 22 | (<a href="https://blog.getpelican.com/">pelican</a>, | ||
| 23 | <a href="https://gohugo.io">hugo</a>, | ||
| 24 | <a href="https://github.com/icyphox/vite">vite</a>), I decided to roll | ||
| 25 | my own. If you are more of the ‘show me the code’ kinda guy, | ||
| 26 | <a href="https://github.com/nerdypepper/site">here</a> you go.</p> | ||
| 27 | |||
| 28 | <p><strong>Text formatting</strong>: I chose to write in markdown, and convert | ||
| 29 | to html with <a href="https://kristaps.bsd.lv/lowdown/">lowdown</a>.</p> | ||
| 30 | |||
| 31 | <p><strong>Directory structure</strong>: I host my site on GitHub pages, so | ||
| 32 | <code>docs/</code> has to be the entry point. Markdown formatted posts | ||
| 33 | go into <code>posts/</code>, get converted into html, and end up in | ||
| 34 | <code>docs/index.html</code>, something like this:</p> | ||
| 35 | |||
| 36 | <pre><code>posts=$(ls -t ./posts) # chronological order! | ||
| 37 | for f in $posts; do | ||
| 38 | file="./posts/"$f # `ls` mangled our file paths | ||
| 39 | echo "generating post $file" | ||
| 40 | |||
| 41 | html=$(lowdown "$file") | ||
| 42 | echo -e "html" >> docs/index.html | ||
| 43 | done | ||
| 44 | </code></pre> | ||
| 45 | |||
| 46 | <p><strong>Assets</strong>: Most static site generators recommend dropping image | ||
| 47 | assets into the site source itself. That does have it’s | ||
| 48 | merits, but I prefer hosting images separately:</p> | ||
| 49 | |||
| 50 | <pre><code># strip file extension | ||
| 51 | ext="${1##*.}" | ||
| 52 | |||
| 53 | # generate a random file name | ||
| 54 | id=$( cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 2 | head -n 1 ) | ||
| 55 | id="$id.$ext" | ||
| 56 | |||
| 57 | # copy to my file host | ||
| 58 | scp -P 443 "$1" emerald:files/"$id" | ||
| 59 | echo "https://files.nerdypepper.tech/$id" | ||
| 60 | </code></pre> | ||
| 61 | |||
| 62 | <p><strong>Templating</strong>: | ||
| 63 | <a href="https://github.com/NerdyPepper/site/blob/master/generate.sh"><code>generate.sh</code></a> | ||
| 64 | brings the above bits and pieces together (with some extra | ||
| 65 | cruft to avoid javascript). It uses <code>sed</code> to produce nice | ||
| 66 | titles from the file names (removes underscores, | ||
| 67 | title-case), and <code>date(1)</code> to add the date to each post | ||
| 68 | listing!</p> | ||
| 69 | |||
| 70 | </div> | ||
| 71 | <a href="/index.html" class="post-end-link">← Back</a> | ||
| 72 | <div class="separator"></div> | ||
| 73 | </div> | ||
| 74 | </div> | ||
| 75 | </body> | ||
| 76 | </html> | ||