Personal Blog (Jekyll + GitHub Pages)

Personal blog with a Codelabs section and Light / Dark / Cyber theme switcher. Built for GitHub Pages.

Features

• Jekyll 4 – Markdown posts, static site
• Modern Sass – Dart Sass via jekyll-sass-converter 3.x (no legacy Ruby Sass)
• Themes – Light, Dark, Cyber (neon accents); choice persisted in localStorage
• Codelabs – List in _data/codelabs.yml; put standalone codelab HTML under labs/<name>/
• Speaking decks – List in _data/decks.yml; put standalone deck HTML under decks/<name>/
• SPA-like nav – In-site links (with data-pjax) update content without full reload

Local setup

Requires Ruby 3.1+ (e.g. rbenv install 3.2 or system Ruby). The project uses Jekyll 4 and Dart Sass; the lockfile pins current versions.

bundle install
bundle exec jekyll serve

Open http://localhost:4000

Or use the helper scripts:

./bin/start
./bin/stop

By default, the site runs at http://127.0.0.1:4000. You can override the port with PORT=4001 ./bin/start and stop that port with PORT=4001 ./bin/stop. The scripts install missing gems into /tmp/personal-blog-bundle by default; override that with PERSONAL_BLOG_BUNDLE_PATH=/path/to/bundle ./bin/start.

Deploy

Live site: https://zarin.io

The site is built with Jekyll 4 and Dart Sass, so it does not use GitHub’s built-in Jekyll 3 stack. Deployment is via GitHub Actions:

1. Push to this repo (zarinlo/zarinlo.github.io).
2. In Settings → Pages → Build and deployment, set Source to GitHub Actions.
3. Confirm Custom domain is zarin.io (see root CNAME file).
4. The workflow .github/workflows/pages.yml builds on push to master and deploys _site to Pages.

Adding content

• Posts: Add .md files in _posts/ with front matter (layout: post, title, date).
• Codelabs: Add entries to _data/codelabs.yml and place each codelab’s files under labs/<name>/ (e.g. labs/my-codelab/index.html). Use url: /labs/my-codelab/ in the YAML.
• Speaking decks: Add entries to _data/decks.yml and place each deck’s HTML under decks/<name>/ (e.g. decks/think-ai/index.html). Use url: /decks/think-ai/ in the YAML. Point Speaking table deck links in _data/recognition.yml to the same URL.

After deploy

After pushing to master, allow 1–2 minutes for GitHub Pages to rebuild, then verify:

• https://zarin.io/labs/ loads the codelabs listing page
• https://zarin.io/decks/ loads the speaking decks listing page
• Menu Codelabs and homepage View all links work
• Individual codelab URLs work (e.g. /labs/springboot-api/)
• Individual deck URLs work (e.g. /decks/think-ai/)
• Browser back from a codelab or deck returns to /labs/ or /decks/ respectively
• https://zarin.io/sitemap.xml includes /labs/ and /decks/

Section app routing

Both /labs/ and /decks/ use the same pattern:

	Listing page	App source folder	Live app URL
Codelabs	labs.md → /labs/	labs/<name>/	/labs/<name>/
Decks	decks.md → /decks/	decks/<name>/	/decks/<name>/

Listing pages are Jekyll markdown at the repo root. App HTML lives in the matching folder and is copied into _site at build time by _plugins/copy_section_apps.rb. Add <script src="/assets/js/section-app-nav.js"></script> before </body> on each standalone app page so the browser back button returns to the listing.

Cards are rendered from _data/codelabs.yml via _includes/codelab-grid.html and from _data/decks.yml via _includes/deck-grid.html.