DEV Community

Fujiwara Takumi
Fujiwara Takumi

Posted on

2

[Free Blog Creation] I tried hosting a static site with Obsidian and GitHub Pages!

Preface

This is the website I created. *It is still under construction.
https://takumifujiwaradairy.github.io/my_public_notes/

In this article, I would like to introduce how to publish a static website for free using Obsidian and GitHub Pages.
Obsidian also offers a public feature, but it costs $96 per year, which is about 14,000 yen, so in this article, I will show you how to publish a website for free using GitHub Pages!

In this article, I will omit detailed explanations of Obsidian and GitHub Pages.

For this project, I am using Quartz4 as the static site framework for publishing Obsidian!
The reason is simply because the UI looks cool!

Step 1. Fork Quartz4 into your own repository!

https://github.com/jackyzha0/quartz

Fork it into your own repository. Note that GitHub Pages cannot be used for free unless it is a public repository!

Step 2. Clone it locally and add articles.

Clone your repository locally.

$ git clone https://github.com/user-name/obsidian-quartz.git
Enter fullscreen mode Exit fullscreen mode

Add Markdown files under the content directory.

/content/index.md will be the homepage.

npx quartz build  
rm -rf docs && mv public docs  
git add -A  
git commit -m “rebuild site with index.html”
git push origin main
Enter fullscreen mode Exit fullscreen mode

Running these commands will automatically complete the setup.

Step 3. Set up GitHub Pages

Set it up so it looks like the screenshot, and you're good to go!

Image description

That's a quick overview of the deployment process.
There are still more settings to configure, so I'll cover those in another article if I get around to it.

Runner H image

Overwhelmed? Let an AI Handle Your Tasks

Runner H clears your inbox, summarizes Slack threads, and plans your week — without you lifting a finger. You delegate once. It handles the rest.

Try Runner H

Top comments (0)

Dev Diairies image

User Feedback & The Pivot That Saved The Project ↪️

We’re following the journey of a dev team building on the Stellar Network as they go from hackathon idea to funded startup, testing their product in the real world and adapting as they go.

Watch full video 🎥

👋 Kindness is contagious

Delve into a trove of insights in this thoughtful post, celebrated by the welcoming DEV Community. Programmers of every stripe are invited to share their viewpoints and enrich our collective expertise.

A simple “thank you” can brighten someone’s day—drop yours in the comments below!

On DEV, exchanging knowledge lightens our path and forges deeper connections. Found this valuable? A quick note of gratitude to the author can make all the difference.

Get Started