There's been a new trend in web development and the static websites. Yet most of the websites online today are still using some sort of CMS such as WordPress. WordPress makes content management simple. For this reason, it has been the development tool of choice for the past few decades. It is important that web developers think about the tools they are using and how it fits with the design problem. For many websites, such as brochure type websites, using WordPress is not the right tool for the job. Yet if you have a look at YouTube you will find many so-called web developers that swear by WordPress for all development. For many cases, building a static site is a better solution.
Dynamic vs Static Websites
For those not familiar with web designs, it is important to distinguish the difference between a dynamic website and a static website. With a static website, as the name suggests, content exists on the server as static HTML files. If the website needs to be updated, a web developer will update the code to reflect the new content. Because content exists precomposed, static websites are extremely fast. However, there are cases where static content is not enough. In this case, a dynamic website is used.
Fetching web pages from a dynamic website is a more complicated process: When a customer or blog reader requests your website, the server will query the database and build the HTML files on-demand. This is an inherently slower than simply returning an HTML file. Dynamic websites also increase the cost of hosting the website. A dynamic website requires a database, a content management system, and a web server. There is also the risk of the database being hacked. Additionally, dynamic websites are hard to scale. If your product or blog post goes viral, the server may not be able to keep up with all the required database queries created by a massive influx of users. It is possible to use cashing plug-ins to alleviate some of these issues and improve the performance of a WordPress website. However, optimizations only further increase the complexity of the website and still cannot perform at the same level as a completely static website.
An Example
Let's take an example which building a static solution would be a much better tool for the job. Say for instance a client requests a basic brochure website for their restaurant. They want to display contact information, dishes, prices, and select testimonials. In this case, it seems quite silly to use a WordPress or another database-driven solution. The content does not change often so there is little need to query the database every single time someone visits the restaurant website. In the past, however, web developers would use WordPress simply because it provided a nice user interface for managing the content. Owners could update prices and add new dishes without having to dive into HTML code or consult their web developer for every little change. Fortunately, it is still possible to have a static website that is driven by a content management system.
Enter the static site generator
Static site generators have existed for some time. They have often been dismissed as too simplistic for advanced web design. This could not be further from the truth. I recently updated two of my websites - www.skyclops.pictures and brandonkalinowski.com using Hugo and Gatsby.
Hugo is one of the most popular open-source static site generators. The tool claims to be the world's fastest framework for building websites. I would agree that this tool is very fast for development. However, the resulting website user experience is not as fast as if the website was created with another static site generator such as Gatsby. However, both tools result in static websites and thus a site built with Hugo will still perform quite well, especially when compared to a database-driven website. From my perspective, Hugo is the tool of choice for simple brochure-type websites. You can use something like Netlify CMS, a git based content management system, to allow the client to easily update content such as adding that new seasonal dish to the restaurant menu or raising all the prices for a local event such as Sundance Film Festival!
Using Hugo
Starting a new Hugo website is as simple as:
hugo new site restaurant
cd restaurant/themes
git clone https://github.com/digitalcraftsman/hugo-strata-theme.gitFrom there you can edit the config.toml file and then add content in the form of markdown files. You can run hugo server to see the website as you develop it. Once you are ready to deploy, run hugo build to have Hugo quickly generate the HTML and CSS files which can be pushed to your web server or CDN.
Hugo has a great theme system which you can browse at themes.gohugo.io. This is a great way to start out and there are a lot of well-designed modern themes you can try out. I ended up using a custom HTML layout that I adapted for Hugo for my Skyclops Pictures website, but this theming system is one reason I would recommend using Hugo for quick web projects such as landing pages and brochure websites.
I am quite proficient with HTML5 and CSS3 languages which is certainly very helpful when developing a website. Coming from a strictly pure HTML and CSS background, it did take some mental energy to adapt to the Hugo system where content is broken out into separate files. In my case, I had an HTML design that I converted to a Hugo template. If you are familiar with HTML and CSS you shouldn't have any trouble converting an existing design to a Hugo template. You will end up with more lines of code than pure HTML, but your website will be much easier to maintain.
With static websites the "backend" becomes very simple
You don't have a database to maintain or a hodgepodge of plugins to update and maintain. Instead, you have mostly vanilla HTML and CSS files that exist in your git repository. Simply commit to make changes to your website and GitHub, GitLab, or Netlify will automatically run the build command and deploy the updated site.
The source code to my www.skyclops.pictures website is hosted on a private GitLab repo and is built with Hugo. It took me about a day to get the website up and running and that included finding suitable content for the portfolio. While the code is not open source, feel free to contact me if you have any questions on how it was built.
The Next Level
I built this website, brandonkalinowski.com, using a much more advanced tool over the course of a six-week development process. This website has a lot of super exciting features that brings the static website possibilities to the next level. I will explain this in detail in the next post.