diff options
Diffstat (limited to 'posts/blarg.md')
| -rw-r--r-- | posts/blarg.md | 192 |
1 files changed, 74 insertions, 118 deletions
diff --git a/posts/blarg.md b/posts/blarg.md index b6c9fd0..4a21aaf 100644 --- a/posts/blarg.md +++ b/posts/blarg.md @@ -1,118 +1,74 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>Justine Smithies blog - No Title</title> - <link rel="icon" href="public/favicon-32x32.png" type="image/png" sizes="32x32"> - <link href="https://justine.smithies.me.uk/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts"> - <style> - body { - font-family: sans-serif; - margin: 0 auto; - max-width: 48rem; - line-height: 1.45; - padding: 0.5rem 1.6rem; - } - a { - color: #000000; - font-weight: bold; - } - a:link { - text-decoration: none; - } - a:hover { - text-decoration: underline; - } - main { - padding: 0 1.4rem; - hyphens: auto; - } - code { - border: 1px solid; - padding: 0.1rem 0.3rem; - tab-size: 4; - } - pre { - border: 1px solid; - } - pre code { - display: block; - overflow-x: auto; - padding: 0.3rem 0.6rem; - } - nav ul { - margin: 0; - padding: 0; - display: flex; - justify-content: center; - } - nav li { - list-style: none; - } - nav li * { - display: block; - padding: 0 0.4rem; - color: black; - } - nav li strong { - padding-left: 1.5rem; - padding-right: 1rem; - } - nav a { - text-decoration: none; - } - nav a:hover { - - } - header { - border-bottom: 1px dashed grey; - margin: 0rem 0; - padding: 1rem 15px; - text-align: center; - } - footer { - border-top: 1px dashed grey; - margin: 2rem 0; - padding: 1rem 15px; - text-align: center; - color: #000000; - } - </style> -</head> -<body> -<header> -<nav> - <ul> - <li><img src="public/tux-1.png" alt="Tux" style="width:100px;height:100px;"></li> - <li><h1>Justine Smithies blog</h1>Adventures of a Linux, BSD chick</li> - </ul> - <ul> - <li><a href="index.html">Home</a></li> - <li><a href="about.html">About</a></li> - </ul> -</nav> -</header> -<main> - -</main> -<footer> - <small> - <span><a href="#">↑ Back to Top</a></span><br><br> - Powered by <a href="https://www.freebsd.org/">FreeBSD</a><br> - Built with <a href="https://git.smithies.me.uk/blarg">blarg</a> a mix of both <a - href="https://github.com/karlb/karl.berlin/tree/master">blog.sh</a> and <b>barf</b>. - The code for this site is licensed under <a - href="https://git.smithies.me.uk/blarg/tree/LICENSE">MIT</a>. <br> - Here's the blog's <a href="atom.xml">Atom feed</a>. <br><br> - <img src="./public/fediverse.png" alt="Smithies SNAC Instance" width="16" height="16" style="vertical-align:middle;"> - <a rel="me" href="https://snac.smithies.me.uk/justine">Fediverse</a> - <img src="./public/git.png" alt="Self Hosted" width="16" height="16" style="vertical-align:middle;"> - <a href="https://git.smithies.me.uk">Git</a> - <img src="./public/email.png" alt="Email" width="16" height="16" style="vertical-align:middle;"> - <a href="mailto:justine@smithies.me.uk">Email</a><br> - ©2022 - 2024 Justine Smithies - </small> -</footer> -</body> -</html> +# My simple blog engine blarg + +All the pages on this website are built using my simple blog engine [blarg](https://git.smithies.me.uk/blarg). It is a combination of all the best bits of both [blog.sh](https://github.com/karlb/karl.berlin) and [barf](https://git.sr.ht/~bt/barf) plus I've added some of my own touches too. + +## Why didn't I just use one of the above? + +I found out about barf after seeing [hamblingreen](fosstodon.org/@hamblingreen) post about their new blog and absolutely loved the idea of a simple blog site that could I could write posts in markdown with. I instantly cloned the barf repo and started to play about with it but quickly noticed that it didn't quite do things as I'd like and also had a few bugs / issues which would need to be resolved. +As usual I just can't do things the easy way so set out to create blarg my own simple blog engine and took inspiration from both blog.sh and barf. I also needed to make changes to how the dates were displayed on the index and on all posts. Git history is used to form published on and updated dates on blog posts to keep things nice and easy. +I have also ironed out the html issues too so my blog now passes all three W3C validation checks. + +HTML: +[https://validator.w3.org/nu/](https://validator.w3.org/nu/) + +CSS: +[https://jigsaw.w3.org/css-validator/](https://jigsaw.w3.org/css-validator/) + +Atom feed: +[https://validator.w3.org/feed/](https://validator.w3.org/feed/) + +## Requirements + +Before jumping deeper into it, I made a list of my basic requirements: + +- Low maintenance +- Low barrier to create content (markdown) +- Low requirements on the client (web browser, internet connection, RAM, CPU) +- Shows creation and update timestamps of posts +- RSS feed + +## How these constraints are acheived + +### Low maintenance + +- Avoid dependencies: only a POSIX shell and a markdown converter are required. Dependencies always increase the maintenance burden. +- Static files: hosting static files is much easier to do reliably than hosting dynamic content + +### Low barrier to create content + +- Use markdown: when writing markdown I can mostly avoid thinking about the syntax and focus on the content +- Automatically generate timestamps: generating the timestamps from the git history allows me to just create posts without needing any templates or front matter to provide this data. I also can't forget to update these timestamps. + +### Low requirements on the client + +This is mostly solved by not doing anything complicated. Not adding any JS and CSS frameworks keeps the size small. Not setting a font size and not disallowing zooming makes the text readable on a wide variety of devices and by people of bad eye sight. Just using basic HTML and a few lines of CSS allows old or limited browsers and slow computers to display the page easily. I could go on for a long time here, but I'm sure you get the concept. + +### RSS Feed + +Having an RSS feed (an [Atom](https://en.wikipedia.org/wiki/Atom_(Web_standard)) feed to be precise) is a must for me. I really love RSS and in my opinion RSS support is an essential part of a blog. I was shocked to learn that some blog engines need plugins to get RSS support! +Writing something that is nearly a valid Atom feed is pretty easy. Just take the [example Atom feed](https://validator.w3.org/feed/docs/atom.html#sampleFeed) and fill in your own values. + +## Results + +### The HTML output + +* No JS, no tracking, no custom fonts +* No external CSS +* Minimal styling +* Light weight pages + +### The blog script + +You can find the [code of the resulting script](https://codeberg.org/JustineSmithies/blarg) on github. The blog you are currently viewing is part of the same repository and serves as example content. + +To make the script work as intended, you should adhere to the following rules: + +- Make sure to empty out the contents of the `build`, `posts`, `pages` and `public` folders so you don't end up with my content. +- Use git and don't edit history after publishing. This is required for the automatic timestamp generation. +- All posts except the `index.md` have a title using the `# ` syntax at the beginning of the document. This title is used for the HTML title tag and for the post titles in the article listing and RSS feed. +- To set the title for `index.html` edit the text between `<title>` and `</title>` of the file `header.html`. Do not delete the the double brackets or the word title inside them {{}} as this is used for setting the title on all pages of your site. +- `header.html` contains an absolute link to your `atom.xml`, including a hostname you control. This is necessary to build a correct atom feed. +- Also make sure to edit the section in `header.html` between the `<nav></nav>` tags to suit your site too. +- All images and other content to be published go into the `public` folder. + +Feel free to contact me if you have any questions. If you want to use it for your own site, I can give some guidance. Since I don't expect many users, this is less effort than writing and maintaining good documentation. |