How I built this website

A few weeks ago, someone asked me how I built my website. When faced with this question, one of the first ideas that came to mind is that I should write a blog post exploring this topic in more depth so that all of my readers can learn how the site is built. As I understand that my readers might be a mixture of both coffee lovers, website lovers, and others, I thought I’d try to keep the description as simple as possible.

In this post, I intend to answer a few questions:

• How is my website built?
• Why do I use Jekyll?
• What are the principles behind this website?
• How can you create a site like this by yourself?

How is my website built?

In short, my website is built using HTML, CSS, and JavaScript. I use a tool called a static site generator (in my case, Jekyll) to build this site based on templates that I have created. These templates are built using special Jekyll tags and HTML, CSS, and JavaScript.

This site was specifically created with code because I wanted control over every part of the website. This is partly because I wanted to have complete freedom over the direction in which I took the design but also because I enjoy writing code. Every so often, I chip away at the website and add something new or make a change. A good example of this is my coffee ratio calculator. I built that page because I wanted an easier way to work with coffee ratios. I enjoyed building the calculator and I probably could not have done it in the way I wanted without using a bit of code.

My website is the product of constant iteration. Some changes are small, like how I modified the footer to add new links. Some changes are larger, such as when I built the ratio calculator or when I created my “guess the Edinburgh cafe” quiz pages. It has taken me a while to get to where I am today. In fact, this website started off in its current iteration with a white background. I even made a theme for it (built with Jekyll, for all of my more technical readers). But slowly I learned about what I wanted to do with this site and made changes as I saw fit.

If you do not know how to code, do not be discouraged from making your own website. You can easily make a site without learning to code. I chose the more technical path because I like coding but I understand not everyone is in that position. If you would like to make a site with minimal barriers to entry, I’d recommend the following two platforms, both of which I have used to some extent in the past:

• Carrd: This platform is great for creating single page websites. If you want a web page on the internet that isn’t too complicated, this is the tool for you.
• WordPress: I like WordPress because you can create something without knowing how to code. There are plenty of templates available for you to use. If you want to make a blog, WordPress is a good option available to you.

Why did I use Jekyll?

If you don’t know how to code, feel free to skip over this section!

My technical readers may wonder: why Jekyll? The short answer is that Jekyll looked like the best option for static site generation based on my needs. Jekyll is well documented, capable of generating pages with a simple syntax, and does not abstract too much away from the code that powers my site. I find Jekyll code easy to understand and use, which is crucial because I don’t actually spend much time adding new pieces of architecture to the site. My process is slow and if my code was complicated I’d probably struggle to understand how everything works.

I have considered other options, including building my own static site generator, but Jekyll was the simplest option and I did not want to over complicate this website. You will see this is a recurring theme in the next section, which I suppose I can begin now.

What are the principles behind this website?

Four principles underline this site:

• Simplicity
• Accessibility
• A focus on content
• Website ownership

I’ll chat about each of them individually, and I shall try to keep my answers brief.

Simplicity

This website from the beginning was designed to be simple. I did spend some time implementing features I did not need for a period last year but I then reverted to a more simple approach to my website. I believe simplicity is the way to go for this site because I mainly share content. I write blog posts. I occasionally make an interactive tool like my quizzes or my ratio calculator. Complicating things is not good for anyone, especially you, my readers. Technically, sharing content on the internet is simple, and I wanted to embrace that ideology.

Accessibility

A few weeks ago, I run an audit on my site to try and catch accessibility issues. I done a similar audit at the end of last year. I want this website to be as accessible as possible to all readers. That does not mean people who must use screen readers to access websites. Accessibility means that everyone from those who are slightly visually impaired to those who cannot see at all to those who have no additional needs can access my website easily.

I try to the best of my ability to adhere to semantic HTML standards which help make content easy for screen readers to access (there are many other benefits to semantic HTML, too). I have also tried my best to make the website run well on mobile devices. To the extent I am aware, I am doing a pretty good job with mobile responsiveness. I am proud of this because I think the web should be accessible to everyone. I am not a master of accessibility but I do try.

A focus on content

As I mentioned earlier, I mainly write content on my blog. That’s something that is central to everything on the site. I have thought about how to make content easy to access in terms of what pages I need and, importantly, what pages I do not need. I often write content in a blog post that would otherwise be a page just because I know that another page changes the architecture of my site. When you come here, you should expect content. This is a blog, after all.

Website ownership

If you have your own site, what you make will not be hosted on a social media platform or whatever else. How you show your content will be in your control. Do you want blue headings like me? You can make them. Do you want images that get bigger when you click on them? You can probably add that to your site.

How can you create a site like this by yourself?

If you are comfortable with web development, I would recommend checking out Jekyll and investigating how to get started. Try the most basic, out-of-the-box configuration and see what you think. Experiment and make changes to the default template to see what you can make for yourself. You don’t need to start your site from scratch: there are plenty of templates out there beyond the default one that you can use to build your site.

P.S. If you want to see the template I built a while ago using code from this site, check out No Cruft Jekyll.

If you are not comfortable with web development, check out WordPress, Carrd, and perhaps do your own research on tools you can use to host your website. I have only used a few but there are so many out there that might be good for you. If you need help, I’d recommend checking out the IndieWeb Getting Started guide. The IndieWeb guide has a lot of tips on how to get started. Some examples from that page of ways you can host your own website include:

• Blogger
• WordPress (like I suggested)
• Micro.blog

As you explore how to build your site, think about what you want your site to do. What do you want to appear on your site? What content do you want to share? Don’t expect to know all the answers to these questions on day one, however: your site will naturally change as you do. But thinking about what you want to appear on your site gives you a good starting place. Maybe you just want an about page. Or maybe you want a blog. It’s up to you.

Have fun

Above all, have fun. Seriously. Building a website can be an incredibly interesting endeavour. I have taken great pleasure in building this one out because not only is it technically challenging (although it doesn’t need to be if you use a tool like WordPress) but also because I have control over all of the content I put on this site. If you have a website, you can decide how it looks, how content like images and posts appear, and more. You become a webmaster!

I think it’s cool when people have their own personal websites.

Seriously.

If you build a personal website, let me know at readers@jamesg.blog. I’d love to learn about what you are doing!