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
Creating the site
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)
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
Making a sidebar
Making the rest
Hosting the site
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.
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.
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.