I love static websites.
No PHP. No big server-side databases. None of that stuff.
Just pure, static files being served up and displayed in a browser. The way “The World Wide Web” used to be.
Not that there's anything inherrently wrong with non-static webpages, mind you. Sure, they serve a purpose. eCommerce websites with inventory loaded from a database. Sites focused on communication and constantly changing content (like forums or social media type things). Those all serve a purpose.
Just the same, there's something truly wonderful about a fully static website.
Even better? A static website… built from pure text files… using a static website generation tool. Like Hugo which takes simple text files (with a little markdown) and generates full websites.
Here's just a few reasons why I build The Lunduke Journal website (the one you're reading right now) as a completely static site in Hugo.
- It's fast.
A static website, by definition, doesn't need to hit a database. It doesn't need to generate content on the fly. No matter how fast your server infastructure is, hosting static content is always going to be faster on the same hardware and network.
- It's easy to edit on any computing device.
Sometimes I work from my Linux desktop. Sometimes from my 30 year old DOS HP Palmtop. Sometimes from my old Powerbook 180c (which came out in 1992). Seriously. Perhaps I'm weird, but that's how I work. And, because I generate my website with Hugo… I can work on any part of it from any Operating System on any computer (past or present).
This article? Written entirely on a Powermac 6100. Why? Because I can.
- It's more secure.
The more complex a system, the less secure it gets. That's a hard fact that every security researcher has understood since the dawn of computer networks. Static files keeps things simple. And, because of that, reduces the total available ways to attack a server.
- It's lower maintencance.
By the same token, this means that I don't need to worry about making sure my MySQL server is always up to date. Or that I'm using the latest version of any given dynamic content system (such as Drupal, Wordpress, etc.), with security patches. If my web server can serve up a static file, I'm good to go.
- I can host the files just about anywhere.
This one is great for increasing the speed and reducing costs. Because my site is 100% static files… I can host those files… anywhere.
For example, I can host the entire Lunduke Journal website on any, low-cost object storage type service I want. One of the sponsors of Lunduke Journal, Linode, offers that type of object storage completely free until the end of May (almost three months from writing this article).
(If you do decide to go that route – sign up at linode.com/lunduke. That'll give you an extra $20 credit. Which'll go a LONG way.)
All of which are great reasons to go fully static (with something like Hugo to manage things). Here's a quick run-down on how to get started, and an example of my workflow for how I publish The Lunduke Journal.
1) Install Hugo
Installing Hugo is crazy easy for anyone with even just a small amount of experience in a shell – and it works great on most modern computing platforms (like Linux, Mac, Windows, etc.).
Go to the Install Hugo page for details on each platform. They've done an excellent job of documenting the process and options. There's very little for me to add, other than this:
I highly recommend keeping a copy of Hugo itself in the same directory as the website you are building.
Because Hugo, like all software, changes over time. New features. Tweaks. This can, potentially, create compatibility issues as time goes on. Keeping an archived version of Hugo that you work with ensures that you can build your website the same way now, as you will 5 years from now.
2) Create your Hugo Theme
The way Hugo works is pretty simple:
You create a theme for the way your website looks and how it's laid out.
Then you write individual plain text files for each page. These files have a simple markdown language for links and basic formatting.
Hugo then creates the entire website (every individual static HTML page) by applying the theme to the pages you've written.
Clearly, your Hugo theme is a pretty critical piece of the puzzle.
I recommend starting with one of the (hundreds) of themes up at the Hugo Themes site. From there you can tweak the theme to your hearts content.
3) Write some content
Since all pages/posts within Hugo are plain text files, the process of creating new pages is pretty doggone simple.
To illustrate my point, what follows is a complete post that you could save (with a .md extension within your websites /posts directory):
That is, literally, a complete post. Title, date, if it's a draft… and then the text body (including a hyperlink).
I write every single article on The Lunduke Journal using this. And, like I mentioned earlier, I do so on a wide variety of platforms, thanks to the power of plain text files.
Then all I need to do is copy that text file over to whatever system I have Hugo on (which, to make my life easier, my whole Hugo folder is synced to multiple computers – including a remote server that I can SSH into) and generate the full, static website.
4) Generate the static website
Generating your complete website in Hugo is dog simple. Change into the directory with your website and run:
Seriously. That's it. It will then generate your entire website (every single page) and put the resulting files into the /public directory. Which you can then copy up to whatever server you happen to be using.
Extra handy: Hugo has a built-in web server for testing purposes. Run:
hugo server -D
The “server” parameter tells Hugo to run in server mode… and the “-D” parameter tells Hugo to render all content… even if any given text file is set as a “draft.”
Then open your web browser and go to “localhost:1313”.
Makes editing your content and tweaking your theme incredibly easy. What's more… generating the files is wicked fast. We're talking milliseconds here (at least most of the time). Just awesome.
How I typically use Hugo is exactly as outlined above:
Write an article on whatever computer I feel like using.
Copy that text file over to one of my machines with Hugo on it (if I'm not already using one).
Upload the /public folder.
Boom. Done. Static website deployed.
Truth be told… I've automated that last part. A simple shell script that runs Hugo and uploads the files for me.
Because I'm lazy.
So, there you go. Following this approach gives you a fast, static website – one that can be hosted on any server or object storage system on the platnet – that you can write content for using just about any computer ever made.
Which is pretty doggone nifty.
The articles here at the Lunduke Journal are often also available as a Video episode and Audio Podcast.
Ways to read the articles: RSS Article Feed.
The Lunduke Journal wouldn't be possible without the support of Linode. Linode provides some of the awesomest Linux server hosting in the world – sign up using this link to get $20 hosting credit. Which ain't too shabby.
Ways to support The Lunduke Journal: