1 line
15 KiB
HTML
1 line
15 KiB
HTML
<!doctypehtml><html lang=en-US><meta charset=UTF-8><meta content=width=device-width,initial-scale=1.0 name=viewport><meta content=Norgolith name=generator><meta content="How to make a blog using Norg and some random project from github"name=description><meta content=Adumh00man name=author><meta content="Blog, Neorg, Nvim, Voidarc, Webdev"name=keywords><meta content="Making A Blog Using A Niche Markdown Language - Voidarc"property=og:title><meta content=website property=og:type><meta content=https://blog.voidarc.co.uk/posts/site/ property=og:url><meta content="How to make a blog using Norg and some random project from github"property=og:description><meta content=voidarc property=og:site_name><meta content=en-US property=og:locale><link href=https://blog.voidarc.co.uk/posts/site/ rel=canonical><meta content="index, follow"name=robots><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`,()=>{let b=`dark`,c=`light`,a=`theme`;Alpine.data(`menu`,()=>({currentPage:window.location.pathname,openMobile:!1,toggleMobile(){this.openMobile=!this.openMobile}}));Alpine.data(`toc`,()=>({open:!1,toggle(){this.open=!this.open;document.querySelector(`#toc-toggle-icon`).classList.toggle(`rotate-90`)}}));Alpine.data(a,()=>({current:b,init(){const d=localStorage.getItem(a);if(d===b){this.current=b}else if(d===c){this.current=c}else if(window.matchMedia(`(prefers-color-scheme: dark)`).matches){this.current=b};localStorage.setItem(a,this.current);if(this.current===b){document.documentElement.classList.add(b)}},toggle(){this.current=this.current===b?c:b;document.documentElement.classList.toggle(b,this.current===b);localStorage.setItem(a,this.current)}}))})</script><script defer src=https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.9.0/mermaid.min.js></script><link href=https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.28.1/tabler-icons.min.css rel=stylesheet><link href=https://blog.voidarc.co.uk/assets/css/styles.min.css rel=stylesheet><link href=/assets/norgolith.svg rel=icon><title>Making A Blog Using A Niche Markdown Language - Voidarc</title><body><div class="transition-colors duration-150 ease-linear"><header class="relative shadow-sm"><nav class="container mx-auto px-4 md:px-0 font-mono"x-data=menu><div class="flex items-center justify-between h-16"><div class="flex items-center shrink-0 space-x-2"x-data=theme><a class="flex items-center space-x-2"href=https://blog.voidarc.co.uk/> <span class="text-lg md:text-xl font-bold text-magenta">Voidarc</span> </a><button :aria-label="current === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"class="rounded-lg flex items-center"@click=toggle() type=button><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><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><div class=md:hidden><button class="inline-flex items-center justify-center p-2 rounded-md text-dark-grey hover:text-text-alt focus:outline-none"@click=toggleMobile aria-controls=mobile-menu aria-expanded=false type=button><span class=sr-only>Open main menu</span> <svg class="h-5 w-5"viewbox="0 0 24 24"fill=none stroke=currentColor x-show=!openMobile><path d="M4 6h16M4 12h16M4 18h16"stroke-linecap=round stroke-linejoin=round stroke-width=2 /></svg> <svg class="h-5 w-5 text-red"viewbox="0 0 24 24"fill=none stroke=currentColor x-show=openMobile><path d="M6 18L18 6M6 6l12 12"stroke-linecap=round stroke-linejoin=round stroke-width=2 /></svg></button></div></div><div @click.outside="openMobile = false"x-transition:enter="transition ease-out duration-300"x-transition:leave="transition ease-in duration-300"class=md:hidden id=mobile-menu x-show=openMobile x-transition:enter-end=opacity-100 x-transition:enter-start=opacity-0 x-transition:leave-end=opacity-0 x-transition:leave-start=opacity-100><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 class=mt-4 x-data=toc><button class="inline-flex items-center"@click=toggle() type=button><span class=sr-only>Close Table of Contents</span> <h3 class="mt-0! mr-1">Table of Contents</h3> <span class="transition-all duration-300 ease-in-out text-2xl hover:text-blue ti ti-arrow-badge-right-filled"id=toc-toggle-icon></span></button><nav x-transition:enter="transition ease-out duration-300"x-transition:leave="transition ease-in duration-300"class=toc x-show=open x-transition:enter-end=opacity-100 x-transition:enter-start=opacity-0 x-transition:leave-end=opacity-0 x-transition:leave-start=opacity-100><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><a href=#The-First-Attempt>The First Attempt</a><li><a href=#The-Second,-More-Successful,-Attempt>The Second, More Successful, Attempt</a><li><a href=#Styling,-and-my-newfound-love-hate-relationship-with-Tailwind>Styling, and my newfound love-hate relationship with Tailwind</a></ol><li><a href=#The-Dreaded-Backend>The Dreaded Backend</a></ol></ol></nav></div><div class="mt-12 break-keep pt-10 border-t border-t-base-alt dark:border-t-[#39394b]"id=content><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.<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>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.<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.<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>Strange.<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.<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.<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>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>In short, fuck tailwind. But also, use tailwind for everything you possibly can.<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>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>Unfortunately, nothing ever goes to plan when linux is involved.</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 class="text-blue hover:underline"href=https://git.voidarc.co.uk/voidarc>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 class=hover:text-blue href=url> <span>Link_name</span> </a></div><div class="mr-4 md:mr-6 lg:mr-8 last:mr-0"><a class=hover:text-blue href=https://git.voidarc.co.uk/voidarc> <span>Github</span> </a></div></div></div></footer></div> |