Blog Overhaul

Summary

I updated the Quick Learning blog’s design and underlying technology. I purchased a domain via Google Domains, hosted the blog on Firebase, and used a JavaScript framework called Astro to build the interface. This post describes the steps I went through in detail. I encourage you to use it as a resource, but also do your own research if you want to set up a blog.

Intro

I’d been thinking about updating the design and technical aspects of this blog for some time, and here is the result. It’s not complete, I’d like to enhance the design further and add some more features, but I think I’ve done enough to launch this new version.

With this blog post, I’d like to summarise how I went about creating the update.

I hope this post provides some useful tips should you decide to make your own blog. But, before getting into that, a few cavaets…

This is by no means a comprehensive review of how to create a modern blog - I’m sure there are many services and options I didn’t even think to look at. Also, bear in mind this is blog is ultimately a personal project so it reflects my own priorities and concerns, which might be quite different from yours.

In particular I’d caution you on following my process to the letter if you:

  1. Want to create a simple blog that covers a personal interest or project.

Creating this version of the blog took some time and without the technical experience I’ve acquired over the years, I’m not sure I could have done it. I’m not saying it’s some great feet of software engineering, but unless you have some experience working with web technologies, it will take some work and a lot of patience to replicate this procedure.

In fact, even if you are technically adept, this might not be the best option for you.

I follow the blogs of some very skilled programmers and many of them just use a simple WordPress theme or even use Blogger. So if you just want to get your content out there, with the minimal amount of fuss, I’d recommend using Blogger or Wordpress. Or, if you’re prepared to spend a bit of money: Squarespace. I believe all those options even allow for custom domains.

You might also consider setting up a blog via substack or Medium. I’ve no experience with those but they do seem popular.

  1. If you want to create a purely commercial blog I wouldn’t recommend following this procedure exactly.

First because I don’t intend to make money from this blog, it’s purpose is to be a platform for documenting my own learning, and ideally it helps others learn too.

This means as I’m not as cost sensitive as a commercial blogger would be so I don’t mind paying more for a service if it offers me a slightly more convenient interface. I’m not trying to eak out every cent I can.

Additionally, I’m not thinking about topcis like SEO or related analytics, which are important for businesses. Of course, I would like people to read what I write but I’m not trying to build a massive audience at speed.

So if you want to make a commercial blog, you should think much more about the upfronts costs, how to best invest your money and how you can regularly produce content that can quickly capture a large readership.

All that being said, let’s move on to cover the steps involved in updating this blog. I’d suggest that even if the material doesn’t seem entirely relevant for you, it’s worth knowing what options are out there. I’d also encourage you to do further research after reading this and think through your own priorities.

The update procedure

First a little background on the origin of this blog. I started Quick Learning to accompany my study of Jeremy Howard’s fastai course. I bought the book Deep Learning for Coders which he co-author with Sylvain Gugger. The book contains an appendix explaining how to start a free blog based on GitHub Pages.

I followed their instructions and got the first version of this blog online. In general, I think GitHub Pages are a great option for anyone looking to start a blog that is more flexible that the likes Squarespace, Blogger etc. but is not too technically demanding.

One possibility for the update then was to simple link the ql-blog.co domain to the GitHub Pages blog and modernise the look.

However, I chose against this as GitHub Pages are generated via Jekyll. Not that there is anything wrong in using Jekyll, it’s just I have more experience using basic HTML, CSS and JavaScript web standards so I wanted to stick to those.

Additionally, I wanted to experiment with JavaScript frameworks. I’ll come back to which framework I chose, and why, later but for now the first thing I wanted to do was find a host for the domain.

Selecting a domain host

I didn’t spend a great deal of time researching this, again if you want minimise your costs, you should review multiple options. Essentially I went with Google Domains since they seemed to offer fairly straightforward way to buy a domain.

From there the next question was how would I put my content online. Once more I went with the convenient option here: Firebase. Firebase is owned by Google so integrating it with my domain was quite simple and they had a free plan, which is fine for the volume of traffic I’m expected (que one of my articles getting posted on Hacker News and my site exploding).

However I’m not sure I would necessarily recommend Firebase for everyone, particularly if you’re using the JavaScript framework I went with. Netlify seems a popular option that might be worth looking.

One important side note here: I’m describing this process in a fairly step by step way. This is to make the article easier to read, but this has the downside of giving a false impression of how easy it was to set up the domain.

In fact, it was quite challenging and took me considerable amounts of time tweaking things to get anything to appear online. I’m sure I could set up another domain much more quickly now, but do have realistic expectations about the amount of time and effort this takes if you don’t have a lot of technical experience.

Chosing a JavaScript framework

So with the domain in place the next question was how to put my content online. In a certain sense this is incredibly simple, all I needed was an index.html file that contains all my content and deploy this to Firebase.

Of course there is much more to it than that. My goal is not having a single page but multiple pages with a reasonably nice design. How to do this?

I knew one would be to using a JavaScript framework.

I suppose it is possible to build a website entirely from simple html, css and JavaScript files, but seemed undesirble. I’d have to write everything from scratch whereas with a framework so much is already done for you. The only problem is most of these frameworks are used for building apps rather than static blogs sites, which left the question: how to use a framework to build a blog?

Experiments with Angular (and others)

There are a few JavaScript frameworks out there but the big three are:

I think React is by far the most popular (at least in Europe), but, having had a small amount of experience with it before, I decided to try Angular first.

My feelings towards Angular are quite mixed. While I can certainly see how people can use it to create Apps and complex web services, ultimately I didn’t find it suitable for making a blog.

Bear in mind though that I am not an expert in web development so if you know more about Angular you might have a different feeling.

My experience with Angular was that it’s fairly easy to set up an Angular project but getting it to generate a series of static sites for a blog is a challenge.

Tthere is a plug-in for Angular called Scully that is supposed to reorganive Angular projects to generate static pages that you can deploy to your domain.

However, I could never get it to work. Now, I am hesistant about making any general statements about whether you should use Scully. Since I don’t have any real experience working with Angular it could be I made some errors. Indeed you can see here a medium post about how to use Scully to set up a blog (although maybe the fact this is posted on medium says something about Scully).

Anyway, for me though the problem basically was that Scully needed to adjust the file structure of an Angular project. This should be all be done automatically via a series of command line instruction, but for me this never worked.

I did attempt to manually adjust the file structure myself, and after much back and forth with Scully automatically changing files and making manual changes, I could get a static blog to appear locally on my PC. But I could never get it to deploy to Firebase reliably.

So much for Angular then, I skipped trying to do anything with React. As noted, it is an extremely popular framework, so you might want to try React yourself. I believe you can generate static sites with Next.js but I didn’t try this out.

The reasons why I didn’t bother with React where that I felt I might have similar issues with Angular, and I was more interested in trying out Vue.

Although Vue is currentl/y the smallest of the major frameworks, it is often used with smaller scale projects and they do have a variant made specifically for static site generation called VuePress. However, seems VuePress is still in a development phase, and I wanted something more stable.

Astro to the rescue

So what was the solution? In the end I went with a relatively new framework called Astro. What intrigue me about Astro was that it seems purpose build for creating blogs and it had excellent documentation which made setting everything up, very easy.

The fact I really don’t have much to say about is probably the best indication of how seamless the whole thing was. So go check it out!

Let’s not forget Hugo

Before leaving this topic, I’ll just mention Hugo, which is not a JavaScript framework but rather a derrivative of the Go programming language. To be clear I haven’t looked at this option at all, and I have zero experience with Go, but it does seem a lot of bloggers use it so maybe worth a look.

Closing thoughts

So having discussed what I did to make this blog, it does occur to me that the prior question should be: why blog in 2023?

I think my case is quite specific. I’m interested in learning about technical topics and I think the best way to improve my understand is to explain what I’ve learnt.

More generally, I think a bolg is a good option if you too have a passion project a blog and what to get your content out there.

But I would caution you to really think this through. Arguable your reach is greater create video content for YouTube.

Also you have to make a decision about how much work you’re willing to put in to get it off the ground. For me there is something great about having my own domain that I’m entirely control of, even if it doesn’t go viral. But perhaps you don’t want to invest the time or money in a solution like this. In fact, you may even want something more advanced that what I have.

So regard this post as a summary of some possibilities that are out there. Consider then but also do your own research.

Simple blog hosts

More advanced blog hosts

JS frameworks and extensios

Blog Overhaul by William Samuel McDonald is licensed under CC BY 4.0

education

blog

programming