Preambule

The first time setting The Den up went… a bit roughlike shit. I started this whole shabang in February 2026, managed to blindly stumble around into a successful deployment to Cloudflare domains and… put a pin on it a week later after I couldn’t get the link navigation work between obsidian pages.
(Parenthethies)

Then, something happened, my friendo (whom I will refer to as The Skull Guy) has set up a server in his apartment and dedicated it entirely to playing around with free AI agents from huggingface. He proposed for me to make use of it remotely, to which I agreed. I’ve put that AI clunker of his (which I called Not-A-Bitch) to work and… It actually helped me understand what the hell is going on with this hugo-html-obsidian pipeline. I am NOT a web developer and I didn’t know what the hell I was doing.
Now, after Not-A-Bitch helped me write most of the extra stuff - I kinda have some level of understanding how this system works. I will share my findings in broad terms. Could be useful if you are as clueless as I was at the start of all this.

The Principle

What this whole shtickTHE DEN is… is… a static site, which is apparently the easiest type of site to build. What does static site mean? It means it’s not a forum, it’s not a marketplace, it’s not nothing. It’s just a baked collection of pages with pictures and text and stuff. That’s it.

Hugo

If you’re making a static site you may wanna use a static site generator. It’s a… thingy that generates a site FOR YOU. In this case, I’ve used a static site generator called Hugo.

You install Hugo (which is written in Go, whatever that means), set it into a folder and you can launch a local test-build of it by opening the folder of your site-project and writing hugo server into the console. After that you’ll be able to view how your site works by going to http://localhost:1313/ in your web browser.

But why the need for some static-site generator? Why not write it all by hand? Every web page is an html file. Every… uuuh… paragraph, highlighted text, image, element - has to be coded in through html tags, which will hook up to css styles and js scripts. To write all that by hand would mean writing something that looks like this:

Yeah. Nobody’s gonna write that shit by hand. You’d usually use some kind of an EDITOR which would transform all of your plain, easy-to read text into these html pages. Hugo… is NOT the editor. Hugo is something that GATHERS PAGES from the editor, then gathers some more instructions written specifically for itself, and bakes it all together into a proper, clean, viewable web site.

It’s default mode relies on markdown (or .md) pages to turn into web-pages, so you will probably need an editor that produces markdown pages. I used exactly that kind of thing, and it was called OBSIDIAN

Obsidian

I’ve used obsidian for a few years now, it’s a neat note-making-taking app which renders your notes as markdown files. Writing documents in obsidian is pretty much like writing in Microsoft Word is 99% of formatting options were stripped from it. It’s easy, pretty and accessible enough to not get in your way, and all the fancy shmancy styling and rendering of your pages will have to be handled by css and html.

What Obsidian allows you to do is set up a hierarchy of documents and folders, put cross-reference links into them, organize and edit everything to your heart’s content AND there are a shitload of community plugins if you need even MORE stuff. You can build a personal worldbuilding wiki in Obsidian, use it as a diary, or as documentation for a project, or… I don’t know what else. I’ve used it for those three.

So the pipeline becomes thus:
You dump Obsidian and Hugo into one folder -> you write your site pages in obsidian markdown -> hugo gathers your pages and makes a site out of them

Markdown

What’s markdown? It’s a… Something that’s called markup language. It’d not like a coding language, it doesn’t perform functions or executes code. It’s just used to easily style a text in a simple, generalized way according to a set of rules. If everyone agrees to this set of rules and everyone writes all of their documents in markdown - then one .md page can be used in any place, any app, and it will result in the same page.

**bold text**
-italic text-
==highlighted text==

Markdown really works with only simple conventions. Italic/bold text, paragraphs, footnotes, etcetera. You can’t color a text or do some weird funky shit to it in Markdown. Simplicity is the price of accessibility.

Hugo-Html Connection

Working with this pipeline will mean wrangling these types of files:

1. Markdown - your dough, your uncooked site pages made with Obsidian
2. Html - mainly used for

Installation and Setup Process

Installation of Hugo

There are several ways to install Hugo. Many of the recommended ones included words and terms that scared me so I pick the stupidest, most straightforward one, which you can find over here¹.

Download the zip archive with the latest Hugo, extract it into some folder, and then add the directory with it’s .exe to the PATH ENVIRONMENT VARIABLE! “What in the fucking fuck is that” I hear myself ask. Uuuuuuh it’s a fucking… list of… paths which… can be called like commands straight in the windows console (the BLACK one, the cmd). The process of THAT whole shmoozy looks somewhat like this:

NOW you can launch your console, write something like hugo version and it should respond with information about your installed hugo stuff.

Creating Hugo project

From now on you can create a folder anywhere where you want you site files to be and open windows cmd console in that folder. Then you type something like hugo new site TestSite into it, press Enter and you should get sumthin like this:

It will create a project folder called TestSite with subfolders like: archetypes, assets, content, data, layouts, static, themes and, what’s most important - hugo.toml file. That’s the hugo config which has a bunch of params related to the site AND to the theme you’ll be using. so editing that file will come uuuuh later.

Set Obsidian into the same folder as Hugo-generated site

Just set up an Obsidian vault into the folder you’ve created before (TestSite)². Now that folder will have all the stuff from Hugo PLUS all the stuff from OBSIDIAN.

All of the site pages written through obsidian must be created inside CONTENT folder, nowhere else. Hugo takes whatever is in that folder and bakes it into a site. Even tho obsidian has access to all other folders - it must be used almost entirely inside CONTENT.

Subfolders in the content folder are the site’s SECTIONS. Inside them can also be subsections. Any actual page inside any of those folders will become a page on the site.

Add Github to this mix

Nothing more than that, create a github repository³ into the same folder so now it will contain:

1. Folders and files from Hugo (assets, content, data, layouts, public…)
2. Folders and files from Obsidian (.obsidian)
3. Folders and files from Github (hidden .git folder and a .gitignore)
   Now it all works. My .gitignore looks like:

# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json

# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

# Temporary lock file while building
/.hugo_build.lock

# Obsidian stuff
/content/.obsidian/
/.obsidian/
/templates/

# Misc Stuff
/.idea/

Files generated by hugo are local build files made for testing, so github does not need them, the site will be rebuilt onto Cloudflare from Hugo source files anew.
There is a pipeline that requires setting up something to do with Github actions? To make Github build the Hugo site? But I don’t know about that. I’ve used Cloudflare’s mechanisms to do the last step.

Domain

To have a site running you must get a domain. sitename.com is a domain name. It must be paid for periodically, because it’s being maintained on some server somewhere in the world. You can get one for around 10 bucks a year so it’s not exactly a luxury.

I personally went with a Cloudflare domain ending in .com. That’s where THIS exists right now.

Cloudflare Deployment

Cloudflare has an option to work With Hugo+Github composition through it’s “Workers & Pages” feature. All of it is done automatically after you choose a few options in your build:

The process of configuring this build can be further read about on Cloudflare Documentation Site⁴, which I have severely underused. If you put ‘Hugo’ in all the right places, and your hugo and obsidian and github work - the next time the site’s build is pushed to github - Cloudflare will deploy it and produce a working, breathing website!

Install a theme for Hugo

The site needs visuals. Visuals are governed by a ’theme’. Think of it as a collection of html+css+javascript instructions that define how does the site look, how it behaves, how do the pages look, how do the lists look, where are the navigation menus, ARE there navigation menues?

Without a theme a web site looks not much better than a word document. Even worse that that, more like a .txt with some blue color for links. Go to the Hugo themes registry⁵, pick a theme you like, check the demos, read it’s documentation, decide whether it has the basic set of features you want… and then download it.

I’ve personally landed on Hermit-V2 theme⁶. It was minimalistic and had all the features I could think of (and some I could NOT) so it has become a very robust starting point. Naturally, as you can see, I’ve made some adjustments to it. Most of the stuff it has can be overridden. Well… I say MOST but it’s probably ALL of it, but if you rewriting ALL of it you might as well just be making your own theme.

Summary or TLDR

Obsidian is for easily constructing a hierarchy of folders, categories, interconnected pages in markdown. Hugo is for gathering those markdown pages up and generating a proper html site out of them. Github is for version control and passing the site files into the domain. Cloudflare is for hosting the domain and deploying the site from Github repository. Pick a Hugo Theme for your site and install it. Adjust/override as you go.

I remember watching a few videos on youtube about the whole process. Here they are:

1. https://youtu.be/5iFUkZwTi6s?si=rOVsKqYjXryt4evx
2. https://youtu.be/LIFvgrRxdt4?si=Byg4SPF5jXWGiOOt
3. https://youtu.be/6FoPpUnnyqM?si=O0HdENY7w6Hvuf7f