A static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any back-end programming or database. Publishing a static website is easy: the files are uploaded on a simple Web server or storage provider. The two main advantages of static websites are security and speed: there is no database so it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster.

To make their creation easier, numerous open-source static websites generators are available: Jekyll, Hugo, Gatsby, Hexo, etc. Most of the time, the content is managed through static (ideally Markdown) files or a Content API. Then, the generator requests the content, injects it in templates defined by the developer and generates a bunch of HTML files.

In this tutorial, you are going to learn how to build a blog with Jekyll. A static website needs a source of content: in this example we will deliver it using an API created with Strapi.

Note: the code source of this tutorial is available on GitHub.

What is Jekyll?

With more than 34,000 stars on GitHub, Jekyll is definitely the most famous static website generator.

Developed on top of Ruby, Jekyll makes static website creation super easy. It includes many features such as permalinks, categories, pages, and custom layouts. Write some Markdown files, customise your templates and you will get an easy to host website in seconds.

Last but not least, Jekyll is the static website generator powering GitHub Pages!

What is Strapi?

Strapi is the most advanced Node.js API Content Management Framework. Halfway between a Node.js Framework and a Headless CMS, it saves weeks of API development time.

Thanks to its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc.

Unlike online CMSs, Strapi is 100% open-source (take a look at the GitHub repository), which means:

Strapi is completely free .

. You can host it on your own servers , so you own the data.

, so you own the data. It is entirely customisable and extensible, thanks to the plugin system.

API Setup

To make the magic happen, let’s create a Strapi API and add some content.

Create a Strapi project

Install Strapi

Requirements: please make sure Node 9 and MongoDB are installed and running on your machine.

Install Strapi using npm:

$ npm i strapi@alpha -g

Note: Strapi v3 is still an alpha version, but it will be fine for this tutorial.

Generate a Strapi project

Create a directory named jekyll-strapi-tutorial :

$ mkdir jekyll-strapi-tutorial

Scaffold your API inside it through a single command line:

$ cd jekyll-strapi-tutorial $ strapi new api

The CLI will ask you to choose your database: select MongoDB (currently better supported). Then, fill the database information. The default values should work if you correctly installed MongoDB.