← Back to Blog
← PrevNext →
·2 min read

Getting Started with Jekyll

jekyllweb-developmentcodingbeginner

Jekyll is a static website generator that lets you focus on content rather than wrestling with HTML and CSS. You write in Markdown, and Jekyll handles the rest.

What Jekyll Does

  • Builds portfolios, blogs, and landing pages
  • Converts Markdown files with YAML front matter into static HTML
  • Integrates seamlessly with GitHub Pages for free hosting

What Jekyll Can't Do

Jekyll is for static sites. If you need real-time data updates (weather apps, stock tickers, dynamic dashboards), you'll need something else.

Prerequisites

Before diving in, make sure you're comfortable with:

  • Git command-line basics
  • A code editor (VS Code, Sublime Text, or Atom)
  • Basic HTML, CSS, and Markdown

Getting Started

1. Clone a starter template

git clone https://github.com/your-template-repo.git my-site
cd my-site

2. Install Jekyll

gem install bundler jekyll
bundle install

3. Configure your site

Edit _config.yml to set your site title, description, URL, and other settings.

4. Run locally

bundle exec jekyll serve

Visit http://localhost:4000 to see your site live.

Key Concepts

  • _site folder: contains the generated static HTML output, ready for deployment
  • Front matter: YAML metadata at the top of each Markdown file (title, date, layout)
  • Layouts: reusable HTML templates that wrap your content

Hosting

The easiest path: create a GitHub repository named your_username.github.io, push your Jekyll site, and GitHub Pages handles the rest. Free hosting, automatic builds on every push.

Related Posts

Best Coding Practices

Foundational development practices every programmer should adopt early, from choosing the right editor to writing proper documentation.

The x Pattern: What npx, uvx, bunx, and pipx Actually Do

You've typed npx create-react-app a hundred times. But what does the 'x' actually mean? Turns out every major package manager independently invented the same idea.

Getting Started with Claude Code: Installation to First Real Output

The getting started guide I wish existed when I first installed Claude Code. From npm install to your first real feature, with the mental model that makes everything click.