How I Set Up My Website Using GitHub Pages, Jekyll, and Others

This website and blog are the results of a lucky coincidence. I was browsing online thinking about blogging and saw that the domain rebeccaplatt.com was available. Given that many others also share my name, I thought it was a wise choice to buy it while I could.
(Note: to any other Rebecca Platts reading this - hello!)

Since I was now in possession of this domain, it would be a waste not to use it. But how to build the site?

I looked into a few options for website building (like Squarespace which I have used before), but they were not free quite what I was looking for.

It was at this time that Heroku announced that they were no longer offering free product plans This caused a lot of commotion online due to the large number of people affected. One tweet about it, in particular, stood out:

Most of these options I had heard of before - but not GitHub Pages. GitHub, sure. You would be hard-pressed to find a software developer that didn’t know of GitHub. So what is the ‘Pages’ feature?

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

For those not aware, on a ‘static’ website the page you see in your browser is the same as what is stored on the server. This is in contrast to ‘dynamic’ websites, which generate the page to show you based on real-time requests. They can be more complicated than static websites, but they do allow for more features - like personalisation. I don’t need this site to be dynamic, so I decided to try GitHub Pages.

Following the set-up guide here, I installed Ruby and Jekyll without issue. Since it was so easy, I decided to go straight to plugging in a template that I liked the look of and winging it.

That did not work.

So instead, I read through the Jekyll documentation, and this time followed along with their tutorial. But it still wasn’t working. It seemed that no matter what I did, I kept getting the error “cannot load such file -- webrick (LoadError)”.

After spending far too long on the issue, I found the answer here.

Now that things were starting to work, I decided to use a prebuilt blog template and customise from there.

Site Design and Customisation

I had some challenges when I was customising the site - the first of which was certain font awesome icons not working. The theme I was using restricted the use of font awesome to version 4.7.0 - and I wanted to use an icon from a later version.

Then came the trouble with images. Not a technical issue this time, but an aesthetic one. I did not particularly want to plaster my face everywhere. While I could use stock images, I didn’t even know which stock images I would want.

Enter, AI Art. After all, since some articles are going to be tech-based, why not have fun and have the images used be AI generated? I tried a few different tools and the winner was Dream by WOMBO. Almost every image on this site so far was generated using that tool, and I like the results.

Then I wrote the About and Published Works pages, since having some content to work with would help with testing the rest of the website design.

It was about this time that I came across Godly, a website full of amazing website designs. I wanted to drop everything I had done so far and start from scratch with a new fantastical design. It was difficult, but in the end, I decided to not overhaul the project and get distracted by ‘shiny things’. This site was almost done, it would be a shame to not deploy it now.

I added Google Analytics and started looking at how to allow people to comment on posts. Which led to the next ‘shiny thing’ to get distracted by, Staticman. An Open Source application that lets static websites act dynamically? Which would also allow for all comments to be stored in the same GitHub repository as the website (so I didn’t have to rely on a third party)? It sounded great.

Unfortunately, for Staticman to work you need to host an instance of it somewhere - with most tutorials recommending Heroku. Not wanting to do that, I thought about how much work did I really want to do to get comments working. I was getting into some serious scope creep and decided to scale it back a bit.

Instead of Staticman, I ended up using Disqus. The free version does have ads, but I have tried to make them as unobtrusive as possible. The actual process for installing Disqus was easy:

1. Sign up for an account
2. Copy the “Universal Code” HTML snippet from their site
3. Add the HTML to my template file (so that it would be automatically included on every blog post created)
4. Boom. Done.

Finally, it was time to think about how to allow people to subscribe. Learning from previous mistakes of overcomplicating things, this time I went straight to using the option most recommended in my searches: MailChimp. While I was adding the subscribe link to the website I realised the only information I needed to collect was the email address. Sure, I could gather names as well and personalise the emails, birthdays to send birthday messages, and any number of other pieces of data… but with how many high-profile data leaks there have been lately, I don’t need to be increasing risk. Just your email is fine for me, thanks.

With all that, the website is ready! In summary, it was built using:

• GitHub Pages
• Ruby
• Jekyll
• Google Analytics
• Disqus
• and MailChimp.

I will keep changing things on the site, but for now, it’s in a state that is ready to deploy. So welcome to the website!

---