6 min to read

Building My Own Blog Site with Jekyll

How I combined tech, film, hiking, sport, and music into a personal blog

Featured image

Why I Chose Jekyll for My Blog

Creating your own blog gives you full control over content, design, and performance. I wanted a platform that:

Jekyll is perfect because it’s a static site generator that converts Markdown posts into a fast, responsive website. Paired with the Jekflix theme, I can create a cinematic, modern design tailored to my content.

Pre-Requisites on macOS

To build a Jekyll site locally, you’ll need the following installed:

1️⃣ Install Homebrew (if not already installed)

Homebrew helps manage software packages on a Mac.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2️⃣ Install Ruby

macOS comes with Ruby pre-installed, but it’s better to use a managed version:

brew install ruby

Add Ruby to your path:

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Verify installation:

ruby -v

3️⃣ Install Jekyll and Bundler

Bundler manages Ruby gems (libraries) and ensures your project uses compatible versions.

gem install --user-install bundler jekyll

Check versions:

jekyll -v
bundle -v

4️⃣ Create a New Jekyll Site

jekyll new my-blog
cd my-blog

Or if using your own theme like Jekflix then locate the repo on github for the theme you want to use:

git clone https://github.com/username/some-theme.git my-blog
cd my-blog
bundle install

You can also simply fork from a theme of your choice into your own repo

5️⃣ Serve Your Site Locally

bundle exec jekyll serve

Open http://localhost:4000 in your browser to see your site.

Optional:

On macOS, the system Ruby already has gem, but it might be outdated. Using brew install ruby ensures a modern version.

brew install rbenv
rbenv init
rbenv install 3.2.2   # example version
rbenv global 3.2.2
ruby -v

After installing via rbenv you’ll also use gem as usual, but it’s tied to the selected Ruby version.

✅ Summary

Structuring Content for Your Interests

I wanted my blog to reflect my passions:

Using modular includes like film-info-box.html and hike-box.html, I can display metadata in a structured, visually appealing way, making each post feel like a mini showcase.

Benefits of Running Your Own Blog

The Advantages Of Going Static

Directory Structure

Here’s a snapshot of my Jekyll website’s directory structure:

/Users/longy/dev/coding/longyflix
├─ CNAME # Contains your custom domain name (optional)
├─ _config.yml # Jekyll's configuration flags
├─ _includes # Snippets of code that can be used throughout your templates
│  ├─ analytics.html
│  └─ disqus.html
├─ _layouts
│  ├─ default.html # The main template. Includes <head>, <navigation>, <footer>, etc
│  ├─ page.html # Static page layout
│  └─ post.html # Blog post layout
├─ _posts # All posts go in this directory!
│  └─ 2025-10-28-Hello-World.md
├─ _site # After Jekyll builds the website, it puts the static HTML output here. This is what's served!
│  ├─ CNAME
│  ├─ LICENSE
│  ├─ about.html
│  ├─ feed.xml
│  ├─ index.html
│  ├─ sitemap.xml
│  └─ style.css
├─ about.md # A static "About" page that I created.
├─ feed.xml # Powers the RSS feed
├─ assets/images # All of my images are stored here.
│  ├── first-post-header.jpg
├─ index.html # Home page layout
├─ scss # The Sass style sheets for my website
│  ├─ _highlights.scss
│  ├─ _reset.scss
│  ├─ _variables.scss
│  └─ style.scss
└── sitemap.xml # Site map for the website

Next Steps

Once your site is running locally, you can:

Creating your own blog is a rewarding journey. With Jekyll, your site is fast, flexible, and future-proof, and you can grow it as your interests evolve. 🚀

See my blog post on creating a matching `hike-info-box.html` modular
include I have also mirrored this for a film-info-box