I’m listening…

If you haven’t heard already, CMS is the perfect tool for you to take control of your website without knowing how to code. Now, how neat is that?

It’s understandable if having this statement come from a developer may throw you off, but let me just explain myself. Developing a CMS and using a CMS are two entirely different things. Developers do the difficult part of developing the CMS while you, as the user of the CMS, do your part of maintaining and managing it. Having cleared this up, I would like to draw your attention to reconsidering the use of a CMS. Until recently I was convinced that there is no other tool that is able to provide the opportunity of managing content like a CMS does. How naive I was! This is why I would like to take this opportunity to enlighten you on my thoughts.

I am going to assume that you are already familiar with what a CMS is. With that assumption let’s jump straight to static site generator. I am sure you are keen to know what this excitement is about.

A static website usually implies that your website will not change in content and appearance. At least not without manual modification of the programming files and uploading it to the server. Advantages of static websites include the minimal risk that is involvement in security. It also does not need a significant amount of effort to host a static website. This is important when wanting to achieve minimal load time.

However, this approach makes it difficult to manage your website. It requires a considerable amount of maintenance time and effort. But static site generators help cut the disadvantages of working with static websites.

Let’s talk a little bit more about static websites. This involves having a fundamental understanding of how websites work. Perhaps the figure below will be useful to you.

Figure 1, a diagram of how websites are hosted:

The server always outputs whatever it reads from the files that are uploading. Whenever it is necessary to make changes to a file, it requires a modification of the related file as per the change request. Once that’s done, the file needs to be re-uploaded to the server. There are tools that automatically upload changes to your server with minimal interaction.

To avoid all of this complexity, using a CMS becomes the obvious solution – and why the heck not? I must admit, I’m starting to enjoy creating diagrams so I’ll throw another one in.

Figure 1.1, a diagram of how dynamic websites work:

That got a lot more complicated quite fast, did it not? If you haven’t been paying close attention, you may have missed an important point. In this approach, we are relying on having a stable connection not only to a server but most likely to a database as well. Do I have your attention now? Good. A common problem with dynamic websites (Fig 1.1) is the risk of experiencing a lot of downtime. Without this connection, we will be unable to retrieve the content. As a result, the website will fail to load as it will be unable to generate the content. Another common problem is the issue with having a server big enough to host a powerful website. If your website has a considerable amount of concurrent visitors, the server may overload and fail. Not so pretty any more now, is it?

To be able to keep things as simple as possible, let’s stick to the basics then, shall we? Yep, back to static websites. We already took care of the risk involved in the uploading process, so let’s tackle another one. How do we maintain an up-to-date static website? Unfortunately, this still requires the modification of the files. The solution to this was the use of markdown language.

Before we get started, I’d just like for you to get acquainted with a few technological skills. You will need this to be able to make the best out of static site generators. Now, I know it may sound rather unappealing, but I assure you that it’s worth investing your time in it.

A markup language defines the structure and data of the website’s content. Without any styling, you will have a plain website, but with real content. Throw in a style language and you have a beautiful website with real content! If you want to be even more creative, you will add a dynamic programming language.

Now you have a beautiful and interactive website with real content! Mind-blowing with what little you can do! As mentioned before, static site generators force you to get technical. I know, I know, its not something you ought to have to do. Well, it might just surprise you at how easy it has become to code.

Besides, if it was really that difficult, I wouldn’t be about to give you some lessons on markup language.There are three types of markup languages; HTML, XML and XHTML. Honestly though, you only need to familiarise yourself with HTML. Once you are familiar with it, you should forget about it and learn what really applies to you.

<h1>Hello, World!</h1>

The above code block defines a HTML heading. The tags <h1></h1> state this. It tells the browser that the words “Hello, World!” are part of a heading. This does not mean anything until you start differentiating between the elements used. Follow the above code block with a paragraph like so.

<p>How are we doing?</p>

This time, the tags wrap the text in a paragraph. With this information we can manipulate the content of the website. Once you have finished absorbing that information, you can lock it away. The idea behind static site generator is to make it easier for non-programmers to use HTML and sometimes even CSS. As the name already implies, a static site generator takes static files and generators the content of your website.

Here is an example of what you might need to work with:

—

title: Hello, World!

—

That was a lot more straightforward, you must admit. Depending on the static site generator that one uses, the markup may vary. In the above example, as the static site generator user, you only need to worry about changing the text after ‘title’. Of course, you require to have an understanding what is affected by this change.

Generally, that’s the kind of coding you should expect to read and write. After writing your code the… let me repeat that, after writing your code the automated deployment tool will take care of the rest.

Are you with me so far? The ease of using a static site generator lies in finding the perfect one that meets your needs. A lot like searching for the perfect CMS. It is always important to do your homework first. The style of markup language and the extent to which you can make changes to your website depend on the static site generator. On top of that, it is necessary to set up the deployment tool separately.

However, let me take you to a different world of having a website. It is crucial to have a website that is attractive to your users. Who wouldn’t like to have a selection of websites they enjoy visiting on a regular basis. The way the website looks and behaves has an influence on the joy it brings.

How about creating an interactive website that will make your website come to live? Oh boy, now you are talking! I cannot wait to introduce you to my newest friend JavaScript. I’m sure that next time, I’ll have the opportunity to do just that!

Author: Marfat Abdullahi.