- Spend an afternoon taking a look
Fast forward a decade or so and I've been back to Web development in earnest from 2020 and into 2021 thus far. I have found the following to be a quite quick, flexible and beautiful way of going from "cool idea" to "working website". I'm starting to make a dent on standing up websites for all of the domain names I've bought. (I've stopped purchasing new ones. Could I have a website for every domain name I own by the end of 2021?):
- Static site generator (Hugo or Gridsome) to build the site, they support themes and starters so you can have a pretty site while you dust off the cobwebs of your CSS knowledge
- Firebase for Web hosting (HTTPS, perfect for static sites, preview channels, free for most use cases)
- GitLab CI to pull it all together: generate the site, deploy to a preview Firebase channel and manual push to production)
Static site generators (SSGs)
I tend to start with Hugo or Gridsome. I also think that Expose creates beautiful photo gallery websites.
If you are impatient and want to jump right in, I recommend choosing a theme from
jamstackthemes.dev that appeals to you and using that to guide your choice of SSG. I wound up becoming proficient with a few SSGs before choosing one to focus on.
Firebase is a Google service that does a bunch of different really useful things. I take advantage of Firebase Hosting for most of my sites. Firebase supports custom domains with digital certificates on a free tier that's met all of my needs. And deploying to Firebase via CI is a breeze.
Firebase + GitLab CI = <3
I deploy to Firebase via GitLab CI. Here's the
.gitlab-ci.yml that I use to deploy this site, brie.dev:
Gridsome Build: stage: build image: node:12.13.0-alpine before_script: - npm install -g @gridsome/cli - cd gridsome && npm install script: - gridsome build - gridsome info artifacts: paths: - gridsome/dist/ Deploy to Firebase: stage: deploy image: node:12.13.0-alpine needs: - "Gridsome Build" before_script: - npm i -g firebase-tools script: - firebase deploy --token $FIREBASE_TOKEN --project briedev
The first job is called Gridsome Build. After installing the CLI for Gridsome, the
gridsome build command is run to convert the Markdown and Vue into static HTML. That HTML is saved in
gridsome/dist and passed as an artifact to the second job. The second job, Deploy to Firebase, installs the tools needed to deploy to Firebase and deploys the contents of
gridsome/dist to the Firebase project called
briedev. The firebase.json file is what tells the
firebase CLI that the files we want are in
gridsome/dist. Firebase takes care of making the HTML available over the web via HTTPS at
Here are a few sites that I am deploying with the method described above today: