November 20, 2023

Let's make a Web site

It has been never easier to create a great looking and performant website than it is today. There is an abundance of options that you can choose from, whether you are a novice or a front end pro. With all the options comes, what the germans nicely call "Die Qual der Whal". Or in english what is the best solution for me.

To get you started I created this short intro.

Options

Reduced to atoms a website has basically two important parts

  1. The presentation (or looks, obviously:)
  2. The content (text, media)

The tools that allow you to create a website are either

  1. Monolitic - they do both, the presentation and content
  2. Modular - a tool set with separate tools for presentation and content

Since one of the most important functions of the tool is to manage the content, they are referred to as the CMS or Content management system.

We shall explore both types below.

Monolithic

The most widely known one is arguably Wordpress. There are also Drupal, and others.

The presentation part is handled by what is called the theme. Themes are created by front-end designers and can be further tweaked by you, even without any technical knowledge. Of course there is a whole marketplace of free and paid ones, you just need to choose one.

For creating the content, monolithic CMS usually provides a Word like editor. Here you can write your text, add media and links. There are also many advanced tools for handling categories, multiple languages, point-in-time publishing, versioning, collaborating. For standard content creation, all CMS tools offer roughly similar capabilities.

Hosting

To start creating your web, you have again lots of options.

  1. The most begginers friendly is to use a "hosted" version, for example Wordpress.com, Kinsta .

There are also many other providers, that might be closer to you and speak your language. 2. Alternativelly, your cloud provider usually has a version too, for Azure 3. If you need more flexibility or control, create a cloud virtual machine and install the tool manually. Of course this is the expert option.

Modular

If you decide to go the modular route you will build your website with a combination of tools.

First you need to decide how you will manage content.

Flat Content

The simplest choise is just to use git! Really, all your content can live as a collection of files. Take a look here https://frontmatter.codes/.

Content Editor

A less technical and more user-frienly option is to use a content editor. This usually looks very similar to the monolithic editor. In fact you can use monolithic tools like Wordpress in this role! Because the tool only manages content we call it the "head-less CMS". (The head in this case refers to the website design.) To find the best one for you check this list.

Site presentation

To create the final website for your content, you need to use a Site Generator tool. What the generator does is to combine your hand-coded HTML (or React js) design with content from the head-less CMS.

One of the better known Site Generators is GatsbyJS. In contrast to monolithic tools, the site generator is a tool you run on your pc/mac. It is not a service, web or app. Once the tool is executed, the output is a colletion of static files.

Automation

Of course the site generation can be fully automated. A great way is to use github actions. The action starts when you check-in your design changes to github. It will run the site generator in cloud on github. The generator then fetches the content and combines it with your design. Finally the action can also deploy (copy really) the resulting static files to your website hosting. (If this seems complicated, azure static websites have a visual tool that will setup all of the above for you!)

Hosting

Hosting is the last piece of the puzzle so you can see your website online. First your need to choose a provider, then upload the files and you are done. There is an endless number of hosting options, with many of them free. For example azure static website (complete with SSL).

Summary

So what should I use?

You can not go wrong with a monolithic tool.
They are battle proven and used daily by millions of users. It is also the quickest route and well suited for non-technical users.

But when should you invest time into learning a modular tool set?
If you need maximum control over design and performance. Or you just enjoy HTML and React programming.

I cannot stress this enough, it has never been so easy.
If you start now, you'll have a website done in a couple of hours.

Happy building!