Jekyll is a popular static site generator written in Ruby, powering GitHub Pages and many developer blogs. It transforms plain text files into static websites and blogs, with support for Markdown, Liquid templates, and YAML front matter.

In this tutorial, I'll show you how to create a blog with Jekyll, customize its theme, and deploy it using Appliku.

Table of Contents

Source code

The source code for this tutorial is available on GitHub repository appliku/jekylltutorial

Requirements

For this tutorial you need:

  • Ruby 3.4.1
  • RubyGems
  • GCC and Make
  • git
  • GitHub account
  • Appliku Account

Install Jekyll

First, let's install Jekyll and Bundler:

gem install jekyll bundler

Create a New Jekyll Site

Create a new Jekyll site:

jekyll new jekylltutorial
cd jekylltutorial

Project Structure

A basic Jekyll site has this structure:

jekylltutorial/
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2024-12-27-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown

Configure Jekyll

Edit _config.yml:

title: Jekyll Tutorial Blog
email: jekyll@example.com
description: >-
  Our tutorial blog made with Jekyll, deployed with Appliku
baseurl: ""
url: ""
twitter_username: jekyllrb
github_username: jekyll

# Build settings
theme: minima
plugins:
  - jekyll-feed

# Pagination
paginate: 5
paginate_path: "/blog/page:num/"

# Collections
collections:
  projects:
    output: true
    permalink: /projects/:path/

# Default front matter
defaults:
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      author: "Appliku"

Create Content

Create your first blog post in _posts/2024-12-27-welcome-to-my-blog.md:

---
layout: post
title:  "Welcome to the Tutorial Blog"
date:   2024-12-27 10:00:00 +0100
categories: general
---

Welcome to my new blog! This is my first post using Jekyll.

## Why Jekyll?

Because we can deploy it with Appliku as a static site!

Create about.md in the root directory:

---
layout: page
title: About
permalink: /about/
---

This is the page about us.

Contact us via [Appliku Site](https://appliku.com/)

Additional Gems

If the serve command fails on the newer ruby version, add these lines to the Gemfile:

gem 'csv'
gem 'logger'
gem 'base64'

and run 

bundle install

Preview Your Site

Start the development server:

bundle exec jekyll serve

Visit http://localhost:4000 in your browser.

Jekyll blog running locally

Jekyll about page running locally

Build Your Site

Generate the static site:

bundle exec jekyll build

This creates a _site directory with your static website.

Commit and Push to GitHub

Initialize git repository and commit your changes:

git init
git add .
git commit -m "Initial commit"

Create a new repository on GitHub.

image

In this screenshot repository is set to public, but for your projects, you might want to set it to private.

Since the repository is empty, GitHub will offer you a few commands. We need the line git remote add origin Copy this line and run it in your terminal

image

and push your code:

git push -u origin master

You can now see the code is published to GitHub:

image

Deploy with Appliku

Go to your Appliku dashboard and create a new application from GitHub repository.

Create and add a server for Pelican Blog

Add an Ubuntu or a Debian server from a cloud provider of your choice, if you haven't already.

Here are guides for adding servers from different cloud providers:

Create Static Site Application

  1. Go to Applications -> GitHub
  2. Give your application a name
  3. Choose your GitHub repository
  4. Select the branch
  5. Check "This is a static site"
  6. Choose your server
  7. Click Create Application

create jekyll static site application on your server

Configure Build Settings

jekyll static site settings

In the application settings:

image

  1. Set Base Docker Image to Ruby 3.4.1
  2. Set build command to: bundle install && bundle exec jekyll build
  3. Set output directory to: _site
  4. Save changes and deploy

Your blog will be built and deployed automatically.

When the deployment has finished, go back to the application dashboard page and click Open App and on the domain name.

image

image

You can add your custom domain in the application settings -> Custom Domains tab.