This site

I’ve used Google Firebase as a static host for some years. Given my volumes, it’s basically free and simple to use, and it was all I needed to host was a privacy policy / terms & conditions for my apps on the App Stores.

When I decided to pull something together that I could use to share code snippets more effectively, I considered the usual Wordpress and other hosted services, but wanting to stay with a simple, clean static solution, I was about to dust off my Angular skills and start afresh when I stumbled upon Hugo , which seemed to tick all the boxes, so decided to give it a go.

Installation outline

Installation is trivial:

1
2

brew install hugo
hugo new site the-thompsons

Installation of the Firebase client is similarly straightforward, assuming you already have a project created on their cloud platform, it’s just the following, and the Firebase CLI will walk you though picking the project to push the site to.

1
2
3

curl -sL https://firebase.tools | bash
firebase login
firebase init hosting 

You can add a new ‘post’ to the site with:

1

hugo new posts/title.md

You build the site with:

1

hugo

or test it with:

1

hugo server

and finally, when you’re ready to deploy, it’s a simple as

1

firebase deploy

And that’s the basics of it. You can follow the instructions and add a theme easily enough, although to take care to follow the instructions for the specific theme as they usually require you to create some config files. I wanted one which lent itself to code, so I chose Zzo Theme

Tweaking it a bit…

Different themes are configurable to different extents, so I spent a fair amount of the time tweaking the settings to suit. Feedback is instant if your using the build in hugo server to check, so it’s easy to experiment until you get the look you like.

I also made some changes to the underlying theme that we not configurable, for example. the font weight for the single page, and h1 & 2 tags was a little heavy for my liking.

So in themes/zzo/assets/sass/pages/_single.scss I changed the weight from 900 to 700:

1
2
3
4

&__title {
    font-size: 2.5rem;
    font-weight: 700;     // changed from 900
    ....

1
2
3
4
5
6

    h1,
    h2 {
      padding: 0;
      color: inherit;
      font-weight: 700;     // changed from 900
      ....

In themes/zzo/assets/sass/themes/_dark.scss, I set the h3,h4... subtitle colour to match the h1,h2

1
2

single-header-title-color: #ffd866,
single-contents-subtitle-color: #aed581,

In themes/zzo/layouts/_default/single.html, comment out the following line to remove the ‘See Also’ for shared tags.

1

    <!-- {{ partial "body/related" . }} -->

The ‘language’ name header on the code blocks was too prominent and it also set the name to title-case which looks silly, so I made two changes in the themes/zzo/assets/sass/pages/_single.scss file.

1
2
3
4
5
6
7
8
9

  code[data-lang] {
    &::before {
      ....
      font-weight: lighter;
      text-transform: none;
      ....
      }
    }
  }

1
2
3
4
5
6
7
8

    pre > code:not([class^="language"]) {
      &::before {
        ....
        font-weight: lighter;
        text-transform: none;
        ....
      }
    }

And finally, copy the file themes/zzo/layouts/partials/svgs/share/reddit.svg to themes/zzo/layouts/partials/svgs/social/reddit.svg if you have added a reddit= to the [socialOptions] section of the config/_default/params.toml file to link to your reddit profile.