Making of this blog

Posted on by

For a long time I was searching for time to build a personal page or blog – a place where I can present who I am, what I do and share some thoughts and experiences around my work as a software engineer.

Also to serve as a playground for learning new things outside the mobile apps bubble. Now that I finally found the time, here’s some details on how this page was built.

Choosing the tech stack

I’m not a front-end dev and didn’t want to take too much time tinkering around HTML/CSS, so picking something from a template seemed like a good idea. These days there are many static-site generators with endless templates to pick from.

I never tried any of them before but platforms like Jekyll, Next or Hugo all seemed to cover the same base set of features and have many available templates.

I decided to go with the Hugo framework and Indigo theme. The source code is hosted on my private BitBucket account and the site deployed on Netlify.

Everything worked pretty much out of the box, just followed a couple of tutorials and that was it:

BitBucket gives you unlimited repositories up to 1GB of file storage and Netlify gives you free access for a single user. The only thing I’m actually paying for is a custom domain - I picked GoDaddy as DNS service

Customize your theme

Social icons

I wanted to include my LinkedIn and Medium profiles in the footer of the page, however those networks were not present in the theme. I took that as an opportunity to submit a pull request on GitHub to include those new social networks.

(I later discovered the Hugo platform allowed me to simply overwrite partial and include it just on my site 🙈 😄)

Redirect to Medium

Because I had already written some posts in Medium before, I wanted to include them here without having to re-write them in the markdown syntax. So I looked for a way of having the title/description of those posts in the list but redirect them to the original content in some other website.

I was obviously not the first guy asking for this and so I ended up overriding the layouts/_default/li.html template with:

{{ if $.Params.externalLink }}
    <h2 class="list-title"><a target="_blank" href="{{ $.Params.externalLink }}">{{ .Title }}</a></h2>
{{ else }}
    <h2 class="list-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ end }}

And in each post’s front matter, if I want it to redirect, I will include:

---
title: "This post title"
date: 2018-04-04T00:34:30Z
externalLink: "https://medium.com/..."
---

Hosting on Netlify

Netlify is a platform to build, deploy and host front-ends. It makes continuous deployment easy and is free for one website per user. My overall experience on Netlify was great. The UI is easy to use and documentation is pretty good. I only had two small issues

Error checking out submodules

Netlify was failing to deploy the website with the following error:

6:52:23 PM: Error checking out submodules: Submodule 'themes/indigo' (git@github.com:AngeloStavrow/indigo.git) registered for path 'themes/indigo'
Cloning into '/opt/build/repo/themes/indigo'...
Warning: Permanently added 'github.com' (RSA) to the list of known hosts.

Permission denied (publickey).

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of 'git@github.com:AngeloStavrow/indigo.git' into submodule path '/opt/build/repo/themes/indigo' failed

I was puzzled because the GitHub repository for that theme is public, so why was Netlify unable to read from it?

The reason was that my site was hosted on my private repo, on Bitbucket and I only gave Netlify access to my BitBucket account and because of that, it doesn’t not have any permission to clone repositories from GitHub.

In order to fix it, I had to put my deploy key in place on the Indigo repo, on GitHub – since I’m not the owner of that project, I forked the project on my GitHub and added the deploy key to my repo settings.

For the record, that deploy key can be obtained by using the Netlify REST API and calling GET /sites/ID. In it you’ll find this inside the response:

 build_settings": {
      "id": 0,
      "provider": "string",
      "deploy_key_id": "string",

Finally, that deploy key ID can be used with the call: GET /deploy_keys/ID. Thanks to the Netlify support team for the tips.

Site deployed without any assets

After successfully deploying the website, it was loading correctly but without any images or fonts loaded 😫. I checked the Chrome inspector for errors and found this:

Mixed Content: The page at 'https://upbeat-jepsen-c0a88d.netlify.com/' was loaded over 
HTTPS, but requested an insecure stylesheet 'http://example.org/css/style.css'. 
This request has been blocked; the content must be served over HTTPS.

Which immediately ringed a 🔔 I forgot to change the name of website on my config.toml file. I was still using: baseURL = "http://example.org/".

Once I fixed it, problem solved =)

Analytics

Even though I’ll never have thousands or readers, I thought it would be interesting to have some accountability on how many people are entering this site. Luckily, Hugo’s integration with Google Analytics makes that pretty easy. Even though the theme I used didn’t came with it, it was very easy to integrate.

Just had to include in my footer.html partial:

    {{ if .Site.GoogleAnalytics }}
      {{ template "_internal/google_analytics_async.html" . }}
    {{ end }}

Wrap-up

And that was it!

Overall I was happy with the learning experience. Hope you enjoyed it too! Please leave some comments or follow me on Twitter https://twitter.com/belchii