I wanted to finally (once again?) get myself to actually write some articles and instead of using something normal like WordPress I had to create a custom blog system once again like a madman! I also really wanted to make something using SvelteKit and this seemed like a good fit!
Where do I store the data?
One very important question right off the bat was "Where do I store the post data for free?" while SvelteKit has a server component I was primarily interested in using it as a fancy static site generator and compared to other options such as Hugo Markdown files seemed like an obvious choice here. The only problem is editing files in a git repository to write a blog post never seemed like a particularly well designed user experience to me. While playing around with some ideas like using GitHub Issues I stumbled upon another madman called Rigo who was using GitHub Discussions for his blog system and was so impressed that I wanted to do so as well!...GitHub Discussions it is.
Why GitHub Discussions
Not only does it have a powerful API but also comes along with a lot of other things one would usually associate with a decent blog system like:
- (Markdown) Editor with previews
- Ability for users to comment
- Reactions 👍
- A mobile app (GitHub Mobile!)
- Tags (via labels), although I am not using this currently
It is also completely free to use!
As mentioned previously I wanted to do something with SvelteKit so this was an obvious choice here. SvelteKit allows you to write a website structure with Svelte and create a static website out of this with dynamic data pulled on build time, so the idea was when building the website I pull all the GitHub Discussion posts and create a listing and details pages from it.
Since the GitHub Discussion API is using GraphqL the first thing I needed was a query:
This helps us to get the first 100 discussion posts from the user: atomicptr (Hey, thats me!) and the repository atomicptr.dev with whatever data seemed necessary (ID, title, body, created at date, author info, labels).
First we write a function that actually pulls ALL of the posts:
This now lets us render the post list (which at the current state is still kinda shit)
Similar to Rigo I decided to use a front matter part in the Markdown to set some variables although I chose to have the slug primarily generated from the title because the chance of me changing the title is low anyway and the chance of me creating another post with the same title is basically 0.
The front matter gets extracted and the remaining Markdown is parsed by Remark to render it later on the page:
And thats it we have a blog!