Guide

Building a Blog with Jekyll

A complete guide to creating a beautiful blog using Jekyll and GitHub Pages.

Your Name 5 min read

Jekyll is a static site generator that transforms your plain text into beautiful websites. Let’s learn how to build a blog from scratch.

Why Jekyll?

Jekyll offers several advantages for blogging:

  • No database required - Everything is files
  • Version control - Track changes with Git
  • Free hosting - Deploy to GitHub Pages
  • Markdown support - Write in plain text
  • Fast performance - Static files are speedy

Project Structure

A typical Jekyll blog has this structure:

my-blog/
├── _config.yml      # Site configuration
├── _posts/          # Blog posts
├── _layouts/        # Page templates
├── _includes/       # Reusable components
├── assets/          # CSS, JS, images
└── index.html       # Homepage

Writing Posts

Create posts in the _posts folder with this naming convention:

YYYY-MM-DD-title-of-post.md

Front Matter

Every post starts with YAML front matter:

---
title: "My First Post"
date: 2024-02-01
categories: [Tutorial]
tags: [jekyll, beginner]
---

Content

Write your content in Markdown below the front matter. Jekyll converts it to HTML automatically.

Layouts

Layouts define the structure of your pages. Here’s a simple post layout:

---
layout: default
---

<article>
  <h1>Building a Blog with Jekyll</h1>
  <time>February 01, 2024</time>
  <article class="py-8 sm:py-12 lg:py-16">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Post Header -->
    <header class="mb-8 lg:mb-12">
      
      <div class="flex flex-wrap gap-2 mb-4">
        
        <span class="px-3 py-1 text-xs font-semibold text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30 rounded-full uppercase tracking-wide">
          Tutorial
        </span>
        
      </div>
      

      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white font-heading leading-[1.15] tracking-tight">
        Getting Started with Tailwind CSS
      </h1>

      
      <p class="mt-4 lg:mt-6 text-lg lg:text-xl text-slate-600 dark:text-slate-400 leading-relaxed">
        Learn how to use Tailwind CSS to build modern, responsive websites quickly.
      </p>
      

      <div class="mt-6 lg:mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-slate-500 dark:text-slate-400">
        
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
          <span class="font-medium text-slate-700 dark:text-slate-300">Your Name</span>
        </span>
        

        
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
          </svg>
          <time datetime="2024-01-15T00:00:00+00:00">
            January 15, 2024
          </time>
        </span>
        

        
        
        
        
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          1 min read
        </span>
        
      </div>
    </header>

    <!-- Featured Image -->
    

    <!-- Post Content -->
    <div class="prose prose-slate dark:prose-invert prose-lg lg:prose-xl max-w-none
                prose-headings:font-heading prose-headings:font-bold prose-headings:tracking-tight
                prose-h2:text-2xl prose-h2:lg:text-3xl prose-h2:mt-12 prose-h2:mb-6
                prose-h3:text-xl prose-h3:lg:text-2xl prose-h3:mt-8 prose-h3:mb-4
                prose-p:leading-relaxed prose-p:text-slate-600 dark:prose-p:text-slate-300
                prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:font-medium prose-a:no-underline hover:prose-a:underline
                prose-strong:text-slate-900 dark:prose-strong:text-white
                prose-code:text-primary-600 dark:prose-code:text-primary-400
                prose-blockquote:border-primary-500 prose-blockquote:bg-slate-50 dark:prose-blockquote:bg-slate-800/50 prose-blockquote:rounded-r-lg prose-blockquote:py-1
                prose-img:rounded-xl prose-img:shadow-lg
                prose-li:marker:text-primary-500">
      <p>Tailwind CSS has revolutionized the way developers build user interfaces. In this post, we’ll explore why Tailwind is so popular and how to get started.</p>

<h2 id="what-is-tailwind-css">What is Tailwind CSS?</h2>

<p>Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.</p>

<p>Instead of writing custom CSS like this:</p>

<pre><code class="language-css">.card {
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</code></pre>

<p>You write utility classes directly:</p>

<pre><code class="language-html">&lt;div class="p-4 bg-white rounded-lg shadow"&gt;
  Content here
&lt;/div&gt;
</code></pre>

<h2 id="why-use-tailwind">Why Use Tailwind?</h2>

<h3 id="1-faster-development">1. Faster Development</h3>

<p>No more switching between HTML and CSS files. Write styles inline where you need them.</p>

<h3 id="2-consistent-design">2. Consistent Design</h3>

<p>Tailwind’s design system ensures consistent spacing, colors, and typography across your project.</p>

<h3 id="3-smaller-bundle-size">3. Smaller Bundle Size</h3>

<p>With PurgeCSS built-in, your production CSS only includes the classes you actually use.</p>

<h3 id="4-responsive-design-made-easy">4. Responsive Design Made Easy</h3>

<p>Add responsive prefixes to any utility:</p>

<pre><code class="language-html">&lt;div class="text-sm md:text-base lg:text-lg"&gt;
  Responsive text
&lt;/div&gt;
</code></pre>

<h2 id="dark-mode">Dark Mode</h2>

<p>Tailwind makes dark mode trivial:</p>

<pre><code class="language-html">&lt;div class="bg-white dark:bg-gray-800"&gt;
  Adapts to theme
&lt;/div&gt;
</code></pre>

<h2 id="getting-started">Getting Started</h2>

<p>The fastest way to try Tailwind is via CDN:</p>

<pre><code class="language-html">&lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
</code></pre>

<p>For production, install via npm:</p>

<pre><code class="language-bash">npm install -D tailwindcss
npx tailwindcss init
</code></pre>

<h2 id="conclusion">Conclusion</h2>

<p>Tailwind CSS offers a unique approach to styling that can significantly speed up your development workflow. Give it a try on your next project!</p>

<div class="callout callout-info">
  <strong>Tip:</strong> This theme is built with Tailwind CSS! Check the source code to see it in action.
</div>

    </div>

    <!-- Tags -->
    
    <footer class="mt-12 lg:mt-16 pt-8 border-t border-slate-200 dark:border-slate-800">
      <div class="flex flex-wrap gap-2">
        
        <span class="px-3 py-1.5 text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-default">
          #tailwind
        </span>
        
        <span class="px-3 py-1.5 text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-default">
          #css
        </span>
        
        <span class="px-3 py-1.5 text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-default">
          #frontend
        </span>
        
      </div>
    </footer>
    

    <!-- Post Navigation -->
    <nav class="mt-8 lg:mt-12 pt-8 border-t border-slate-200 dark:border-slate-800">
      <div class="grid sm:grid-cols-2 gap-4">
        
        <a href="/minima-plus/blog/welcome/"
           class="group flex flex-col p-4 lg:p-6 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-primary-300 dark:hover:border-primary-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-all">
          <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Previous</span>
          <span class="flex items-center text-slate-900 dark:text-white font-medium group-hover:text-primary-600 dark:group-hover:text-primary-400">
            <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            <span class="line-clamp-1">Welcome to the Blog</span>
          </span>
        </a>
        

        
        <a href="/minima-plus/blog/building-a-blog-with-jekyll/"
           class="group flex flex-col p-4 lg:p-6 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-primary-300 dark:hover:border-primary-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-all text-right">
          <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Next</span>
          <span class="flex items-center justify-end text-slate-900 dark:text-white font-medium group-hover:text-primary-600 dark:group-hover:text-primary-400">
            <span class="line-clamp-1">Building a Blog with Jekyll</span>
            <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </span>
        </a>
        
      </div>
    </nav>
  </div>
</article>

</article>

Categories and Tags

Organize posts with categories and tags:

Feature Purpose
Categories Broad groupings (Tutorial, News)
Tags Specific topics (jekyll, css)

Local Development

Run your site locally:

bundle exec jekyll serve

Visit http://localhost:4000 to preview.

Deployment

Push to GitHub and enable GitHub Pages:

  1. Create a repository named username.github.io
  2. Push your Jekyll site
  3. Enable GitHub Pages in Settings
  4. Your blog is live!

Conclusion

Jekyll makes blogging simple and enjoyable. Start writing and let Jekyll handle the rest!

#jekyll #blogging #github-pages