Creating a Static Website With Jekyll

Why do I Need a Website?

---

A website is a powerful tool for many people, whether you’re a freelancer, a small business owner, a hobbyist, or a student. It gives you a professional presence that can be accessed anytime, anywhere. For professionals, a website can showcase your portfolio, resume, and projects, making it easier for potential employers or clients to find you. For businesses, it serves as a central hub for product information, customer support, and marketing. Even for personal projects or documentation, a website lets you share knowledge, collaborate with others, and keep a record that’s always online. In short, a website expands your reach, builds credibility, and provides a platform for communication and growth.

How We Build It

---

A Markdown-Based Static Site Generator - Jekyll

Jekyll is one of many static site generators that turns simple Markdown files into a full‑blown static website. You write your content in plain text, and Jekyll compiles it into HTML, CSS, and JavaScript that browsers can understand. It also handles things like navigation, layouts, and data files, so you don’t have to write code for every page. For non‑technical users, Jekyll is like a recipe that automatically prepares a polished website from your raw ingredients.

Code Repository and Version Control - GitHub

GitHub is a place to store your website’s source files and keep track of every change you make. It’s a version‑control system that lets you roll back to earlier versions, collaborate with others, and review history. Additionally, GitHub offers “GitHub Pages,” a free hosting service that can serve your static site directly from your repository. If you do not mind a complex GitHub domain name, this great alternative to start hosting a website for free.

A Domain Registrar, DNS, and Pages - Cloudflare

Cloudflare provides several services that make your website reliable and fast. First, it can act as a domain registrar, letting you buy and manage your domain name. Second, its DNS (Domain Name System) service translates that domain name into the server’s IP address, ensuring visitors reach the right place. Finally, Cloudflare Pages is a deployment platform that automatically builds and publishes your Jekyll site whenever you push changes to GitHub. Cloudflare also offers performance optimizations and security features, such as a CDN and DDoS protection, so your site stays fast and safe.

What We are Building

---

In this guide we’re putting together a static website that is easy to maintain, fast to load, and free to host. In this setup, Jekyll, GitHub, and Cloudflare work together like a well‑orchestrated team. Together, these tools let you focus on writing great content while the technical heavy lifting is handled automatically. The result is a professional‑looking, high‑performance website that you can update with a few clicks and a quick commit, without ever touching a server or writing complex code.

Lets Begin!

Jekyll Configuration

Environment Setup

Install Ruby and other prerequisites for Jekyll. If you are on Windows or macOS, checkout the prerequisites here.

Ubuntu Linux or WSL Installation

sudo apt-get install ruby-full build-essential zlib1g-dev

Avoid installing RubyGems packages (called gems) as the root user. Instead, set up a gem installation directory for your user account. The following commands will add environment variables to your ~/.bashrc file to configure the gem installation path:

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Finally, install Jekyll and Bundler:

gem install jekyll bundler

Clone a Theme Repository

Jekyll has many themes that you can choose from to customize the look of your website. Checkout some common themes and select one before moving forward. I use the Chirpy theme which has a starter setup process:

1. Sign in to GitHub and navigate to the starter.
2. Click the Use this template button and then select Create a new repository.
3. 1. Name the new repository <username>.github.io, replacing username with your lowercase GitHub username.
4. Clone your repository to your local machine.
5. Run command bundle in the root of your repository to install the dependencies.

Common Commands

Run command below and the website will be generated at http://localhost:4000 While this service is running, changes to your posts should update automatically.

bundle exec jekyll serve

If you want to generate the markup for this webpage and host the HTML directly, perform the following command. This updates all the HTML once, and is useful for deployment and anything not updating with the bundle exec jekyll serve command.

JEKYLL_ENV=production bundle exec jekyll b

Folder Structure

• _posts/ - Directory for the post files holding markdown content
• _tabs/ - Directory for configuring the sidebar tabs
• assets/ - Directory for images, PDFs, etc…

Creating a Post

Naming Conventions

Jekyll uses a naming convention for pages and posts

Create a file in _posts with the format

YEAR-MONTH-DAY-title.md

For example:

2026-04-1-hello-world.md
2026-04-2-my-very-cool-blog-post.md

Pro Tip! Jekyll can delay posts which have the date/time set for a point in the future.

Markdown Syntax

To get an understanding of markdown, I would suggest creating a 2020=6-4-1-hello-world.md with the contents of the text and typography markdown to visualize the markup and provide a local reference for posts. Below is a snippet of some common markdown, It’s designed to be readable even before it’s rendered, so you can focus on content rather than formatting.

# My First Blog Post Hello, world! 

This is a **bold** statement and this is *italic*. 
- Point one 
- Point two 
  
> “Markdown is awesome.” – *Someone*

Editing the _config.yml

Within the _config.yml file, we will want to change the following based on your configuration:

• Time zone
• Title
• Tagline
• Description
• Contact Links
• Avatar
• URL

Pushing to GitHub

Once you are satisfied with how the website looks, commit and push your code to the remote repository. If you are satisfied using GitHub Pages, this should trigger a GitHub action baked into the chirpy starter and publish you website at https://<username>.github.io. Your Website is now publicly available! If you are happy with this, feel free to stop here.

Cloudflare Configuration

Registering a Domain

Find and purchase a domain from Cloudflare registrar. Domains typically cost between $5-20 per year, and you will get free hosting of your website through Cloudflare Pages. Make an account, find a domain you like, and make the purchase before continuing.

Cloudflare Pages

In the account home of Cloudflare, explore the side menu to find Build -> Compute -> Workers and Pages. From the Workers and Pages menu, click create an application. You’ll want to Continue using GitHub, Login and select the repository `.github.io

Build Command

For the build command, we will use the one we specified earlier, with the build output set as _site

JEKYLL_ENV=production bundle exec jekyll b

Environment Variables

We will also want to set the following Environment Variables:

• BUNDLE_WITHOUT=""
• RUBY_VERSION="3.2.3"

Once this is configured, deploy the page and Cloudflare will pull your repository, build the HTML, and start hosting it on a random-characters.pages.dev webpage.

Cloudflare DNS

Last but not least, we will want to create DNS records for our newly acquired domain to point towards our website. From the account_home, go to domains -> overview and select your domain name. From here, go to DNS -> Records. We will create a CNAME record to point towards random-characters.pages.dev Give Cloudflare a minute to update, and visit your website!

Summary

By combining Jekyll, GitHub, and Cloudflare, you can create a professional, high‑performance static website with minimal technical overhead. Jekyll handles the content generation, GitHub manages version control, and Cloudflare takes care of domain management, DNS, and global delivery. This trio empowers even non‑technical users to build, maintain, and grow an online presence efficiently.

Further Reading:

1. Chirpy Getting Started Page
2. Jekyll Ubuntu Installation
3. TechnoTim Article
4. Jekyll Post Documentation
5. Post Examples