new post

convert.sh

@@ -62,7 +62,6 @@ wait
 mkdir -p ./_site/css
 mkdir -p ./_site/js
 mkdir -p ./_site/fonts
-cp ./css/base.css ./_site/css/base.css
-cp ./js/main.js ./_site/js/main.js
-cp ./favicon.ico ./_site/favicon.ico
+sed -e "s:{{SITE_ROOT}}:$SITE_ROOT:g" ./css/base.css > ./_site/css/base.css
+sed -e "s:{{SITE_ROOT}}:$SITE_ROOT:g" ./js/main.js > ./_site/js/main.js
 cp ./fonts/* ./_site/fonts/ || true

css/base.css

@@ -1,7 +1,7 @@
 @font-face {
     font-family: "bagnardregular";
-    src: url("/blog/fonts/bagnard-webfont.woff2") format("woff2"),
-         url("/blog/fonts/bagnard-webfont.woff") format("woff");
+    src: url("{{SITE_ROOT}}/fonts/bagnard-webfont.woff2") format("woff2"),
+         url("{{SITE_ROOT}}/fonts/bagnard-webfont.woff") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -36,6 +36,16 @@ code {
     font-family: "Ubuntu Mono", monospace;
 }
 
+blockquote {
+    background-color: #cecece;
+    border-left: 4px solid grey;
+    margin: 0;
+}
+
+blockquote p {
+    padding: 0.5em 1em 0.5em 1em;
+}
+
 nav {
     border-bottom: 1px solid black;
 }
@@ -62,6 +72,11 @@ nav {
     display: none;
 }
 
+footer {
+    text-align: right;
+    border-top: 1px solid black;
+}
+
 @media (prefers-color-scheme: dark) {
     html {
         color: gainsboro;
@@ -74,6 +89,11 @@ nav {
         color: #404040;
     }
 
+    blockquote {
+        background-color: #3a3a3a;
+        border-color: gainsboro;
+    }
+
     a {
         color: #94cdff;
     }
@@ -89,6 +109,10 @@ nav {
     .crumb a::after {
         color: gainsboro;
     }
+
+    footer {
+        border-top-color: gainsboro;
+    }
 }
 
 @media screen and (max-width: 980px) {

env

@@ -1,3 +1,5 @@
-export SITE_ROOT="/blog"
-export SITE_TITLE="Perfect5th 2.0"
-export CRUMBS="YES"
+[ -z "$SITE_ROOT" ] && export SITE_ROOT="/blog"
+[ -z "$SITE_TITLE" ] && export SITE_TITLE="Perfect5th 2.0"
+[ -z "$CRUMBS" ] && export CRUMBS="YES"
+
+[ "$SITE_ROOT" = "/" ] && export SITE_ROOT=""

markdown/index.md

@@ -11,6 +11,7 @@ Feeling cute, might add RSS one day, here's an index of top-level pages that I'v
 personal wiki I used to maintain.
 
  - [An AoC Intro to Haskell](haskell-aoc)
+ - [Simple Site](simple-site.html)
 
    [1]: https://mitchellburton.ca
    [2]: https://github.com/perfect5th/simple-site "Simple Site GitHub Repo"

markdown/simple-site.md

@@ -0,0 +1,54 @@
+# Simple Site
+
+*Created 2024-01-22*
+
+A couple days ago, my friend [tendermario][1] sent me a message:
+
+> I honestly want to make a md file sorta layout that gets converted into html and just static serve
+> on github pages
+
+Now I know there are a lot of ways to accomplish this, but _I_ didn't create any of those, so by
+the doctrine of not-invented-here, I made [Simple Site][2]. The name probably already clashes with
+something existing, and I'm open to changing it as soon as a better idea comes along.
+
+The main concept was to see if I could produce a static site generator in less than 100 lines of
+shell script. Obviously there is some cheating involved: it uses [markdown][3] to produce the actual
+html that is inserted into the html files, but I've built a few niceties around that, and it comes
+with a GitHub workflow that publishes it to GitHub Pages.
+
+Here's a non-exhaustive feature list:
+
+ - configurable `SITE_ROOT` if you want to host it at different URLs
+ - optional navigation breadcrumbs
+ - support for a single CSS file, a single JS file, and font files
+ - generated titles for pages (from first-line `h1` of markdown file)
+
+That's about it, for now. I don't think I'll add much more. The site you're currently reading this
+on was generated using this project. Maybe I'll add a footer.
+
+Using it is very simple, and that's kind of the point. The `README` might explain it more but here's
+the gist:
+
+ 1. Clone the repo
+ 1. Write whatever CSS you want or need in `./css/base.css`
+ 1. Write whatever content you want in `./markdown/` (make sure to include) `index.md` files if you
+    want `index.html` files in each directory.
+ 1. Write whatever JS you want or need in `./js/main.js`
+ 1. Add whatever font files you need to `./fonts/`
+ 1. Edit `./env` to set `SITE_ROOT`, `SITE_TITLE`, and `CRUMBS`
+ 1. Install `markdown`
+ 1. Run `./convert.sh`
+ 1. Server your resulting `./_site/` from wherever you feel like
+
+When I test it locally I do this:
+
+ 1. `SITE_ROOT="/" ./convert.sh`
+ 1. `cd ./_site/ && python3 -m http.server`
+
+Oh, and it's GPLv3 licensed, so feel free to do with that what you will.
+
+— Mitch
+
+   [1]: https://github.com/tendermario "tendermario's GitHub"
+   [2]: https://github.com/Perfect5th/simple-site/ "Simple Site GitHub Repository"
+   [3]: https://daringfireball.net/projects/markdown/ "Daring Fireball's Markdown Project Page"

templates/close.html

@@ -1,3 +1,9 @@
+    <footer>
+      <p>
+        This is a very <a href="https://github.com/Perfect5th/simple-site/">simple site</a>
+        by <a href="https://github.com/Perfect5th">perfect5th</a>
+      </p>
+    </footer>
   </body>
 </head>
 <!-- closes unclosed tags in ./base.html -->