When the web started, people used to build websites on their PCs then send the resulting material to a web server that would make it available to anyone who asked to look at it. Very early websites were built by hand, but later many programs became available to make the process easier. These programs looked like desktop publishing programs, except the results weren’t published in print, they were published on the web. However, after a while everything got more complicated.
Early websites were ‘static’ because they couldn’t display information that changed minute by minute, such as the stock levels in an online shop for example. However, many people building websites wanted ‘dynamic’ behaviour with web pages that could display constantly changing information. The way they achieved this was by using database systems that held a mixture of web page templates and live data. Whenever someone requested a particular web page, software running on the web server would fill in the appropriate template with live data and create a page that reflected the state of play at that time.
With a database system it meant that anyone, not just a web developer, could log on to a web server and put fresh information, such as a news article for example, into the database. A journalist writing such a news article wouldn’t have to understand anything about web page templates. All they had to do was type in their article, and it would immediately become visible on the website.
Unfortunately there are some disadvantages to ‘dynamic’ websites, which compared with ‘static’ websites are:
The most popular system for building ‘dynamic’ websites is called WordPress. There are plenty of similar systems as well, such as Drupal and Joomla for example. None of these systems is going away any time soon. However, for many kinds of website, using a large and complicated content management system like WordPress is way over-the-top. For this reason, many web developers are going back to the original way of creating websites, the ‘static’ way, and I’m one of them. They are particularly suitable for small business websites, which is what most of my web development work involves. The website you are looking at now is a static website. This doesn‘t mean that nothing can change, or that every page just consists of text and images that sit there and do nothing. It simply means that every page on the website is built before being put on the web server that hosts the website, so the web server never has to do anything ‘clever’ and just has to hand out ready-made pages on demand.
It’s not quite as easy to edit a ‘static’ website as it is to edit a ‘dynamic’ website, but anyone can learn to do it. Unfortunately there aren’t many programs available to help manage a ‘static’ website, so I wrote one. The program isn’t complicated, and doesn’t do very much, but it helps to speed things up and reduces many website maintenance tasks to simple button-clicking, which cuts down the number of things you have to remember. However, it’s possible to do everything manually, as described below.
You can build a modern static website using just three main pieces of software:
Please note that if you’re making simple changes to a website that’s already been designed, you can ignore UIkit and Sass completely. All you need to do is change the existing content however you want, then re-build and re-publish the website with Hugo.
Obviously some other software is involved:
If the graphics programs mentioned above are a bit much, you can just get ordinary photographs from your mobile telephone or camera and put them straight onto your website. You’d better make sure they’re not too big though, because large images take ages to load and people soon get fed up if you make them wait. Hugo actually has a built-in facility for shrinking images when it’s building a website.
Hugo is probably the fastest website builder in the world, which is one of the main reasons that its popularity is rising all the time. You can find out all about it at https://gohugo.io/. Then you can download the latest release from https://github.com/gohugoio/hugo/releases/. Some of the Hugo documentation can be very confusing, but you don’t have to understand most of it if you’re just updating an existing website. There are versions of Hugo for various different systems, such as Linux and Windows for example, and for each system you can get either the 32-bit version or the 64-bit version.
Are you confused about 32-bit and 64-bit systems? Never mind, you don’t really need to know what these terms mean. All you need to know is that 32-bit versions of Hugo will work on 64-bit systems, but 64-bit versions of Hugo won’t work on 32-bit systems. Therefore, if you don’t know whether your system is 32-bit or 64-bit, download the 32-bit version and it’ll definitely work. Having said that, if you’re using a modern version of Windows, it’ll almost certainly be a 64-bit version.
Hugo has no modern user interface, because it doesn’t really need one. It runs from the command prompt. Once the program has been installed, typing ‘hugo’ at a command prompt will make the program run, though usually you’ll need to type a bit more than that. To make changes to an existing static website, all you need is a simple text file editor to alter the website’s content, and Hugo to re-build the website. There will be step-by-step examples.
An entire website will be held in a single folder, which will have a standardised name indicating what it contains. For example, my own website is held in a folder named ‘JGW-Website’, because my initials are JGW. Throughout the following explanations, I will use my own website to show how everything works.
Within the website folder you will find at least the following three things:
You might also find other files, such as ‘notes.txt’ for example, but such files do not have any effect on the website. All they do is contain information that might be useful for people maintaining the website.
If you want to change the content of a website, you will usually find it in the ‘content’ folder. All websites have a ‘home’ page, which is often different from the other pages on a website, and is normally held in a file called ‘_index.html’ inside the ‘content’ folder. Most websites also have an ‘about’ page, a ‘legal’ page, a ‘contact’ page, and so on. These pages are usually held in folders of their own within the ‘content’ folder. For example, the ‘about’ page will usually be found in a file named ‘_index.html’ inside the ‘about’ folder which is itself inside the ‘content’ folder.
Although it is possible to build websites using MarkDown files (whose names end with ‘.md’), I use HTML files (whose names end with ‘.html’). MarkDown is supposed to be easier to use than HTML, but a lot of the HTML facilities that I use are not available in MarkDown. Also, HTML is an international standard language for building web pages, whereas MarkDown is available in several different versions, none of which is of much help as far as I’m concerned.
In summary, if you want to change the ‘about’ page then you just need to use a text editing program on the file named ‘content/about/_index.html’. If you don’t know much about HTML you can always copy bits and pieces that already exist and change those copies however you like. For example, an HTML paragraph starts with ‘<p>’ and ends with ‘</p>’. If you want to add a new paragraph to the ‘about’ page there will already be plenty of examples in the file you are editing. All you need to do is copy an existing paragraph then change the text.
Unless you are completely re-designing the website, you can more or less ignore the ‘themes’ folder.
This is the configuration file for the website. Configuration files can be in several different formats, but all of the websites that I’ve been involved with use the ‘.toml’ (‘Tom’s Obvious Markup Language’) format.
Once you’ve built the website in the ‘public’ folder, you need to publish it on the Internet. In other words you have to put it on a web server so that any Internet user can see it using a web browser. Website developers refer to this process as ‘deployment’. Different web hosts often use similar software, but the exact details of how to deploy a website on a particular web host‘s server will often be specific to that host. Most web hosts support an old-fashioned method of transferring files from your computer onto their server(s) using FTP (File Transfer Protocol). They will probably also support a popular control panel facility called ‘cPanel’, which supports the uploading of files. A less common facility that is very easy to use, once set up, is called ‘WebDav’, which was originally designed to support multiple authors working together on a document.