Web in a Day is the first in a series of tutorials to create modern websites using Jekyll and J1. This Kickstarter focuses on Jekyll’s basics and the J1 Template system, which all people should know for a fast and successful way of creating a modern static website using Jekyll and J1.
It is highly recommended to read and work on this tutorial by everyone. Independently from what level of knowledge they begin. Jekyll is quite different in comparison to classic Content Management Systems (CMS) like Joomla, WordPress, or Drupal.
We recommend reading and work on this tutorial by everyone. Independently from what level of knowledge they begin. Jekyll is quite different compared to classic Content Management Systems (CMS) like Joomla, WordPress, or Drupal.
No surprise: Jekyll and J1 are different as well.
It sounds much, spending a whole day to get Jekyll to know - yes, it’s much. You’ll find a lot of Blog articles like Jekyll in 15 minutes on the Internet. But what can be learned in 15 minutes? Most of these blogs are intended to help install Jekyll and get the first steps managed out of the box, to be fair. If you run Jekyll out of the box, the resulting website (from the build-in theme scaffold minima) might somewhat frustrating. You’ll get a pretty simple site based on Jekyll’s theme minima.
To not waste time, get through the tutorial and find out what is the Jekyll Way. And if this is the way you want to go. Have a good time, a good day learning Jekyll, learning how to use Jekyll and J1 for your new website.
What is a static site?
A static site serves the content straight to the user as it’s stored on the server-side (see (3) below). To put it in another way, in opposition to a Content Management System (CMS) like Joomla or WordPress, which use a database to load content dynamically, a static site will directly load the required data files already prepared on the server.
Server-side rendered (prepared) static content
Rendering Engine (e.g. PHP-based)
Database (e.g. MySQL, Postgres)
Static content (Images, Videos, JS- and CSS files) and Caches
From the access schema shown above, it’s obvious that static websites are incredibly simple. For this - and other good reasons - in the last few years, static sites have greatly increased in popularity. This increase in using static webs is primarily due to the availability of an increasing number of excellent developing tools for those webs and, not least, a stronger desire among businesses to optimize website performance and security beyond the limits of a database-driven CMS-based site.
To make it simple, a dynamic website uses rendering system-based databases and a scripting engine like PHP (rendering engine) to generate the content of a page when a user requests it.
Why use a static site?
What are the advantages of a static website over a dynamic site? You may be wondering. Why should I build a static site when I could do the same by WordPress? Well, having a database, which always requires a complex rendering system for dynamic pages, implies a lot of downsides. Here come the main advantages of using a static site over a dynamic.
The better performance and a crazy fast load time. One of the main advantages of using a static site is the fact that it is crazy fast to load. Indeed, when the user requests a page, there is no need to request a database and various files to generate the page itself as all the content is already placed in a one and only file: an HTML one. That’s why by using a static site, you will get a boost in your loading time that will provide a great user experience for the internauts. Moreover, we know that more and more people are surfing the web using their smartphones with, sometimes, poor internet connections. That’s why having fast loading times will participate in making your website mobile-friendly.
Building a static site and hosting: you will save much time and money. Using a static site, you will only have most of the time only HTML and CSS files to host. This kind of file is super light-weight which also means that you will not need a powerhouse hosting to have a static site up and running. Moreover, if your traffic suddenly increases, your site will not go down, contrary to a dynamic site that should request the database each time for every user.
You’re the master. Using a CMS means, giving control over your site to others. Simple like this.
Why use a site generator?
Working with pure HTML files is annoying; senseless today. Indeed, if you need to make a modification on your self-managed pages, you have to manually change every file. That’s monkey’s work from the early days of static websites. If your site comes with ten pages, it can be manageable but imagine if your site is providing 100+ pages or the blog planned for hundreds of articles?
Using a static site generator will solve this issue as it separates the content and the template giving web pages a common, manageable structure. To say it another way, by using a static site generator, you will only need to make the modification once, and the generator will apply it to all your pages.
As the popularity of static sites is growing, there are plenty of static site generators available on the market. The more famous are Next.js, Gatsby, Jekyll, or Hugo. Each one has its own specificities and may suits you better depending on the programming languages you already are familiar with.
Which static site generator should I use?
This website is powered by Jekyll. For good reasons.
The following questions will help you review this chapter for the essential topics for better learning success.
First, answer the questions on paper. Before you look up an answer, take some time to answer the question yourself. If you find it challenging to find the correct answers, refer to the previous sections.
Clicking the link on the question number will open a new page (tab) in your web browser and point you to the answer. This page helps to navigate to the questions by a table of content (TOC). Go for the question number or the chapter title.
|If you finished the questions section, you could close the browser windows (tabs) opened for answers or questions and continue on this page for the next section.|
What is the general difference between dynamic and static websites in terms of using databases?
Static websites are considered to be safe. Are there any reasons for this?
Are there any reasons to use a site generator for static websites?
A lot you’ve learned, time to summarize what is in behind. The last chapter Summarize! should help on that. Summarize! offer some handy sections to remember what was presented, giving an outlook what could be done next. This section provides an overview on all chapters this tutorial and finally useful links to read more.
See all sections below:
Recap — What has been done, what’s explored in current section
Whats Next — Find to go further, what’s planned next
All Chapters — The full chain, all chapters
Further Reading — List of helpful links to get more
You learned the general differences in the architecture of static and dynamic websites. A static site serves the content straight to the user as it’s already prepared (rendered) on the server-side. Content Management Systems (CMS) provide the content dynamically (at request time) what requires an intermediate rendering system that is using a database system, an RDBMS (Relational Database Management System) like MySQL or Postgres.
Modern static webs are powerful because of the availability of an increasing number of excellent developing tools. One of them is Jekyll, a generator engine for static webs based on the programming language Ruby. Along with a flexible templating system like J1, webs generated by Jekyll will meet all the criteria for a modern website, at least for smaller or midsize projects.
The architecture of static websites is incredibly simple. Because of the simplicity, those sites are less in components, fast, robust, and secure. The deployment of static webs is easy to manage, does not require costly high-end computers to run.
A lot of theory and background information was discussed. Important to know for better orientation for the next steps to do: making a static Jekyll web real.
What is needed to start the work is given in the next section. Upfront: it’s not that much. Besides a typical Office-PC and an Internet connection, some tools are to be installed. All software is available on the Internet for free - all it’s Open Source!
Go for Getting prepared then!
Find here an overview on all chapters this tutorial.
Find from here some interesting links to additional sources of information for further reading. It’s not needed to go for all the pages, but the links will give some more background provided by other people, what they do, and what other experts have on their minds.