Making a blog for free 💰

So, as you can tell, I made a blog (woo hoo 🎉). The reasons for “why” can can be seen in my first post. (Spoiler: Unemployment, probably). But hey, perhaps you too are wondering how to create a blog not only quickly, but also cheaply, and have it look pretty decent too.

Okay for starters, this won’t be a literal step by step guide, because the tutorial on building a blog using Astro is great. I’m not going to try to do that. I’m going to describe how I built MY blog. That’s everything from what framework, to hosting, to literally where I write my blogposts (Not in VSCode, you brute), and even some issues I ran into along the way. Sound good? Great.

I chose Astro as my framework of choice because:

1. I wanted to learn something kind of new.
2. Wanted it to be similar enough to things I already knew.
3. Performance.

Again, use their guide, it’s 👌. But if you’re just curious here’s a snippet to get you started:

pnpm create astro@latest

If you’re looking to use React components anywhere, I use shacn/ui when I can. It’s great to get you started and you can quickly get theming with light/dark mode right out of the box. Speaking of…

I ran into issues getting light/dark mode to work with all of the components I was using. Some of them expect next-themes, to be available, which it’s not. In Astro they have Nano Stores. The Astro equivalent of next-themes would be this:

import { atom } from 'nanostores';
 
export const themeStore = atom<'light' | 'dark' | 'system'>('system');

Then you can consume it/set themes where you need to. Here’s an example of my Sonner component:

import { themeStore } from '@/themeStore'; // your file
import { useStore } from '@nanostores/react';
import * as React from 'react';
import { Toaster as Sonner } from "sonner"
  
type ToasterProps = React.ComponentProps<typeof Sonner>
 
const Toaster = ({ ...props }: ToasterProps) => {
 
const theme = useStore(themeStore);
// you'd use themeStore.set(...) to change the theme
return (
    <Sonner
    theme={theme as ToasterProps["theme"]}
    // other props
      {...props}
    />
  ) 
}
 
export { Toaster }

Great.

Now you have a blog working with some cool components and dark/light mode, all without spending a dime. Now you think:

“Where can I put this thing so people can see it?”

(No one will see it, but let’s push on.)

Netlify. Or some other places, but Netlify is easy and has a great free tier. You can just connect it to your repository on Github and it’ll take it from there.

So now you need to take thoughts out of your brain and onto a webpage that won’t get read. I can’t help with that. However, I can help picking a good tool to write the blogposts in. If you’re using markdown I recommend Obsidian. It’s a free markdown notetaker that is sleek. It even has a paid product to host your blog. But you’re not doing that, because you’re capable and scrappy and get to take advantage of freemium tiers targeted at growing startups. You can write your blogs in that beautiful app, and then crudely copy and paste them into your codebase, or you can use Obsidian Markdown Blogger a community plugin that just copies files to another folder. Fancy! You could also write this yourself because you scrappy and all those things but it’s free, so just use the free code. Write your blogs, commit your code, and push it. And that’s it. Breathe out. You have a blog on the internet. Congrats. Maybe someone will read it. Probably not though, but maybe.

P.S If you investigate the source code and you’re like “Hey, he wrote this in mdx not markdown!” You’d be right. I already had rehype-pretty-code setup for mdx, but this could easily be markdown. I just didn’t want to change it.