index.html (5225B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <link rel="stylesheet" href="/style.css" type="text/css"> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" type="text/css" href="/style.css"> 9 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏕️</text></svg>"> 10 <title></title> 11 </head> 12 <body> 13 <div id="page-wrapper"> 14 <div id="header" role="banner"> 15 <header class="banner"> 16 <div id="banner-text"> 17 <span class="banner-title"><a href="/">beauhilton</a></span> 18 </div> 19 </header> 20 <nav> 21 <a href="/about">about</a> 22 <a href="/now">now</a> 23 <a href="/thanks">thanks</a> 24 <a href="/posts">posts</a> 25 <a href="https://notes.beauhilton.com">notes</a> 26 <a href="https://talks.beauhilton.com">talks</a> 27 <a href="https://git.beauhilton.com">git</a> 28 <a href="/contact">contact</a> 29 <a href="/atom.xml">rss</a> 30 </nav> 31 </div> 32 <main> 33 <h1> 34 Colophon 35 </h1> 36 <p> 37 This site is hosted on an <a href="https://www.openbsd.org/">OpenBSD</a> server on <a href="https://vultr.com">vultr</a>, built using plain text files 38 processed by <a href="https://soupault.app">soupault</a> and auto-<a href="https://en.wikipedia.org/wiki/Rsync">rsync’d</a> to the server as 39 part of a pre-commit hook. 40 </p> 41 <p> 42 The source files are available on <a href="https://git.beauhilton.com/site/">my git server</a> and <a href="https://github.com/cbeauhilton/beauhilton.com">GitHub</a>. 43 </p> 44 <p> 45 I also use <a href="https://eradman.com/entrproject/">entr</a> (on 46 Nix) or <a href="https://github.com/grego/caretaker">caretaker</a> (on 47 Arch) during development to auto-rebuild as I edit the source files. 48 </p> 49 <p> 50 Regarding the design, the focus is on simplicity and a small 51 footprint. It’s the kind thing to do, for the user and the planet. No 52 Javascript, just static HTML. I used to specify fonts, e.g. one of my 53 favorites, <a href="https://www.ibm.com/plex/">IBM Plex</a>, but in an 54 effort to keep things light and tidy, I now just use system fonts. 55 </p> 56 <p> 57 <a href="https://talks.beauhilton.com">https://talks.beauhilton.com</a> and 58 <a href="https://notes.beauhilton.com">https://notes.beauhilton.com</a> 59 are not part of the website proper, but are rather generated using 60 GitHub Pages. The talks are built using <a href="https://sli.dev/">slidev</a>, which translates markdown files into 61 beautiful web-first slide decks (I now only use PowerPoint under great 62 duress), and the notes use <a href="https://quartz.jzhao.xyz/">quartz</a>, which translates <a href="https://obsidian.md/">Obsidian</a>-style markdown files (see a 63 theme here?) into a website of interconnected notes a la <a href="https://en.wikipedia.org/wiki/Zettelkasten">Zettelkasten</a>. 64 </p> 65 <h2> 66 Nix Workflow 67 </h2> 68 <p> 69 As of 2023-10-10 or so, I use a Nix-based workflow with flakes and <a href="https://devenv.sh/">devenv.sh</a>. The basic steps are similar to 70 what is included below in the Non-Nix section, though more conveniently 71 packaged and portable. 72 </p> 73 <p> 74 It’s delightful. 75 </p> 76 <p> 77 I may write it up at some point, but for now, look at <a href="https://git.beauhilton.com/site/file/flake.nix.html">flake.nix</a> 78 in the source code. One of the great things about Nix is that it’s 79 self-documenting and self-contained. 80 </p> 81 <p> 82 On my non-Nix laptop running Arch, I still use the workflow below, 83 though at some point I’ll probably install Nix on Arch and unify my 84 approach. 85 </p> 86 <h2> 87 Non-Nix Workflow 88 </h2> 89 <p> 90 The workflow is terminal-based and pretty basic. 91 </p> 92 <p> 93 It amounts to: 94 </p> 95 <pre tabindex="0"><code class="language-shell">cd src/site 96 ./sh.sh 97 $EDITOR site/gulag_archipelago.md 98 </code></pre> 99 <p> 100 <code>sh.sh</code> contains the following: 101 </p> 102 <pre tabindex="0"><code class="language-shell">$TERMINAL -e caretaker &>/dev/null & disown 103 $TERMINAL -e python3 -m http.server --directory build &>/dev/null & disown 104 $TERMINAL -e $BROWSER http://localhost:8000 &>/dev/null & disown 105 </code></pre> 106 <p> 107 This will open three new terminals running: a caretaker instance for 108 auto-rebuild (I recently activated caching in soupault, rebuilds are 109 lightning quick), a web server for preview, and a browser pointing to 110 the server. 111 </p> 112 <p> 113 At that point I will usually throw the terminals running the server 114 and <code>caretaker</code> to another desktop to achieve a clean editing 115 environment. 116 </p> 117 <p> 118 When it’s ready to go live, I use an alias called <code>glazy</code>: 119 <code>git add . && git commit -m "update" && git push</code>. 120 This will trigger the pre-commit hook, which rebuilds the site again and 121 activates rsync to send the built site to the web server, before pushing 122 the source files to GitHub and my git server. 123 </p> 124 </main> 125 <div id="footnotes"></div> 126 <footer></footer> 127 </div> 128 </body> 129 </html>