--- title: "An Ultra-Cost-Effective Method for Building a Website: Set Up Your Own Free Blog with GitHub Pages + Jekyll" description: "A step-by-step guide on how to use GitHub Pages with the Jekyll static site generator to quickly build a personal blog at almost zero cost, and bind a custom domain with Cloudflare SSL." canonical_url: "https://blog.markkulab.net/en/post/github-jekyll-free-blog" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2022-06-04 01:01:35 +0800" category: "Infra" tags: ["jekyll", "github pages", "blog", "free hosting", "static site", "cloudflare", "domain", "seo"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # An Ultra-Cost-Effective Method for Building a Website: Set Up Your Own Free Blog with GitHub Pages + Jekyll ## The Problem Many people I know want a personal website like mine. However, setting one up can be expensive—cloud hosting alone can cost over 4,000 TWD per year. Not everyone has their own server, so today, I'm going to share an ultra low-cost method for building a website. ## Setup Costs ~~Website Hosting: 4000+ / year~~ Domain Name: 680 / year ## What is Jekyll Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. Written in Ruby by Tom Preston-Werner, GitHub's co-founder, it is distributed under the MIT license. (Wiki) ## Prerequisites ### * Register for a [GitHub account](https://github.com/) ### * Buy your own domain name (For Taiwanese domains, a local registrar is usually cheaper. For international domains, you can use GoDaddy.) ## Setup Steps ### 1. First, choose a Jekyll template [Free Templates](http://jekyllthemes.org/) ### 2. Fork the project. This tutorial uses the [Zolan open-source theme as an example](https://github.com/artemsheludko/zolan). Click Fork. ![GitHub Zolan repository page with highlighted Fork button](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/ky411PL.png) ### 3. Once the fork is complete, we need to configure GitHub Pages. Go to Settings > Pages. Under Source, select your branch, set the folder to `/ (root)`, and click Save. ![GitHub Pages settings page with branch, root folder, and save highlighted](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/AUcLezJ.png) ### 4. GitHub Actions will now start the build and deployment process for the website. ![Successful GitHub Pages build and deployment workflow in Actions tab](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/b4QB0r1.png) ### 5. Once the build and deployment are finished, your website's URL will be displayed on the GitHub Pages tab. ![GitHub Pages settings displaying published website URL](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/GaLkQnI.png) ### 6. Enter your custom domain and click Save. ![GitHub Pages custom domain freeblog.markkulab.net and Save button](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/CTzYhPb.png) ### 7. Go to your DNS provider and add a CNAME record for your domain, pointing it to the URL provided by GitHub. ![GoDaddy DNS records page adding CNAME for freeblog to github.io](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/vjYI98c.png) ### 8. Edit the `_config.yml` file in your project, clear the `baseurl` value, and then Commit changes. ![GitHub config.yml file showing baseurl parameter highlighted in red](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/3jOMt4l.png) ### 9. At this point, GitHub Actions will rebuild and redeploy. Once it's done, you can visit your blog. ![Zolan blog homepage with Alex Rodriguez's intro and photo](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/NJtReZL.png) ### 10. If you want an HTTPS certificate, you can manage your domain's DNS with Cloudflare to get their free SSL service. [See my previous post for reference](https://blog.markkulab.net/2021/10/27/clould-flare-cdn/). ## Editing Website Posts ### 1. Go to the project's Code tab > `zolan/_posts`. This folder contains the blog posts. Click on any post to select it. ![GitHub posts directory listing blog post markdown files](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/A6dAj0i.png) ### 2. Click the edit icon. ![GitHub page showing Jekyll post file with highlighted edit icon](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/9e8x5nW.png) ### 3. Try modifying the title and content, then Commit changes. ![GitHub web interface editing a Jekyll markdown file](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/ayFRoWo.png)![GitHub commit changes dialog for Jekyll markdown file](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/GBXx63t.png) ### 4. Wait for the GitHub Action to finish building and deploying. The content of the post you just modified will be updated. ![Deployed Jekyll blog post titled Welcome to Jekyll! mark testtest in browser](https://blog.markkulab.net/content/markku/posts/github-jekyll-free-blog/images/SwKXUxO.png) ### 5. To add a new post, simply create a new file in the `zolan/_posts/` folder, and a new article will appear. ## Additional Information ### I usually write out my ideas in [HackMD](https://hackmd.io/) first, then copy the content into a new file in that folder to publish. ### Introduction to Relevant Files and Folders zolan/_posts/ => Directory for posts zolan/images => Path for images zolan/_data/settings.yml => Used to set the site icon and content zolan/_config.yml => Site configuration; you can adjust pagination size here zolan/_layouts/ => If you know some HTML, you can modify the layouts here ### Previous post: Setting up Jekyll in a container [Link](https://blog.markkulab.net/2021/04/14/Jekyll-Markdown-Blog/) ### For categories and tags, GitHub Pages does not support the `jekyll-tagging` plugin due to security reasons. Therefore, you'll have to implement them yourself [Link](http://bunchpost.site/jekyll/2018/07/08/step-jekyll-category-in-3teps.html?fbclid=IwAR0h4BIf-k5HgAOs--E8LYWTmVUyFdst1KzDecFJ2qaGjC13Gr3-n14Yu_o#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2). ### If you want to optimize Jekyll for SEO, you can achieve this with the following two plugins: jekyll-sitemap jekyll-seo-tag ### Previous post: Setting up Jekyll in a container [Link](https://blog.markkulab.net/2021/04/14/Jekyll-Markdown-Blog/) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/github-jekyll-free-blog) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.