Programmer's Picnic Tours — Jekyll & Chirpy Complete Lesson

0. Start Here 1. Core Concept 2. Installation 3. Chirpy Setup 4. Posts 5. Deploy 6. Domain 7. Existing Site 8. Templates 9. Checklist

0. Start Here: What Are We Building?

We are building a professional travel and pilgrimage blog named Programmer's Picnic Tours. The demo project will be called touryatra-demo.

Simple idea: You write content in Markdown. Jekyll converts it into HTML. Chirpy makes it look professional. GitHub Pages publishes it online.

Markdown + Jekyll + Chirpy + GitHub Pages = Professional Static Website

Final learning goal

After this lesson, you should be able to:

Create a Chirpy blog from zero.
Edit _config.yml.
Create posts in _posts.
Run the website locally.
Deploy it on GitHub Pages.
Connect it to programmerpicnics.demo.
Decide how to use Jekyll/Chirpy with an existing website.

1. Core Concept: Jekyll in Plain English

A normal HTML website repeats a lot of code. Every page may contain the same header, menu, footer, CSS links, and layout. Jekyll removes this repetition.

Without Jekyll

index.html
about.html
temple-guide.html
contact.html

You manually maintain every page.

With Jekyll

_posts/
_layouts/
_includes/
_config.yml

You write content once and reuse layouts.

What is Chirpy?

Chirpy is a ready-made Jekyll theme. It gives your website a polished blog structure: posts, categories, tags, archives, search, code highlighting, mobile layout, and dark mode.

For a teaching, travel, or guide-based website, Chirpy is excellent because posts are clean, searchable, and easy to maintain.

2. Installation: Tools You Need

To run Jekyll locally, install these:

Ruby

Jekyll runs on Ruby.

Bundler

Bundler manages Ruby packages.

Git

Git is used to push your site to GitHub.

Beginner Installation Plan

Install in this order. Do not skip the version checks.

Step	Tool	Purpose	Check Command
1	Ruby	Programming language used by Jekyll	`ruby -v`
2	RubyGems	Ruby package manager. It installs Jekyll and Bundler.	`gem -v`
3	Bundler	Keeps project dependencies fixed and stable	`bundle -v`
4	Jekyll	Builds your Markdown files into a website	`jekyll -v`
5	Git	Sends your site files to GitHub	`git --version`

Windows Installation: Ruby + Gem

For Windows, use RubyInstaller. This is the easiest beginner path.

Open your browser and search for RubyInstaller for Windows.
Download the latest recommended RubyInstaller with Devkit.
Run the installer.
Keep these options selected: Add Ruby executables to PATH and Use UTF-8.
At the end, allow the Devkit/MSYS2 setup to run.
When the terminal asks for components, press Enter for the default option.

Check Ruby and RubyGems

ruby -v
gem -v

If ruby -v or gem -v says command not found, close the terminal, open a new terminal, and try again. If it still fails, Ruby was probably not added to PATH.

Install Bundler and Jekyll

After Ruby and Gem are working, install Bundler and Jekyll.

gem install bundler jekyll

Check Bundler and Jekyll

bundle -v
jekyll -v

Install Git

Git is needed for cloning the Chirpy Starter repository and pushing your site to GitHub.

Search for Git for Windows.
Download and install it.
Use the default options if you are a beginner.
Open a new terminal and check Git.

git --version

Mac Installation

On Mac, first install Homebrew if you do not already have it. Then install Ruby and Jekyll tools.

brew install ruby
gem install bundler jekyll
ruby -v
gem -v
bundle -v
jekyll -v

On Mac, you may need to add Homebrew Ruby to your shell PATH. If the terminal still uses the system Ruby, restart the terminal and check ruby -v again.

Linux Installation

On Ubuntu or Debian-based Linux, install Ruby, build tools, and Git first.

sudo apt update
sudo apt install ruby-full build-essential zlib1g-dev git
gem install bundler jekyll
ruby -v
gem -v
bundle -v
jekyll -v

First Test After Installation

Create a tiny test site to confirm that Jekyll is working.

jekyll new test-jekyll-site
cd test-jekyll-site
bundle exec jekyll serve

Open this in your browser:

http://localhost:4000

Common Installation Problems

Problem	Meaning	Fix
`ruby` not found	Ruby is not installed or not added to PATH	Reinstall RubyInstaller and select PATH option
`gem` not found	RubyGems is missing or terminal PATH is not refreshed	Open a new terminal and check again
`bundle` not found	Bundler is not installed	Run `gem install bundler`
Native extension error	Build tools or Devkit are missing	Install Ruby with Devkit, then reinstall gems
Port 4000 already in use	Another local server is already running	Use `bundle exec jekyll serve --port 4001`

Do not worry if the first installation feels difficult. Ruby setup is usually the hardest part for beginners. After it works once, the daily workflow becomes simple.

3. Create the Chirpy Demo Repository

For Chirpy, the best beginner method is to start from the official Chirpy Starter template. Do not begin with a plain jekyll new project if your goal is Chirpy.

Repository name

touryatra-demo

GitHub steps

Open GitHub.
Search for chirpy-starter.
Click Use this template.
Create a new repository.
Name it touryatra-demo.
Keep it public for easy GitHub Pages deployment.

Clone the repository

git clone https://github.com/YOUR-GITHUB-USERNAME/touryatra-demo.git
cd touryatra-demo

Install dependencies

bundle install

Run locally

bundle exec jekyll serve

Then open:

http://localhost:4000

4. Configure `_config.yml`

The file _config.yml controls your website title, description, URL, social links, timezone, language, and many other settings.

Demo repository config

title: Programmer's Picnic Tours
tagline: Travel guides, temple notes, and yatra planning
description: A demo Chirpy site for pilgrimage guides, temple notes, and travel planning.

url: "https://YOUR-GITHUB-USERNAME.github.io"
baseurl: "/touryatra-demo"

github:
  username: YOUR-GITHUB-USERNAME

social:
  name: Programmer's Picnic Tours
  email: your-email@example.com
  links:
    - https://github.com/YOUR-GITHUB-USERNAME

timezone: Asia/Kolkata
lang: en

For a project repository like touryatra-demo, use baseurl: "/touryatra-demo".

Final custom domain config

title: Programmer's Picnic Tours
tagline: Travel guides, temple notes, and yatra planning
description: A travel and pilgrimage guide website for peaceful, practical yatra planning.

url: "https://programmerpicnics.demo"
baseurl: ""

timezone: Asia/Kolkata
lang: en

For a custom domain like programmerpicnics.demo, use baseurl: "".

5. Create Your First Post

All blog posts go inside the _posts folder.

Post filename rule

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

Create this file

_posts/2026-05-07-welcome-to-programmers-picnic-tours.md

Paste this post

---
title: "Welcome to Programmer's Picnic Tours"
date: 2026-05-07 10:00:00 +0530
categories: [Tours, Introduction]
tags: [travel, pilgrimage, temple, guide, india]
---

Welcome to **Programmer's Picnic Tours**.

This website will share beginner-friendly travel guides, temple notes,
pilgrimage planning tips, routes, checklists, and practical advice.

## What this site will include

- Temple guides
- Yatra planning
- Travel checklists
- Route guides
- Stay and food notes
- Festival information
- Local travel tips

## First goal

Our first goal is to create a clean Chirpy demo website and publish it on GitHub Pages.

Run and check

bundle exec jekyll serve

Open the local website and check whether the post appears.

6. Categories and Tags

Categories are big sections. Tags are smaller keywords.

Good categories

Temple Guide Yatra Planning Travel Tips Festival Guide Itinerary Checklist

Good tags

kashi ayodhya kedarnath temple darshan travel

Example front matter

---
title: "Kashi Vishwanath Yatra Guide for Beginners"
date: 2026-05-07 11:00:00 +0530
categories: [Temple Guide, Uttar Pradesh]
tags: [kashi, varanasi, shiva, temple, pilgrimage]
---

7. Deploy on GitHub Pages

After editing your files, push them to GitHub.

Git commands

git add .
git commit -m "Set up Programmer's Picnic Tours demo"
git push

GitHub Pages settings

Open your GitHub repository.
Go to Settings.
Open Pages.
Use GitHub Actions if the Chirpy workflow is already included.
Go to the Actions tab and check whether the build succeeds.

Demo URL format

https://YOUR-GITHUB-USERNAME.github.io/touryatra-demo/

If CSS or images are broken on the demo URL, check baseurl in _config.yml.

8. Connect Final Domain: programmerpicnics.demo

When the demo is working, you can move to the real domain.

Final `_config.yml`

url: "https://programmerpicnics.demo"
baseurl: ""

Create CNAME file

Create a file named CNAME in the root of the repository.

programmerpicnics.demo

DNS records for root domain

A     @     185.199.108.153
A     @     185.199.109.153
A     @     185.199.110.153
A     @     185.199.111.153

DNS record for www

CNAME     www     YOUR-GITHUB-USERNAME.github.io

Do not add the custom domain until your demo site is working properly. First learn safely with the demo repository.

9. Adding Jekyll/Chirpy Into an Existing Site

If you already have a website, do not immediately replace it. First choose the safest integration method.

Current Situation	Best Method	Why
No existing site	Use Chirpy Starter directly	Fastest and cleanest path
Existing plain HTML site	Keep it and add Chirpy on a subdomain	Does not break your current site
Existing GitHub Pages site	Create a separate Chirpy repository	Easy to manage and deploy
Existing Blogger or WordPress site	Use Chirpy for blog or documentation separately	Migration can be done slowly
Need full custom design	Build custom Jekyll layouts	More control, more work

Recommended structure

programmerpicnics.demo             → Main landing website
blog.programmerpicnics.demo        → Chirpy blog
tools.programmerpicnics.demo       → Travel tools or calculators
guides.programmerpicnics.demo      → Special guide pages

Best beginner strategy: keep the main website simple and run Chirpy on blog.programmerpicnics.demo.

10. Copy-Paste Templates

Temple guide post template

---
title: "Temple Name Yatra Guide for Beginners"
date: 2026-05-07 10:00:00 +0530
categories: [Temple Guide, State Name]
tags: [temple-name, city-name, pilgrimage, travel, temple]
---

## Introduction

Write a simple introduction to the temple and why it is important.

## Location

- City:
- State:
- Nearest railway station:
- Nearest airport:

## Best time to visit

Write the best months or festival periods.

## How to reach

### By train

Write train information.

### By road

Write road information.

### By air

Write airport information.

## Darshan tips

- Tip 1
- Tip 2
- Tip 3

## What to carry

- Water bottle
- ID card
- Comfortable clothes
- Small bag
- Phone charger

## Nearby places

- Place 1
- Place 2
- Place 3

## Simple itinerary

### Day 1

Write plan.

### Day 2

Write plan.

## Final notes

End with helpful and calm advice.

About page template

---
icon: fas fa-info-circle
order: 4
---

# About Programmer's Picnic Tours

**Programmer's Picnic Tours** is a travel and pilgrimage guide website.

We help readers plan peaceful and practical journeys with clear information,
checklists, routes, and beginner-friendly guides.

## Topics

- Temple guides
- Travel planning
- Darshan tips
- Route guides
- Local food and stay notes
- Festival information
- Practical checklists

12. Final Mental Model

You write Markdown.
Jekyll builds HTML.
Chirpy gives the design.
GitHub Pages hosts the website.
Your domain points to GitHub Pages.

Start small. First make one post live. Then improve the design, categories, images, SEO, domain, and content system step by step.

First success target: a live demo site with one post and one About page.