jopen is a blog about mostly tech-related projects I do for fun. In fact, jopen itself is one of them! I wanted to take notes on the process of my projects, and there was no reason to keep them private. So, I made this blog, To Learn In Public.

I don’t like bloated CMSs. This stack is cheap, open-source, and lets me focus on writing in a tool I already use (Obsidian). Plus, it’s all plain text — future-proof.

Here’s how I made it:

Tools#

Every push to GitHub updates the blog via Cloudflare and every comment shows up on GitHub as well.

Setup#

A. Buying a domain#

This was the only step in which I paid for something, purchasing this .link domain for ~$10 a year. But there were cheaper (even free) options as well.

B. Hugo site and Terminal theme#

I customized the color scheme using the Terminal CSS customizer and chose #282828 as the background, #ebdbb2 as the foreground, and #689d6a as the accent color. This generated a .css file, a favicon, and an OG image that I added to my site.

And here’s the list of changes I made to the /themes/terminal/config.toml file:

[params]
customCSS = ["css/terminal.css"]
centerTheme = true
showLastUpdated = true
updatedDatePrefix = "Updated on"
readMore = "Read"
missingContentMessage = "This is not the webpage you're looking for." # A reference from the movie Star Wars: Episode IV - A New Hope
minuteReadingTime = "min[s] read"
words = "word[s]"

[params.logo]
logoText = "jopen"

[menu]

[[menu.main]]
identifier = "about"
name = "About"
url = "/about"

[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/tags"

[[menu.main]]
identifier = "search"
name = "Search"
url = "https://www.google.com/search?q=site%3Ajfryusef.link+QUERY"

C. Creating a Git Repository and connecting to GitHub#

I initialized the local Hugo files in Git and turned on Discussions as a feature on jopen’s GitHub repo (so I can use Giscus in step F).

GitHub repository’s Discussions screenshot

D. Deploying via Cloudflare Pages#

Added jfryusef.link and www.jfryusef.link as two custom domains.

E. Setting up Obsidian#

I merged the Obsidian vault root and local files of Hugo, and every once in a while, I push its content to GitHub to sync manually because I couldn’t make the Git plugin to work properly.

Here is the list of all the core plugins that are enabled in my vault:

  • Backlinks
  • Bookmarks
  • Command palette
  • File recovery
  • Files
  • Graph view
  • Outgoing links
  • Outline
  • Page preview
  • Quick switcher
  • Search
  • Slash commands
  • Tags view
  • Template
  • Word count
  • Workspaces

And here is the list of the community plugins that I use:

jopen’s Obsidian vault screenshot

And here’s the metadata for this post:

+++
title = "How I made jopen?"
date = "2025-06-20T13:41:37+03:30"
lastmod = "2025-07-19"
#dateFormat = "2006-01-02" # This value can be configured for per-post date formatting‍
author = "yusef"
tags = ["jopen", "Markdown", "Obsidian", "Git", "GitHub", "Hugo", "Website", "Software"]
description = "How I built a blog using just Markdown and Git"
showFullContent = false
readingTime = true
draft = true # Until the post is finished
+++

F. Enabling Giscus#

Nothing special. I just enabled comments in almost every page, because why not?

<script src="https://giscus.app/client.js"
        data-repo="jfryusef/jopen"
        data-repo-id="[REPO ID]"
        data-category="Comments"
        data-category-id="[CATEGORY ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="gruvbox_dark"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

Update#

Recently I use VS Code + this extension and this Gruvbox theme instead of Obsidian for writing posts & local Markdown management. It also has built-in GitHub integration.

But there was a little problem…#

I was using Hugo-friendly absolute web paths (/images/...) for images in my posts. That worked fine once Hugo built the site (because Hugo mapped /images/... to my site’s static/images/ directory), But VS Code’s preview didn’t know anything about Hugo’s web root; Therefore it was blank in preview. So I made a symlink (in my jopen’s local directory) so VS Code could see images at /images/... as if they were inside my project:

ln -s ./static/images ./images

Now VS Code preview follows /images/... and Hugo will still work unchanged.

Feel free to share your own setups if you have something similar and If you have any questions, ask them in the comment section below.