↓
  1. Posts/

New homepage with Vue and Gridsome

···

It's been so long since I've re-written my homepage.

It started orginially as a plain html file, custom css, bootstrap, fontawesome, and google font.

This is how the <head></head> looked like.

1
2
3
4
5

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" />

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Bitter:400&subset=latin,latin-ext" media="all" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />

As you can imagine, that's a a lot of static assets to download for a simple homepage. Although hopefully fontawesome, bootstrap, and google fonts are already cached is most browsers!.

Previous homepage

Here I had to write the content in pure html and was hard to maintain.

Things like privacy-policy and terms of use were very difficult to maintain as html files.

New and shiny

The new homepage is built using gridsome which is built on top of vue.js. CSS in the new homepae is handled by tailwindcss.

New homepage

Now the content is written in markdown and gridsome does the heavy lifting of creating static html and optimized javascript. Tailwind and Purgecss creates optimizd css files.