Building a Simple & Affordable Website

Website development is not exactly my forte. Though I’ve dabbled over the years, I spend most of my time in C++, C#, and Java. Despite this, it’s fun and helpful to run a blog and portfolio site (the very one you’re reading), so I need to know a little bit about websites!

Over the years, I’ve tried a few different approaches to building and hosting this website before landing on what you see before you. This site is simple, easy to maintain, fast to load, secure, and (importantly) inexpensive to host.

In this post, I’ll explain the approaches I’ve tried in the past and how this site is currently built.

First Steps

Way back in 2005, I was tasked with building a website for a high school club. Knowing absolutely nothing, I created HTML, CSS, and Javascript files in Notepad and cobbled something together. I didn’t have any money, so I found a free web host and put the site up there.

No matter how complex you make it, websites ultimately function by delivering HTML, CSS, and Javascript to a user’s browser. So as I did here, it’s entirely possible to build a site by directly writing those files by hand. Many web developers find this tedious, but even today there is a movement to go “back to nature” (so to speak) and do just that.

Free web hosts may be convenient, but they are unreliable and often slow. I probably ended up moving this club site between a dozen free web hosts over several years. Also, with no dedicated domain name, the site’s URL would always be a subdomain or subpage of the free host (e.g. http://myclub.freehosting.com) - not very professional.

First Portfolio Site

Around 2010, I wanted to create a portfolio site to showcase my college class work and help with finding a job. I decided I’d like to try some sort of framework to make development more organized and easier.

If you’re searching for website frameworks, you’ll probably find WordPress right away. It’s a ubiquitous framework that’s used by a ton of websites. It’s feature-rich, popular, and flush with plugins and add-ons. It seemed to be exactly what I needed!

I didn’t realize at the time, but WordPress was probably overkill for my needs. While WordPress can be used for simple site development, it’s actually a fully blown content management system. All the content on a WordPress site is stored in a MySQL database, and server-side PHP code executes to generate the HTML pages that are delivered to clients.

As a result, hosting a website powered by WordPress requires a web host that provides the ability to host a database and allots time on a web server to execute custom server-side web scripts (PHP in this case). There are a lot of web hosts out there that offer these services, but they typically aren’t free: DreamHost, HostGator, GoDaddy, etc. Ultimately, I landed on a host called “A Small Orange” at the recommendation of a friend. Web hosting was about $50 per year.

Furthermore, I wanted a dedicated domain name, so I used Dotster to purchase clarkkromenaker.com. The domain costs about $20 per year.

I ran my WordPress site for a few years, occasionally adding a portfolio item or blog post. It was pretty easy to use, but I’d return to it after several months to find that all the plugins (and WordPress itself) were out of date and needed to be updated.

A New Blog

Around 2015, I decided to refresh my site. I wasn’t unhappy with WordPress, but I came to realize that it was more complex than it needed to be. Working as a software engineer taught me the importance of reducing complexity!

At some point, I stumbled upon the concept of a static website generator. The idea is to write website content in a simple text format, but then run a tool to convert that content into HTML, CSS, and Javascript files.

The “static” refers to the fact that the generated website consists of just HTML/CSS/Javascript that is delivered to viewers of the site. In other words, there is no need for a database, and there is also no need for server-side code execution to generate HTML (called “server-side rendering”, which is what WordPress does).

This may seem severely limiting, but you can accomplish a surprising amount just by delivering static files to a user’s web browser. You really only need server-side code execution or databases for more complex use cases (e.g. persisting user accounts across devices, running code to process or generate data, implementing a complex web application, etc).

This very site you are reading is generated using a static site generator called Hugo, which allows you to write most of your site in Markdown. It also provides a variety of site templates and add-on functionality (like syntax highlighting or mathematical notation). Whenever I want to publish the site, I run a command line tool to generate a single folder containing the entire site.

A static site doesn’t require much web hosting functionality: it just needs to serve files on request. While “A Small Orange” can do this, I’d be paying for a lot of functionality that I wasn’t using. Instead, I realized that I could simply host my website on AWS S3.

Based on AWS’s pricing structure as well as the volume of traffic to my website, hosting on S3 literally costs pennies - about $0.04 per month. I also maintain the DNS record for my domain name in AWS Route 53, which is $0.50 per month. So, web hosting is about $6.50 per year.

My domain name is still purchased via Dotster, and still costs about $20 per year. It’s hard to avoid this, though purchasing the domain for multiple years can be cheaper than purchasing a single year. Using less popular top-level domain can also lower the cost (I bought a .com but there are plenty of other fun ones like .xyz or .lol or .tech).

By the way, another benefit of static site generation is that all the site’s content is on your local hard drive - nothing is tucked away in a remote database that needs to be kept secure and backed up. Maintaining an effective site backup is as simple as putting your site content under version control. I keep my site in a GitHub repo.

But Can We Do Better?

When AWS sends me a monthly bill for 54 cents, I feel like I’ve really made it. I’ve really figured out this web development thing.

But there are still a few problems:

  • When you host a very simple website on S3, you do not get https support. So, my site only supported http.

  • I noticed that site loading was often quite slow. After doing some research, it seems that I could resolve this by using more complex AWS features like CloudFront CDN. But it was unclear to me what the impact on my monthly bill would be.

  • AWS bills based on usage, rather than at a flat rate. Though my monthly cost was very low, I was always wary that I might someday accidentally use too much bandwidth (a sudden influx of traffic, a troll downloading a ton of files from my site directory, etc) and wake up to a massive bill.

So, what can we do? Fortunately, I found another service that seems to check all the boxes: GitHub Pages.

GitHub Pages allows you to host a website from a git repository on GitHub. Each GitHub user gets one free site. And fortunately, it supports https out of the box, and I found load times to be quite fast.

Are there any downsides? Well, the repo hosting the website must be public. So make sure there’s nothing sensitive in there. I don’t like the idea of “work in progress” posts and commit history for a personal website being public, so I actually host my dev files in a private repo and just put the published files in the public repo.

I also have to trust that GitHub won’t change or discontinue the service. I am breaking the “ don't build your castle in another person's kingdom” rule, but the deal is good enough that I think it’s worth the risk.

Conclusion

Though I’d still consider my website development skills to be amateur, I think I’ve learned enough to convey a bit of advice:

  • Writing your website directly in HTML, CSS, and Javascript may be a fine approach, though there are some tedious aspects to it.
  • To alleviate those tedious aspects, consider a static site generator like Hugo or Jekyll.
  • Strongly consider whether your site needs a database and server-side code/script execution. Such features are provided by fully blown content management systems like WordPress or Drupal, but may be overkill for your needs. Unless you’re building a complex web application, you probably don’t need it.
  • Hosting a statically generated site on AWS S3 is likely inexpensive, unless your site has a ton of traffic and/or serves very large files. Using GitHub Pages is also a great choice these days.
  • Purchasing a domain name may be the most expensive overall cost, but it can be cheaper if you buy in 5 or 10 year increments or use a less popular top-level domain.
  • Consider how you will keep your site’s content backed up. Static sites can be easily version controlled via Git, but a site that stores its content in a database will require some mechanism to back up the database on a regular interval.

That’s my website journey so far - if you’ve read this far, I hope you’ve found some useful tips for how to approach developing your own websites!

Web 
comments powered by Disqus