Jump to navigation

Re-building this website - iameven.com

- Even Alander

Yet again rebuilding a site that already worked. But optimization, you know.

As I said in my previous post about building this website I really didn't like depending on both node and ruby to build my site. As awesome as jekyll is I just never got into ruby. I also didn't like doing the build locally before submitting. Duplication of content and more work for me, all my builds were in git commits, and sometimes I forgot to do it.

I began using react.js on a work project and really like that way to structure code. For some reason I thought I could do really cool things with this site by changing to that. I converted my markdown files to react components and started realizing that this was the wrong tool for the job. Yes, I could do awesome transitions but writing posts suddenly got really hard. I did get to experiment some with server side rendering with the same code, so not all was wasted.

Then I wrote my own post parser and static file generator. I had a working prototype in a couple of hours, but the code was really messy. I suddenly started thinking about metalsmith and its plugin based structure. It suddenly seemed a lot more safe to lean on some sort of established system rather than re-invent everything.

How it works

I have all the posts collected in src/posts, an index.html, iameven.css and iameven.js file in src/ and some template files in a templates/ folder. I run index.js locally or from Dokku which collects the files and build the site before starting an express.js server.

The index.js file loads metalsmith and all the plugins I use, excerpt is a modified version of metalsmith-excerpts and date is a custom one I wrote to handle date manipulation.

// index.js
var Metalsmith = require("metalsmith");
var markdown = require("metalsmith-markdown-remarkable");
var highlight = require("metalsmith-code-highlight");
var collections = require("metalsmith-collections");
var permalinks = require("metalsmith-permalinks");
var templates = require("metalsmith-templates");
var beautify = require("metalsmith-beautify");
var feed = require("metalsmith-feed");
var sass = require('metalsmith-sass');
var autoprefixer = require('metalsmith-autoprefixer');
var ignore = require('metalsmith-ignore');

var excerpt = require("./plugins/excerpt.js");
var date = require("./plugins/date.js");

var url = "https://iameven.com/";

    // set data used by feed
        site: {
            title: "iameven.com",
            author: "Even Alander",
            description: "Ramblings of an average geek",
            url: url
    // convert markdown to html
        langPrefix: 'lang-',
        html: true
    .use(excerpt()) // collect descriptions
    .use(highlight({languages: []}))
    // this adds path to post metadata for collections
    // create the collections before running through templates
        posts: {
            pattern: "*/*.html",
            sortBy: "date",
            reverse: true
    // create feed before header and footer is added
        collection: "posts",
        destination: "feed.rss"
    // change date to custom display format
    // parse files and create the index
        engine: "handlebars",
        cache: false,
        partials: {
            header: "partials/header",
            footer: "partials/footer",
            posts: "partials/posts"
        helpers: {
            ifCond: function(v1, v2, options) {
                if(v1 === v2) {
                    return options.fn(this);
                return options.inverse(this);
        outputStyle: "compressed",
        includePaths: ["styles"]
    // make sure output is somewhat pretty
        "html": {
            "indent_inner_html": true
    .build(function(err) {
        if (err) console.log(err);
// serve
function server() {
    var express = require("express"),
        compression = require('compression'),
        port = process.env.PORT || 3000,
        app = express();
    // catch unresolved paths and serve a 404.html file
    app.use(function(req, res){
        res.status(404).sendFile(__dirname + '/build/404.html');
    app.listen(port, function(err) {
        if (err) return err;
        console.log("listening to port "+port);

The express server is pretty much the same thing I used before.


Or rather quirks, I would say. Struggles maybe?



The site is now really light weight, easy to manage and pretty optimized. I think I'll manage to live with this for a while.

  1. iameven.com
  2. : Guitar
  3. : Fragment Identifiers
  4. : Valid HTML
  5. : 2017
  6. : Nostalgia driven web design
  7. : Lynx
  8. : The ssstraight story
  9. : Tetris
  10. : Snake
  11. : Post install
  12. : Re-building this website
  13. : Post stats 2014
  14. : Optimizing for git
  15. : Digging through old files
  16. : Arduino Uno
  17. : Building this website
  18. : Getting myself a logo
  19. : Warm Echo
  20. : Recent events
  21. : WTF, Spotify?
  22. : Numusic and Nuart
  23. : U don't simply uplay
  24. : Playing with time lapse
  25. : WZ
  26. : Fine Day
  27. : Restoring iameven
  28. : Ableton push
  29. : Ghost - Light weight Wordpress
  30. : Everything on the net should be dated
  31. : Euro Offshore container
  32. : Niels Juels street
  33. : Kverneland Næringspark
  34. : Hiking
  35. : Fume Tests
  36. : More Lexi pictures, in Sandveparken
  37. : Trustbuddy
  38. : Lexi visiting the beach
  39. : A Bit Weird
  40. : Weekend trip to Sirdal
  41. : Old sketches
  42. : HÃ¥vard's post stats
  43. : Rant about airports
  44. : The Good Old Days
  45. : Beetle
  46. : 206
  47. : Phone sketches
  48. : Noroff 3DDA
  49. : Panorama pictures, Sola and Stavanger