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, 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 get 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.

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.
  • 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