Installing Pure Blog

Thu 2026-02-26

A new Blog platform

I found this at the blog of Kevin Quirk https://kevquirk.com/ He's written a complete blog system which seems to do just what I want, and no more... No Java, simple CSS, PHP/HTML. Fast page loads and low bandwidth.

I've installed it on the Apache2 server on my laptop for now, as a trial. I'm minded to transfer the posts I've already put on my Chyrp-Lite blog to this platform (after I install it on the VPS webserver g4slv.info

It has the option for a simple front page with just the titles of the posts in chronological order, which I couldn't find a way to do in Chyrp.

Things I've found so far

.htaccess

I had to change a setting in /etc/apache2/apache2.conf on the VPS to AllowOverride All from the AllowOverride None which I found there. I can't remember if it was None because of a change I'd done myself in the past, but until I'd set it to All the links to individual posts didn't work.

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

Mod Rewrite

I couldn't get Pure to serve any pages, after writing posts via the admin CMS was okay.

Looking at the Apache2 error.log it looks like an issue with the supplied .htaccess file and the ReWrite function...

I had to enable the rewrite mod:

a2enmod rewrite
service apache2 restart

Pages/posts were served ok!

Dom document error

I tried looking at the supplied Demo page, explaining the markdown, but I just got an empty page. Looking at it in the editor pane it looked ok...?

apache2 error.log again:

 PHP Fatal error:  Uncaught Error: Class "DOMDocument.....

This required apt install php-dom and restarting apache2.

ZipArchive

To use the internal update feature it is necessary to have the PHP ZipArchive class, which requires

sudo apt install php-zip
sudo service apache2 restart

Now all seems to work.

CSS & Fonts

The font looked a bit big, so I changed the body font down to 1rem, and then increased the line spacing to 1.2rem.

I also added the Atkinson Webfonts thusly:

Make a directory content/fonts and copy the Atkinson Hyperlegible WOFF2 fonts into it.
Update the CSS with

body {
  font-size: 1rem;
  line-height: 1.25rem;
}

@font-face {
  font-family: 'atkinson';
  src: url('/content/fonts/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
       font-weight: normal;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'atkinson';
  src: url('/content/fonts/AtkinsonHyperlegibleMono-RegularItalic.woff2') format('woff2');
       font-weight: normal;
       font-display: swap;
       font-style: italic;
}
@font-face {
  font-family: 'atkinson';
  src: url('/content/fonts/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
       font-weight: bold;
       font-display: swap;
       font-style: normal;
}
@font-face {
  font-family: 'atkinson';
  src: url('/content/fonts/AtkinsonHyperlegibleMono-BoldItalic.woff2') format('woff2');
       font-weight: bold;
       font-display: swap;
       font-style: italic;
}

:root {
  --font-stack: "atkinson", system-ui, monospace;
}

pre {
  font-family: "atkinson", monospace;
}

code {
  font-family: "atkinson", monospace;
}

It's necessary to use content/fonts instead of assets/fonts described in the Pureblog docs because the automated update process will remove anything non-standard from assets. content is not touched by the update process.

Post-layout partial

make a file post-meta.php in content/includes

Initially this was to add the "email reply" link at the foot of each post, but doing this meant the main post-meta.php file got skipped - which adds the "previous / next" post links to each post, so I added this back.

My content/includes/post-meta.php file is now:

<div class="post-nav">
  <div>
    <?php if (!empty($previous_post)): ?>
      <p>⬅ The one before<br>
      <a class="pagination-links" href="/<?= e((string) ($previous_post['slug'] ?? '')) ?>">
        <?= e((string) ($previous_post['title'] ?? '')) ?>
      </a></p>
    <?php endif; ?>
  </div>

  <div class="post-nav-next">
    <?php if (!empty($next_post)): ?>
      <p>Up next ➡<br>
      <a class="pagination-links" href="/<?= e((string) ($next_post['slug'] ?? '')) ?>">
        <?= e((string) ($next_post['title'] ?? '')) ?>
      </a></p>
    <?php endif; ?>
  </div>
</div>


<div>
<center>
<p>
<a href="mailto:{{ site_email }}?subject=Reply about: {{ post_title }}">✉️ Reply by email</a>
</p>
</center>
</div>

✉️ Reply by email