I’m new to building websites, so didn’t know where to begin.
I knew I wanted a simple end product that I had full control over at the lowest possible cost, and that I was comfortable with command line interfaces.
Here is where I ended up.
I use Sublime Text to write content, Hugo to generate a static website, Git for version control, a Bitbucket online repository connected with Netlify as a host. This might sound complicated (and it is compared to an all-online website builder), but there are advantages.
This entire workflow is free. I have total control over style, content and host. I only upload what I change. I can access previous versions locally and in the cloud. And once set up, it’s pretty simple to run (see Final Workflow). However, it did take quite a bit of research to arrive at this. I’ll start with the basics…
To build a website, you need the following:
- software to write your site’s content
- software to generate HTML code
- and a host to store your files and serve it to the world
Writing Content
HTML is the base language of websites. You can write directly in it, but it’s not pretty, and becomes very difficult for anything but the simplest of sites:
<H1>This is a top level heading</H1>
<p>Here is some <em>italic</em> text.</p>
<a href="theurbanist.com.au">This is a link</a>
Instead most people use a CMS (content management systems) with a web-based WYSIWYG (what-you-see-is-what-you-get) interface. Wordpress.com is the CMS juggernaut, and other popular options are SquareSpace, Wix and Weebly. These companies will also host your content and serve it to the world.
Online CMS site builders are easy to use, adaptable and results can be beautiful. However they will cost you about $5-15 per month, and you won’t ever have full control over how your site works.
A middle ground between HTML and an online CMS site builder is Markdown, a plain text formatting syntax which is later converted to HTML with a static website generator, and what I’m currently writing this post in:
This is a top level heading
===========================
Here is some *italic* text.
[This is a link](https://www.theurbanist.com.au/)
By using Markdown I retain control of source files, allowing backup, version control and writing content offline.
You can use any text editor to write Markdown. I use Sublime Text, which is free, cross-platform, intuitive, incredibly extendable and customisable.
Creating Code
I’ve already discussed online CMS website builders. They are a one-stop-shop in writing content and creating code, but the environment is controlled. If you want more control:
you can write directly in HTML (becomes very cumbersome for multi-tiered and inter-connected sites like blogs),
you can create your own CMS environment (for example by downloading the free source code of Wordpress from wordpress.org, install it on your own host and adapt it to your hearts content),
or you can use a static website generator which uses pre-formed templates and themes to convert your Markdown plain text content into rich websites.
It’s called a static website because the HTML code remains the same for each site visit. However, the site content can still be responsive to user interaction and screensize.
While static sites have fixed HTML, dynamic CMS’s require the host to build personalised HTML code for each new visitor from scripts, templates and databases. That’s why you’re sometimes waiting around on complicated websites for content to appear - they’re building you a personalised site on the fly!. In comparison, static sites are fast to load, and can scale to large audiences very easily (I have high hopes).
Static sites are also easier to back up and version control (meaning to keep logged and accessible copies of all previous versions). This probably isn’t critical for most personal bloggers, but as somebody who is writing code every day I feel more comfortable with version control, using Git with Bitbucket as an online repository of my source files.
After you’ve created a draft of your content in Markdown, you run your static generator locally with pre-formed style templates, producing a mock-up of the final website. As you make changes to your content, the local server updates the mock-up, giving you WYSIWYG like capability. When you’re happy, the generator builds the final HTML code which you can upload to your host (or in my case push to my online Git repository).
For my static generator I use Hugo. I haven’t tried others (there are hundreds), but I like Hugo because it is very fast (taking <0.1 seconds to build your website), has no dependencies (you only need to download Hugo), is free and open source (you can change anything), has good documentation and lots of themes to choose from.
Hosting
Finally you need somewhere to store your files on the net so everyone can access them, with hosts typically charging around $5 per month. If you do go with a CMS, I found HostingFacts a useful resource to compare cost, speed and reliability of some of the larger hosts. Of course if you’re really cheap like me, you can do it for free.
That’s one of the great advantages of using a static site generator like Hugo; many places are happy to host you at no cost. This is because overhead on their server is minimal compared with dynamic sites that generate HTML at each visit. You could even make your generated site available from your Dropbox or Google Drive account, and then redirect from a custom domain if you choose (if I had known that at the start of this process, I probably would have just done that!)
Initially I looked into hosting my static page through Amazon Web Services (AWS). Their size and distribution means they should be very fast, and small sites like mine would cost about 1-2 cents per month! But I gave upafter a frustrating few hours trying to work out their documentation. I also decided I wanted my site to be run from a Git repository.
A static site connected with Git
Running a site from an online Git repository has two advantages:
- by definition your files are backed up and version controlled
- only changes and additions are uploaded by Git, useful if the site gets large
One of the simplest ways to start a Git connected site is through GitHub or BitBucket. They both allow free static pages directly off your free account. However both have their disadvantages; GitHub requires that your repository is public (hence your entire website history) and doesn’t allow https, while BitBucket doesn’t allow forwarding from you custom domain, so you would be stuck with username.bitbucket.io. However if neither of these are issues to you, then I would recommend them for their simplicity.
Finally I tried Netlify, a commercial operation which allows free accounts for simple setups like mine. Netlify connects with online Git repositories (like Github or Bitbucket), automatically notices changes there and rebuilds the site using your preferred static website generator, then propagates it to servers around the world for fast site loading. It’s a very impressive system and a nice site to navigate and use.
Wrap-up
So, the advantages of a static site as I see it are:
- speed
- security
- flexibility
- version control
- easier to host
- low (no?) cost
The advantages of commercial CMS are:
- quick and intuitive
- one-stop-shop
- dynamic site and interface
Final Workflow
1) In the command line, create a new markdown page pre-formatted as a Hugo template with hugo new post/new-post-title.md.
2) Open the new file in Sublime Text, edit the ‘front matter’ and write post content:
+++
date = "2017-05-16T17:52:09+10:00"
title = "new post title"
banner = ""
categories = []
tags = []
+++
Some new content
3) In the command line, build a local mock-up of the site by typing hugo server.
4) Review the site at localhost:1313/ in your browser which updates as you save changes.
5) When satisfied with changes, add, commit and push changes to online repository with Git:
$ git add .
$ git commit -m 'new post'
$ git push
6) My host Netlify automatically detects changes in my online BitBucket repository, rebuilds and deploys a new site.
Now it’s live!