The Basic Structure of a Static Website

Technology engineering module Technology engineering module Follow Jun 18, 2019 · 3 minutes read
The Basic Structure of a Static Website

The goal of this article is to use Jekyll as an example to describe the basic structure of a static website.

This article is suitable for the following readers:

  • You want to build a static site and publish it yourself;
  • A basic understanding of front-end related terminology, such as HTML, CSS, etc.

This article is not suitable for the following readers:

  • Novice newcomers: Some concepts in the text may confuse you, so I suggest you first understand the basic terms.
  • Quick Completion: Compared to your own build (whether static or dynamic), existing platforms may be more suitable for your needs, such as;
  • High-level people: The target audience for this article is a static website beginner, and your time is worth spending on something more important. Of course, you are welcome to criticize and correct this article.

In the text, I first introduce the component concept and logical relationship of the static site, and then explain the above concept with Jekyll as an example.

1. Composition and logic of static websites

Classified by component type, a static website consists of the following three parts:

  1. HTML, CSS, JS;
  2. Configuration file;
  3. User content.


They are the classic content of the early Internet and are still a basic part of building a station today. The three built a website page in collaboration with each other: HTML determines the structure, CSS beautifies the style, and JS defines the action. This content will not be elaborated here. If you don’t understand, please use Google and Wikepedia.


By using the three tools above, we can post the page! But wait… handwritten website? are you kidding me? ! This seems to be the work of our parents’ generation in the early days of the Internet in the 1990s? Do I still have to do this now?

Unfortunately, we do need them (HTML, CSS, JS) to component pages, but the good news is that we can now do most of the work through the Site Builder!

1.2 Configuration File

In order to avoid the tedious work of handwriting web pages, people usually do the job by using templates in the site builder. Imagine this scenario: with just a few simple lines of commands (or even a few clicks), we’ve built a beautifully-featured website! awesome! (There are many compilers, such as Jekyll, Hexo, Hugo, etc., but considering that they are all standardized, this article will not say more.)

At the same time, we need to face a new kind of content: configuration files.

Its role is to provide some basic information, such as the site name, plug-in information, etc., so that the generator can build a website that meets our needs. They may be used in different formats such as YAML, JSON, and more. Regardless of the format, they all work the same.

1.3 User Content

In the above we talked about generating HTML, CSS, JS through a configuration file (instead of handwriting), and finally we got a site. The next step is to provide the content of the website. On a single page, we can present text, images, videos and other multimedia content.

In this way, a static site is complete. To sum up, it includes:

  • HTML, CSS, JS: single page;
  • Profile: Generate the above page;
  • User content: including multimedia content such as text and images.

2. Take Jekyll as an example

Some of the above are skipped: compiler. Although they are standardized, they often cause a lot of troubles in actual operations, such as installation failures, compilation errors, and so on. Especially when you need to install a compilation environment on different machines, it is even more troublesome.

This is the reason why this article uses Jekyll as an example. We pass these tasks to the cloud server through Github pages, so we only need to pay attention to the text content. In other words, we only need a text editor!

Let’s take a look at a typical and simple Jekyll directory. First we have HTML, CSS, JS files:

├── index.html              # HTML page
├── _layouts                # HTML template, included in page
|   ├── default.html
|   └── post.html
├── _includes               # HTML component, included in page & template
|   ├── footer.html
|   └── header.html
└── assets                  # Resources
    ├── css                 # CSS
    |   └── main.css
    └── js                  # JS
        └── main.js

Then we have the configuration file:

└── _config.yml             # YAML (Configure file)
└── _data                   # YAML folder
    └── members.yml

Finally, it is our content:

├── _posts                   # Posts
|   ├──
|   └──
└── assets                   # Resources
    └── images               # Images
        └── a.jpg

The above is the most basic file structure in the Jekyll folder.

  1. This interesting and vivid picture comes from this website

Bian Wenbo - Newsletter
Get the latest news right in your inbox. I never spam!
Technology engineering module
Written by Technology engineering module Follow
Moore's Law needs to double every 18 months? As AI, I only need to double it for 3.5 months! What is the tool?