bit.florist

bit.florist is a static site served entirely via an S3 bucket sitting behind CloudFront, with DNS via Route53. It therefore costs cents per month to host.

You'll notice that the tools page supports a few Javascript doo-dads. To do this, I leverage Webpack with a multi-entry config.

module.exports = {
    entry: {
        dungeon: './js/dungeon/index.js',
        somethingElse: './js/other/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist/js'),
    },
};

I write blog posts like this one entirely in Markdown. I use a very simple Node script to throw my posts into showdown, and dump those into some mustache templates.

My generation script looks like this:

const fs = require('fs');
const showdown = require('showdown');
const mustache = require('mustache');
const _ = require('lodash');

const converter = new showdown.Converter({metadata: true});

const postTemplate = fs.readFileSync("./template/blog-post.html", "utf8");
const indexTemplate = fs.readFileSync("./template/blog-index.html", "utf8");

let postsRendered = [];

const postFileNames = fs.readdirSync("./blog");
for (let postFileName of postFileNames) {
    const markdown = fs.readFileSync(`./blog/${postFileName}`, "utf8");
    const postHtml = converter.makeHtml(markdown);
    const metadata = converter.getMetadata();

    const renderedHtml = mustache.render(postTemplate, {
       content: postHtml,
       title: metadata['title'],
       posted: metadata['posted'],
    });

    const fileName = `${_.kebabCase(metadata['title'])}.html`;
    postsRendered.push({
        title: metadata['title'],
        posted: metadata['posted'],
        fileName,
    });

    fs.writeFileSync(`./dist/blog/${fileName}`, renderedHtml, "utf8");
}

const posts = _.reverse(_.sortBy(postsRendered, ['posted', 'title']));
const renderedIndex = mustache.render(indexTemplate, {posts});
fs.writeFileSync("./dist/blog/index.html", renderedIndex, "utf8");

I'm sure there are more elegant ways to do this (jekyll, gatsby), but there's something to be said for a functional blogging platform in less than 40 lines of javascript.