All the ways you can build a web based on content (I)

Intro

After many years working on CMSs (Content Management Systems) and creating websites for myself and others, I have come to understand that the basic problem all website owners have is:

How to go from data to working websites?

I'll try to answer to that question through the examples on this series of articles.

Of course, everything could get very complex, very fast. Data could come in many flavours and sizes. And the website could be a fully interactive complex app, such as Facebook, Amazon or Netflix... or as simple as your regular Joe's Restaurant. I'll try to keep the complexity to a bare minimum, so you can understand for yourself how the inner technologies work.

The one thing you need to know though: there's not a single solution to solve all these websites' needs. I hate reading myself saying this but in this particular case, how to go from your data to your website? It really depends...

Basic example

Let's start with the basics and create an example website we can use as a starting point. A fruit store called FruitLovers with 2 products: lemons and strawberries. That's 3 pages: one page as home/index page which will list the fruits, and one for each fruit, like so:

- index.html   
- products/
    - lemon.html
    - strawberry.html

The basic structure of our HTML web pages would be:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title of page</title>
  </head>  
  <body>
    ... 
  </body>
</html>

Simple, no? Let's add a header to all our pages:

<header>
  <h1>🍋 FruitLovers</h1>
  <p>
    If life gives you lemons... 
  </p>
</header>

And a footer as well:

<footer>
  FruitLovers © 2021
</footer>

Now the main content of our home page:

<main>
  <h2>Fruits you can buy from us</h2>
  <ul>
    <li>
      <a href="products/lemon.html">
        Lemons, our classic
      </a>
    </li>
    <li>
      <a href="products/strawberry.html">
        Strawberries, less sugar than lemons!
      </a>
    </li>
  </ul>
</main>

Now blending everything together, here's the HTML structure for our home page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FruitLovers - Home</title>
  </head>  
  <body>
    <header>
      <h1>🍋 FruitLovers</h1>
      <p>
        If life gives you lemons... 
      </p>
    </header>
    <main>
      <h2>
        Fruits you can buy from us
      </h2>
      <ul>
        <li>
          <a href="products/lemon.html">
            Lemons, our classic
          </a>
        </li>
        <li>
          <a href="products/strawberry.html">
            Strawberries, less sugar than lemons!
          </a>
        </li>
      </ul>
    </main>
    <footer>
      FruitLovers © 2021
    </footer>
  </body>
</html>

Let's get to our lemon page. All the structure, plus the same header and footer will be there. Let's add a title, price and an image:

<main>
  <h2>
    Lemon
  </h2>
  <p>
   Today's price is: 2€
  </p>
  <img src="images/lemon.jpg" />
</main>

We should have a way to go back to our home page 😅. Let's add a link to go back:

<main>
  <a href="index.html">
    ← Home
  </a>
  <h2>
    Lemon
  </h2>
  <p>
   Today's price is: 2€
  </p>
  <img src="images/lemon.jpg" />
</main>

It would also be nice if we show the list of other products in each fruit's page, like so:

<main>
  <a href="index.html">← Home</a>
  <h2>
    Lemon
  </h2>
  <p>
    Today's price is: 2€
  </p>
  <img src="images/lemon.jpg">
  <h2>
    Other fruits you can buy from us:
  </h2>
  <ul>
    <li>
      <a href="products/strawberry.html">
        Strawberries, less sugar than lemons!
      </a>
    </li>
  </ul>
</main>

To have something more palatable, let's add some basic style in a CSS file too:

- index.html   
- products/
    - lemon.html
    - strawberry.html
- styles.css 👈

html {
  font-family: sans-serif;
}

And add it to all pages with a link tag in the head:

...
<head>
   ...
   <link rel="stylesheet" href="/styles.css">
</head>

This is the end result:

The technology needed for a website like this? A pretty basic static web server, cheap (mostly free!), reliable and compatible with anything that reads HTML.

In this example, the input and the output are on the same place. The website itself is where the content is.

Think about all the things that need to be done just to add another product. You will need to:

create a new page, following the same design/pattern;
add it to the list in the homepage;
and add it to the list of all the products' "Other fruits" lists.

So many places, and so easy to commit a mistake! 😅

What if you want to change the design or structure of any of the pages, or if you want to change the header or footer, and the same goes if you want to add an analytics script. In all these case you'll have to edit all pages!

A solution like this is OK for a website owner with limited resources, where you can count all the pages with one hand.

However, I think it's clear to say there are already lots of things that are repeated in our website. The header and footer are repeated all over. The fruit product pages are really similar, only differing in the specific data of each fruit. For maintainability, we should only write things once and keep the data somewhere else.