Build Blog With Jekyll, GitHub, OrbStack, VS Code and Cloudflare

Want to build a blog that actually looks good, runs locally, and updates itself online?
This guide walks you through a clean, modern workflow combining:

  • Jekyll + al-folio — the best pair for static blogs and academic sites
  • GitHub Pages / Cloudflare Pages — two effortless deployment options
  • OrbStack — a lightweight container engine for macOS
  • VS Code — the perfect tool for Markdown and YAML editing

1. Create Blog Repository

  1. Open the template project: al-folio GitHub repo: https://github.com/alshedivat/al-folio

  2. Click Use this template → Create a new repository Name it yourname.github.io (or anything)

  3. Enable Actions permissions: Settings → Actions → General → Check Read and write permissions

  4. Edit _config.yml:

    url: "https://yourname.github.io"
baseurl: ""

  5. If using GitHub Pages deployment:

    • Go to Settings → Pages
    • Source: Deploy from a branch
    • Branch: gh-pages
    • Folder: / (root)
    • Wait a few minutes and visit https://yourname.github.io

2. Install OrbStack

OrbStack is a macOS-native virtualization and container platform that includes a Docker engine. It’s lighter, faster, and more power-efficient than traditional Docker Desktop. It can run Jekyll containers directly—no need for complex VM setups or dependency juggling. Official site: https://orbstack.dev.

3. Install VS Code

VS Code is ideal for writing and previewing Markdown and editing _config.yml. Official site: https://code.visualstudio.com/

4. Set Up and Test Local Development Environment

1. Clone the Repository

Using GitHub Desktop:

  • Open GitHub Desktop → File → Clone repository…
  • Select repo (e.g. yourname.github.io)
  • Save it at ~/Projects/GitHub/yourname.github.io

2. Start the OrbStack Container Service

docker compose pull
docker compose up

Then visit http://localhost:8080 in browser.

3. Test the Local Environment

In VS Code, open the _posts directory, create a new Markdown file, and save it. The Jekyll container running in OrbStack will detect the change in seconds, and the page at http://localhost:8080 will auto-refresh. That’s full local edit-and-preview loop in action.

5. Online Deployment Options

1. GitHub Pages

Best for quick, no-setup deployment. If repo is named yourname.github.io, it’ll auto-deploy. Custom domains are supported.

2. Cloudflare Pages

For users who want custom domains or performance boosts.

  1. Sign in to Cloudflare Pages: https://dash.cloudflare.com/
  2. Create Project → Link GitHub repo

  3. Use these build settings:

    Build command: bundle exec jekyll build
Build output directory: _site

Once deployed, site will be available via the custom domain or the default *.pages.dev address.