How I Made This Website

February 08, 2020 - Tech

When I made this website, I learned quite a bit about domain names, hosting, HTML, CSS, and more. So, I thought I would share some of the steps in my process to help others make their own websites.

Buying a domain name

My domain name is registered on Google Domains. It was fast and convenient, because I could just log in with my Gmail account. In addition, they offer privacy protection for free with your domain.

Creating the site

This is a static site, meaning its just plain HTML, CSS, and JavaScript. Static sites are easy to host, and fast to load. There’s no server, no database, and no software updates. This is different from a traditional CMS like Wordpress, where the website HTML is rendered dynamically on a server based on the content in a database.

Choosing a static site generator

Of course writing every page by hand in HTML and CSS would have been tiresome. So, I used a static site generator to help cut down repetitive tasks. This site was made with Jekyll. Jekyll is straightfoward, widely used, and widely supported. If you’re unsure where to begin making a static site, Jekyll is a pretty good default.

Finding a background image

I wanted a pattern as the background of my website to personalize it a bit. I ended up finding one that I liked on Unsplash, which has thousands of high-quality free-to-use images. Be sure to credit the creator to help keep Unsplash and its contributors going. (Edit: I’ve since removed the background image just for readability)

Background image found on Unsplash — Image Source

Getting a font

You could of course use some of the default fonts available on your visitor’s operating system using web safe fonts. However, you may want a font that’s a bit more interesting, and gives your site a consistent look and feel across browsers and operating systems. I used Google Fonts to get the Merriweather font for the headers, and Roboto Mono font for the body text. (Edit: I’ve since change the body font to Work Sans)

Making a gallery

For the gallery widget, I ended up just using a few native Javascript APIs. The layout was easy to achieve using Flexbox, and viewport units. The scrolling controls were easy to implement using scrollTo. Feel free to take a look at the source code using your browser’s developer tools.

On small screens, my navigation links do not fit in the header bar. So on phones, you will notice that all of the navigation links are moved into a sidebar. This feature was quite easy to achieve using a small JavaScript file. Again, feel free to look at the source code using your browser’s developer tools.

Making the rest

The rest of the work for this website was just some HTML and CSS. I recommend the book HTML & CSS by Jon Duckett to make sure you get the fundamentals down. His JavaScript & jQuery book is quite a good read if you’re new to Javascript as well.

Hosting the site

As I mentioned before, since I chose a static website, hosting was quite easy. There were a lot of options, many of them free for small sites, such as Surge, GitHub Pages, and GitLab Pages.

But, I chose Netlify, because they support Jekyll sites out of the box. And, more importantly, they can dynamically resize your images, compress them, and serve them from a CDN, if you make use of their Large Media feature.

Analytics

Obviously, you’ll want to know how many people are viewing your site. It’s useful to know which pages people visit the most, and also serves as motivation to keep making content. Google Analytics was quite easy to set up and is widely used across the internet.

Future Work

I think I’ve reached a point where I’m happy with the site. But, there are a lot of improvements I could make.

For example, something that I may add in the future is a comment system. Though given that this is a static site, it’s not quite straightforward, since there is no database to store the comments. Disqus, and the Facebook comments plugin are popular solutions for static sites, but you give up ownership of your visitor’s comments. An alternative could be collecting comment responses through Netlify’s Forms API, and storing them in Firebase.

I would also like to create dynamic background images for the site using wallpaper groups and fractal flames. In the future I may even release the code as a standalone app as well a la Electric Sheep.

And, I still need a favicon. I was thinking of creating something similar to the Metal Gear Solid 5 Emblem creator as a fun side project. It was always disappointing that you could never use your Mother Base emblems outside of the game.