Alex’s Blog

Random musings on life, tech, and anything else

Building A Blog From Scratch Using Only Linux Tools

date: Sun Apr 16 10:34:49 PM CEST 2023

Why?

Because it could be fun. Why am I not just running a hugo blog? It’s statically generated and has a ton of themes and plugins. Why am I reinventing the wheel?

Because I can. And it could be fun. :-)

Okay so this is not 100% running on “just/only” Linux Tools if by that you mean OSS/self-hosted etc stuff. No, no, no. It’s a statically hosted github pages page. Cloudflare is the CDN. I went with them because I get analytics for free. And they’re not creepy.

No Tracking, No Advertising.

There’s no tracking on this blog. No logins. No advertising (currently).

When I do get comments added to the blog using FlameWars commenting will require a Google account but until then this is just static and the only way to send me love (or hatemail) is via email

How?

Well the inspiration came when I learned about pandoc’s --standalone flag.

The Standalone flag, per the docs, does this: “Produce output with an appropriate header and footer (e.g. a standalone HTML, LaTeX, or RTF file, not a fragment). This option is set automatically for pdf, epub, docx, and odt output.”

And since I am running Fedora Linux some extra special sauce was added such that Fedora’s version of pandoc renders a much nicer standalone page with some really sane defaults.

For you HTML/CSS professionals out there the CSS is rather basic. It applies CSS classes to globally to the HTML tags which probably makes the rendering from markdown to HTML for simple webpages really easy.

For example:

  <style>
    html {
      line-height: 1.5;
      font-family: Georgia, serif;
      font-size: 20px;
      color: #1a1a1a;
      background-color: #fdfdfd;
    }
    body {
      margin: 0 auto;
      max-width: 36em;
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 50px;
      padding-bottom: 50px;
      hyphens: auto;
      word-wrap: break-word;
      text-rendering: optimizeLegibility;
      font-kerning: normal;
    }
    @media (max-width: 600px) {
      body {
        font-size: 0.9em;
        padding: 1em;
      }
    }
    @media print {
      body {
        background-color: transparent;
        color: black;
        font-size: 12pt;
      }
      p, h2, h3 {
        orphans: 3;
        widows: 3;
      }
      h2, h3, h4 {
        page-break-after: avoid;
      }
    }
    p {
      margin: 1em 0;
    }
    a {
      color: #1a1a1a;
    }
    a:visited {
      color: #1a1a1a;
    }
...

<p>The thing is, it began as a fun, nice thing to do, but it is triggering my OCD a bit such that I feel compelled to stop and save every earthworm I can.</p>
<blockquote>
<p>Ah… Hero complex much?</p>
</blockquote>

Such that the a and p and other tags are all formatted this way without needing to specify classes in the individual html elements. I have a hunch that this makes rendering the page really fast.

What’s Next?

I need to make adding links to the main index.html page more dynamic. Right now it’s very much a manual process.

I need to add a github CI/CD flow with Github Actions so that I can programatically purge the cache of the Cloudflare CDN when I push changes.

I need to fix the <pre><code> tag’s CSS as it renders it in a font color that is very tough to read. But since I am using some HTML template I can’t really understand I will have to find a pandoc flag or manually fix it after the fact somehow. Each option is a hella fun.

Really Happy

Even with all the TODOs that I have I am really happy with this setup. Feel free to poke around the repository for this blog at https://github.com/gigatexal/gigatexal.github.io and drop me an issue or something if you want to contribute infrastructure suggestions/changes.

Of course there’s a Makefile and a Docker Container as defined by the Dockerfile in the repository because of course there is. The Dockerfile is just used for when I am building this on a non-Fedora instance. And the Makefile, well that’s still a work in progress.

Show Me How It’s Made

Building the blog is really simple:

pandoc –standalone -o index.md -o index.html -H header.html

Then for the pages in the /pages folder it’s:

for f in (ls*.md); dop=f:t:r; pandoc –standalone ${p}.md -o ${p}.html; done;

The above uses some zsh-isms so it’s not very portable but meh.

What I am trying to see is how far can I get without having to resort to a templating engine like jinja2 or any of the off-the-shelf tools. At the same time I want it to be a bit productive so I can write. Anyways, “create in the open” they always say!

Got Feedback? Send Me An Email

Feedback

Buy me a hot chocolate!

Go Back Home

Feedback

Go Back Home