Table of Contents
Welcome to the blog!
You might be wondering why I decided to start a blog. Well the thing is, this isn’t my first blog. I’ve had one in that past hosted on GitHub pages built with Jekyll, using the minima theme. I made that around a month or two after I made a GitHub account. It was purely for the joy of deploying my own blog - I didn’t actually write anything on it 😂
I randomly came across a few people’s blogs yesterday and I noticed one thing: they were all built from the ground up. Not many people used Jekyll or a GitHub pages theme or even Hugo. Most were either static sites or Next.js/SvelteKit blogs with custom styling, routing and syntax highlighting. I randomly got the urge to start a blog again and this time, I wanted to build it from scratch.
I was a bit stuck however… I had tried using SvelteKit to dynamically make a list of pages and pre-render them, those attempts hadn’t gone too well. Especially since I wanted to load files from the source directory, and for some weird reason it didn’t work when deployed - because obviously the source code isn’t deployed. Or that’s what I thought.
I started following JoyOfCode’s tutorial hoping that they would address the issue. The fix was rather simple
const paths = import.meta.glob("/src/posts/*.md", { eager: true });
For the curious, here’s how vite does this. I’m not going to explain it here because I’m not sure I understand it myself 😅
The rest of the tutorial was pretty straightforward. They had decided to use Open Props for the styling but I went for good ol’ Tailwind CSS. That did make following the tutorial a bit harder since they were using a lot of premade values - converting that to Tailwind classes was really annoying - so I did end up using some vanilla CSS rules for the layout. The markdown is parsed using MDsveX and styled with Tailwind Typography and shadcn-svelte for the dark mode toggle.
I have 6 88x31
icons in the footer, which I thought would be cool to add but they kinda feel out of place with this cool and minimal blog — might remove it later with feedback. Also an RSS feed! I thought of not adding it because a total of 0 people who visit my blog probably uses RSS but its cool that its there and its as an 88x31 button so extre points for retro-ness I guess
I also spent half an hour fixing a code tag that made the blog unusable on mobile. The <pre>
and <code>
tags were going out of the screen on mobile, so I added word wrapping to the svelte file but that didn’t work.
I wasted time since the solution was really just to move that to the global css file so it affected the rendered markdown 🤦♂️
Best part of the entire blog is syntax highlighting for 200+ languages with 50+ VSCode themes thanks to shiki! I’m using the github-dark-default
theme which I had used for nearly for 2 years on VSCode, eventually switching between tokyo night and poimandres. I guess markdown support is good too?
Blockquotes are cool
Bold Italic
Inline code
blocks.
Copying text on Mac using ⌘ + C
Copying text on Linux/Windows using CTRL + C
function sayHello(a) {
console.log(`Hello, ${a}!`);
}
function sayHello(a: string): void {
console.log(`Hello, ${a}!`);
}
def say_hello(a: str) -> None:
print(f"Hello, {a}!")
Links to sections!
{
"title": "First Post!",
"description": "This is the first post on the blog!",
"date": "2024-10-04",
"categories": ["general", "svelte", "webdev"],
"published": true
}
And also images!