330 lines
18 KiB
HTML
330 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="generator" content="Norgolith" />
|
|
|
|
|
|
|
|
<meta name="description" content="How to make a blog using Norg and some random project from github" />
|
|
|
|
|
|
<meta name="author" content="Adumh00man" />
|
|
|
|
|
|
<meta name="keywords" content="Blog, Neorg, Nvim, Voidarc, Webdev" />
|
|
|
|
|
|
|
|
|
|
<meta property="og:title" content="Making A Blog Using A Niche Markdown Language - Voidarc" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://blog.voidarc.co.uk/posts/site/" />
|
|
<meta property="og:description" content="How to make a blog using Norg and some random project from github" />
|
|
<meta property="og:site_name" content="voidarc" />
|
|
<meta property="og:locale" content="en-US" />
|
|
|
|
<link rel="canonical" href="https://blog.voidarc.co.uk/posts/site/" />
|
|
<meta name="robots" content="index, follow" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script>
|
|
document.addEventListener("alpine:init", () => {
|
|
Alpine.data("menu", () => ({
|
|
currentPage: window.location.pathname,
|
|
|
|
openMobile: false,
|
|
|
|
toggleMobile() {
|
|
this.openMobile = !this.openMobile;
|
|
}
|
|
}));
|
|
|
|
Alpine.data("toc", () => ({
|
|
open: false,
|
|
|
|
toggle() {
|
|
this.open = !this.open;
|
|
document.querySelector("#toc-toggle-icon").classList.toggle("rotate-90");
|
|
}
|
|
}));
|
|
|
|
Alpine.data("theme", () => ({
|
|
// Defaults to dark theme
|
|
current: "dark",
|
|
|
|
init() {
|
|
const storedTheme = localStorage.getItem("theme");
|
|
if (storedTheme === "dark") {
|
|
this.current = "dark";
|
|
} else if (storedTheme === "light") {
|
|
this.current = "light";
|
|
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
this.current = "dark";
|
|
}
|
|
localStorage.setItem("theme", this.current);
|
|
if (this.current === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
},
|
|
|
|
toggle() {
|
|
this.current = this.current === "dark" ? "light" : "dark";
|
|
document.documentElement.classList.toggle("dark", this.current === "dark");
|
|
localStorage.setItem("theme", this.current);
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.9.0/mermaid.min.js"></script>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.28.1/tabler-icons.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.voidarc.co.uk/assets/css/styles.min.css" />
|
|
|
|
<link rel="icon" href=/assets/norgolith.svg />
|
|
|
|
|
|
<title>Making A Blog Using A Niche Markdown Language - Voidarc</title>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="transition-colors duration-150 ease-linear">
|
|
<header class="relative shadow-sm">
|
|
<nav x-data="menu" class="container mx-auto px-4 md:px-0 font-mono">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo and dark mode -->
|
|
<div x-data="theme" class="flex items-center shrink-0 space-x-2">
|
|
<a href="https://blog.voidarc.co.uk/" class="flex items-center space-x-2">
|
|
<!-- <img src="https://blog.voidarc.co.uk/assets/norgolith.svg" alt="Norgolith Logo" class="h-8 w-8"> -->
|
|
<span class="text-lg md:text-xl font-bold text-magenta">Voidarc</span>
|
|
</a>
|
|
<button
|
|
@click="toggle()"
|
|
type="button"
|
|
class="rounded-lg flex items-center"
|
|
:aria-label="current === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
>
|
|
<i
|
|
:class="current === 'dark' ? 'ti-sun hover:text-yellow' : 'ti-moon hover:text-blue'"
|
|
class="ti text-xl md:text-2xl text-grey transition-colors duration-200 ease-in-out"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex md:items-center md:space-x-8">
|
|
|
|
<a
|
|
:class="{ 'text-magenta!': currentPage.startsWith('/posts') }"
|
|
class="text-text-alt hover:text-blue px-3 py-2 rounded-md text-sm font-medium"
|
|
href="https://blog.voidarc.co.uk/posts"
|
|
>Blog</a>
|
|
|
|
<a
|
|
:class="{ 'text-magenta!': currentPage.startsWith('https://git.voidarc.co.uk') }"
|
|
class="text-text-alt hover:text-blue px-3 py-2 rounded-md text-sm font-medium"
|
|
href="https://git.voidarc.co.uk"
|
|
>Git</a>
|
|
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<div class="md:hidden">
|
|
<button @click="toggleMobile" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-dark-grey hover:text-text-alt focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<!-- Hamburger Icon -->
|
|
<svg x-show="!openMobile" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
<!-- Close Icon -->
|
|
<svg x-show="openMobile" class="h-5 w-5 text-red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div
|
|
x-show="openMobile"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click.outside="openMobile = false"
|
|
class="md:hidden"
|
|
id="mobile-menu"
|
|
>
|
|
<div class="flex flex-row items-center justify-between pt-2 pb-4">
|
|
|
|
<a
|
|
:class="{ 'text-blue!': currentPage.startsWith('/posts') }"
|
|
class="text-text-alt hover:text-blue px-3 py-2 rounded-md text-sm font-medium"
|
|
href="https://blog.voidarc.co.uk/posts"
|
|
>Blog</a>
|
|
|
|
<a
|
|
:class="{ 'text-blue!': currentPage.startsWith('https://git.voidarc.co.uk') }"
|
|
class="text-text-alt hover:text-blue px-3 py-2 rounded-md text-sm font-medium"
|
|
href="https://git.voidarc.co.uk"
|
|
>Git</a>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<main class="container mx-auto min-h-screen pt-8 px-4 md:px-0">
|
|
|
|
<div>
|
|
<h1>Making a Blog Using a Niche Markdown Language</h1>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex flex-col md:flex-row flex-1 justify-between">
|
|
<div class="flex flex-col space-y-2">
|
|
|
|
|
|
|
|
<span class="text-grey text-sm tabular-nums text-opacity-70 dark:text-opacity-100 space-x-1">
|
|
<time datetime="2026-03-21T11:39:17+00:00">March 21, 2026</time>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center max-w-[50%]">
|
|
<span class="font-semibold mr-px">Tags: </span>
|
|
|
|
<a
|
|
class="w-fit bg-grey hover:bg-magenta text-base hover:text-base! no-underline! hover:no-underline! text-sm mr-2 last:mr-0 px-1 rounded-sm"
|
|
href="https://blog.voidarc.co.uk/categories/Blog"
|
|
>
|
|
Blog
|
|
</a>
|
|
|
|
<a
|
|
class="w-fit bg-grey hover:bg-magenta text-base hover:text-base! no-underline! hover:no-underline! text-sm mr-2 last:mr-0 px-1 rounded-sm"
|
|
href="https://blog.voidarc.co.uk/categories/Neorg"
|
|
>
|
|
Neorg
|
|
</a>
|
|
|
|
<a
|
|
class="w-fit bg-grey hover:bg-magenta text-base hover:text-base! no-underline! hover:no-underline! text-sm mr-2 last:mr-0 px-1 rounded-sm"
|
|
href="https://blog.voidarc.co.uk/categories/Nvim"
|
|
>
|
|
Nvim
|
|
</a>
|
|
|
|
<a
|
|
class="w-fit bg-grey hover:bg-magenta text-base hover:text-base! no-underline! hover:no-underline! text-sm mr-2 last:mr-0 px-1 rounded-sm"
|
|
href="https://blog.voidarc.co.uk/categories/Voidarc"
|
|
>
|
|
Voidarc
|
|
</a>
|
|
|
|
<a
|
|
class="w-fit bg-grey hover:bg-magenta text-base hover:text-base! no-underline! hover:no-underline! text-sm mr-2 last:mr-0 px-1 rounded-sm"
|
|
href="https://blog.voidarc.co.uk/categories/Webdev"
|
|
>
|
|
Webdev
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div x-data="toc" class="mt-4">
|
|
|
|
<button @click="toggle()" type="button" class="inline-flex items-center">
|
|
<span class="sr-only">Close Table of Contents</span>
|
|
<h3 class="mt-0! mr-1">
|
|
Table of Contents
|
|
</h3>
|
|
<span
|
|
id="toc-toggle-icon"
|
|
class="transition-all duration-300 ease-in-out text-2xl hover:text-blue ti ti-arrow-badge-right-filled"
|
|
></span>
|
|
</button>
|
|
<nav
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
x-show="open"
|
|
class="toc"
|
|
>
|
|
<ol><li><a href="#Nonsense-Preamble">Nonsense Preamble</a><ol><li><a href="#Norgolith">Norgolith</a><ol><li><a href="#The-First-Hurdle">The First Hurdle</a></li><li><a href="#The-First-Attempt">The First Attempt</a></li><li><a href="#The-Second,-More-Successful,-Attempt">The Second, More Successful, Attempt</a></li><li><a href="#Styling,-and-my-newfound-love-hate-relationship-with-Tailwind">Styling, and my newfound love-hate relationship with Tailwind</a></li></ol></li><li><a href="#The-Dreaded-Backend">The Dreaded Backend</a></li></ol></li></ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div id="content" class="mt-12 break-keep pt-10 border-t border-t-base-alt dark:border-t-[#39394b]">
|
|
<h1 id="Nonsense-Preamble" >Nonsense Preamble</h1> <p >Neorg is a markdown Language that is Org mode but with some different shit in it. It is supposed to be a replacement, but since I never really used Org mode in the first place, that doesn't really apply. However, after using it for a whole 10 seconds, I decided I could never go back to using Markdown ever again. Norg was just a superior language in almost every way, except widespread support. There are a plethora of plugins, but a distinct lack of real world uses, or even good utilities for using it outside of nvim, like it was intended. However, there was some random thing called Norgolith, that did apparently exactly what I needed it to, so here we are.</p><h2 id="Norgolith" >Norgolith</h2> <p >Apparently, as often happens on the internet, someone had thought of the same genius idea I had and made it already. I was fully prepared to have to spend 3 weeks making a custom solution in Javascript that would end up half baked, but fortunately someone had already done all the hard work for me!</p><p >A static site generator is exactly what it says on the tin. It takes in some manner of arbitrary markdown script, and spits out some html that can be served to the end user. Pretty simple if you ask me. Well, if you had asked me before I started that is. As things often go, I did things completely wrong the first time round. I assumed that, because I didn't know what generator meant, Norgolith would have some docker compose version that i could just shove some norg files into and it would handle the rest. That's literally what it says on the homepage, after all. Something something Sod's law. Turns out that I would have to use more than just docker in order to get something like this working.</p><h3 id="The-First-Hurdle" >The First Hurdle</h3> <p >When I first downloaded the app in question, the first problem I encountered was the blatant lack of documentation upkeep. As the docs indicated, I tried running <code>lith serve</code> to <em>serve</em> the app. Turns out, the command had been renamed to <code>lith dev</code> quite a while ago. The command itself hadn't changed, nor the functionality, just the name. Of course, this was as simple as I thought, because I tend not to think much when faced with simple concepts. The same thing happened when I decided on a whim to host an email server, which still to this day has not recieved a single email from anyone other than myself.</p><h3 id="The-First-Attempt" >The First Attempt</h3> <p >Once I had realised that the docs were completely unreliable, I decided that it would be a great use of my time to try and follow them anyway. The creator (amartin) had done the usual blogger thing and hosted all the docs on Norgolith, which would be fine if Norgolith had a search function. Unfortunately, it does not, nor does it have a nice page where you can see all the pages that are outside of the post directory, which just so happened to be every page of the docs. In fact, on the doc site, there is a dead link to a theoretical post example, which was removed on github but not from the header.</p><p >Strange.</p><p >I initialised a Norg site in some random directory, still believing that I could host the whole thing self-sufficiently, and instead of reading more than the code snippets in the github readme, I set off immediately to make a docker container that would serve the app. By that, I mean I asked gemini and had to wait for the app to compile on my very old server. After a while, I gave up and went to do something else, because I'm lazy. The first site was a failiure.</p><h3 id="The-Second,-More-Successful,-Attempt" >The Second, More Successful, Attempt</h3> <p >For some reason, when I woke up the next day, something came over me. I realised that when I had run <code>lith build</code>, it had produced a <u><strong>static site</strong></u> , which made me realise that I might be stupid. I realised that using some complex webhooks, i.e. 1 webhook, I could have a local copy in norg form, and then have a git managed copy of the generated site. Shouldn't be too difficult using n8n, the only useful app I've ever installed. Before that, though, I could use the dev server for what it was actually intended for, and make a first post to style.</p><h3 id="Styling,-and-my-newfound-love-hate-relationship-with-Tailwind" >Styling, and my newfound love-hate relationship with Tailwind</h3> <p >Tailwind css was created in order to solve the really hard task of adding <code>border-radius: 3;</code> to anything on a website. Why use readable syntax when your css can be spread across 15 different files and require an interpreter, after all. Tailwind is based on immutable classes, and too many variables for my liking. Instead of using <code>color: white;</code> in a css file, you could apply the class <code>text-text</code> to every div on your page, provided that you set the <code>--text</code> variable to white beforehand, in a different file, and managed to compile it using the right version of tailwind. Because of the fact that I use nix, btw, the default package for tailwind provides tailwind 3, that requires npx nonsense packages in order to function, and also doesn't recognise half of the functions that are in the theme I <s>stole</s> borrowed and changed, as stated in the licence I definately read.</p><p >On my first try, having never used tailwind before, I decided to just edit the files and see what happened. Of course, because the tailwind.css file isn't the one that gets applied to the frontend, and nothing changed, so I gave up (I know, shocking).A On a retry, I used the <code>tailwind_4</code> package, and it worked perfectly first try. Who could've guessed, I guess. Once I realised tailwind was actually pretty simple, and I was the problem, I managed to import my fonts and a Catppuccin css variable file, hence the current color scheme. Pretty nifty, huh.</p><p >In short, fuck tailwind. But also, use tailwind for everything you possibly can.</p><h2 id="The-Dreaded-Backend" >The Dreaded Backend</h2> <p >The concept was simple, as all concepts are, expecially when the person making said concept has no concept of how to properly make concepts. This person turned out to be me, and the concept was fairly simple. Have a primary repo, that contained 2 submodules. The primary repo would house the whole site, config, themes, etc. The first submodule would contain the raw .norg files that are in the content/ directory, and the second would have the output html files that would need to end up on the server serving the service that is currently letting you read this right now.</p><p >Said service would be a simple nginx docker container on some random port, that serves whatever it is asked. In order for such a service to be viable, I don't want to have to manage it manually. Instead, I can use a webhook to pull the html repo whenever there is a new commit. This could also be on a timer, but instant gratification is better.</p><p >Unfortunately, nothing ever goes to plan when linux is involved. The first indicator that my system wasn't going to work out was the fact that when you rebuilt the site, the repo within the public folder was erased. This is nonsense, and</p>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="mt-8 py-4 px-6 w-full font-mono">
|
|
<div
|
|
class="flex flex-col md:flex-row justify-between md:items-center font-medium text-xs md:text-sm text-text-alt space-y-4 md:space-y-0"
|
|
>
|
|
<span
|
|
>Copyright © 2026
|
|
|
|
<a
|
|
href="https://git.voidarc.co.uk/voidarc"
|
|
class="text-blue hover:underline">user01</a
|
|
>.
|
|
|
|
|
|
<br class="md:hidden" /> Licensed under MIT.
|
|
|
|
</span>
|
|
<div class="flex flex-inline">
|
|
|
|
<div class="mr-4 md:mr-6 lg:mr-8 last:mr-0">
|
|
<a
|
|
href="url"
|
|
class="hover:text-blue"
|
|
>
|
|
<span>Link_name</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mr-4 md:mr-6 lg:mr-8 last:mr-0">
|
|
<a
|
|
href="https://git.voidarc.co.uk/voidarc"
|
|
class="hover:text-blue"
|
|
>
|
|
<span>Github</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|