Gustav Ehrenborg fullstack developer

Email symbol LinkedIn logo GitHub logo Instagram logo

This site 2017 edition Building a barebone static site

Friday, August 4, 2017
This site

I wanted a simple personal website and decided to do a static site, just like in the good old days. It has however some modern twists. Since this is just a personal web page, the focus was on the things I like, for example getting a 100 % Lighthouse report and hosting it for free.

The HTML and CSS is just hand coded, no frameworks or anything. The sitemap.xml is hand coded too, it's just one record in it. The images are optimised manually beforehand, no fancy image tools here.

Getting a 100 % Lighthouse report was actually not that easy, not to my knowledge at that time. I learnt about async scripts, 'defer', contentful paints, cache policies and how to tackle fonts that are not loaded yet, and a lot of SEO stuff

I guess inlining the images, like base 64 encoding them and doing the same with the font could increase the performance more, but I still got 100 % without doing that.

Hosted on Firebase

The site is hosted on Firebase, Google's cloud platform. It is designed to host sites that uses other Firebase functionality, but it is really easy to setup to host simple HTML, CSS and other static material. It is also free and distributes content onto a CDN for fast performance. There are other hosting providers that also provides a free tier, but I chose Firebase because it includes support for custom domains even in its free tier. Edit: Google has now added some limitations to the free plan.

Firebase setup

  1. Install the Firebase CLI (`curl -sL https://firebase.tools | bash`)
  2. `firebase init hosting`
  3. Create a new project or use an old one
  4. Select your build output folder as public directory, probably `/dist` or similar
  5. `firebase deploy`

Yes, it's that easy.

Configure domain

Firebase supports custom domains, just go to https://console.firebase.google.com/ and enter the project you created. Click on Hosting to the right and then "Add custom domain". You can also configure redirects here, like redirecting people entering your domain with www to without www.

Grunt scripts that makes magic

The following grunt packages are used:

grunt-contrib-copy Copies files to the output foler
grunt-contrib-sass Compiles SCSS to CSS
grunt-contrib-uglify Minimizes JavaScript code
grunt-inline Inlines the CSS and the JavaScript in the HTML file