Apr 5 2023

First Impressions on Building a Blog with Astro, Obsidian, and Netlify

I've struggled to keep my blog up-to-date in the past few years. The reasons for that are many. They say it's not a good idea to convert a hobby into a job because you'll end up not liking your hobby. While that is partially true, my main reasons were technological in nature. Round hole, square peg type of thing. By switching to Astro with Markdoc, I hope to solve my problems.

Screenshot of a blog with Astro, a blog with Nuxt.
Last updated: Wednesday, April 5th, 2023

I realized a long time ago that owning a blog/website doesn't have to be expensive or frustrating if you make the right choices and know how to wire a few things together. That is partially true.

I used WordPress for many years when it was ahead of other free content management systems (CMS). At some point, it started letting me down with dated user interfaces, clunky and irritating development workflows, maintenance needs, and the shit-ton of money my clients and I poured into premium hosting services like WP Engine to cope with it all.

Eventually, I broke free and started writing in Markdown for my personal projects. To display the content, I went through VuePress , Gridsome , Nuxt 2, Next.js , and, finally, Nuxt 3 . I even tried Gatsby, which blew my mind. However, I have an "EEEK!!!" reaction to React for some reason, even though I learned it so I could tinker with Next.js. Vue.js was my first love, as much as Angular can crash and burn. And while I would have loved to continue using Vue.js, I think I've become picky. So what is it I want, you ask? That's an outstanding question. Let's get into it, shall we?

The must-haves and tech choices

First and foremost, I wanted my website to have a lower carbon footprint because websites have a (measurable) carbon footprint . All my choices follow from this imperative.

I wanted:

  • privacy-first setup, including analytics.
  • a performant output without days of optimization.
  • relatively well-integrated tooling - I have too many pet-project to tinker for hours on basic stuff.
  • easy authoring, without being stuck to VS Code - it's just not the nicest feel for authoring content.
  • growth opportunity.

I chose the following technologies, services, and products:

Why Astro & Solid?

I wanted a front-end framework geared toward long-form content capable of interactivity, static generation, and server-side rendering for when my site grows or in circumstances where I need it.

I chose Astro . With Astro (Component) Islands , I can always add more interactivity if needed, and Vanilla JavaScript isn't enough.

Astro apps are fast. No. FAAAAAAST! That's because they have minimal JavaScript loaded in the browser. It wasn't hard to build a theme switcher with plain JavaScript. A menu may come at some point. Beyond that, if I need more, there's always Solid.js, which is SOLID.

I can render content and components server- or client-side with these two. I might miss the Incremental Statig Regeneration feature of Next.js , but I get so much more.

Mixing components from multiple frameworks might be gold because the various communities have produced many cool toys. Still, those toys were not always ported to other frameworks. With Astro, I don't need to choose. It's like an all-you-can-eat buffet.

On top of that, Astro 2.1 introduced support for Markdoc . With Markdoc, that buffet of components becomes even more powerful. No more MDX, thank you.

A brilliant feature is also the content schema . Yes! Markdown frontmatter cringe begone! If you define a content schema, your frontmatter must be valid.

Solid.js gives me super-fast updates, frees me of React's useCallback and dependency arrays, and makes sense to try. I could write volumes - and maybe I will do so when I have time and more experience with it.

Why Cabin?

Their tagline:

Privacy-first, carbon-conscious web analytics

That says it all. Right up my alley.

They don't store cookies, there are no consent banners, data sharing, or ad networks, and they're compliant with privacy laws.

As a bonus, they allow me to publicize my analytics, so folks can verify what is stored. While I have a pitifully low number of visits, here's my analytics data . I love how transparent they are and how transparent they allow me to be. I gather I must plant a tree for every year I own a website, but I plan on that anyway. If I can buy more land. ๐Ÿ˜ฎ

Why Netlify?

I adore Netlify. I'd work for them if they'd have me (sorry, Sitecore). This company has done so much for the evolution of the web that I can't begin to describe it.

Netlify did for me on hosting, what Vercel did in meta-framework with Next.js, Evan You did for frameworks, and WordPress did in content management (back in its better days).

I started on their free plan in their early days and have moved up to Pro in the meantime. No other service has swayed me since. When they came up with the Netlify CMS, I was completely sold. As an aside, I hope the CMS, revived as Decap CMS , catches up. I've been looking for a Markdown / Markdoc-enabled CMS for a while now.

Netlify has support for Large File storage. If you don't know what that is, here's the short version.

When you store images for your blog in your Git repository or other large files, that repository snowballs over time. Most, if not all, repository platforms - GitHub, BitBucker, GitLab, and Azure Repos - have limits on the repository size. The repository size is the total of all the files in your repository, including the git objects data (your history).

Someone smart came up with Git Large File Storage, and it's a brilliant idea. It's just that most app hosting platforms don't support it yet. With Netlify, I have Netlify Large Media . My repository size problem is solved.

On top of that, they have many cool toys included in the lowest-paid plan that I couldn't find elsewhere without pulling my wallet out, such as password-protected sites and static forms. Speaking of money, they have a reasonable upgrade option before going for the Enterprise plan. I appreciate that.

Netlify uses Google as its cloud provider. They're committed to using green energy.

All in all, a perfect match we are.

Why Obsidian?

Since I don't work in an authoring team, I don't need a CMS to write rich content, manage media, and add interactivity. I could use one, but I'm extremely and insanely picky.

While not technically a CMS, Obsidian is extensible, user-friendly, and right here on my computer and as part of my daily tinkering, always at my fingertips, with or without an Internet connection.

I've shopped around for a CMS for a very long time. They all have pros and cons, especially when considering pricing. I can't justify paying 100 Euros monthly just so I don't own my data. I'd instead prefer to sponsor open-source projects for that money because those folks deserve it. If you know of a framework-agnostic, Markdown/Markdoc-enabled CMS with a user interface suitable for non-technical users, ping me on LinkedIn. I could use a Markdown blogging platform yesterday, and I'd love it to be so user-friendly that my mom could blog on it if she were inclined. I would take my wallet out for THAT! My mom blogging? No, silly, the CMS. Although...

๐Ÿคจ

Obsidian is free and private by default. With a staggering amount of plugins, very extensible. Since I can code a bit, I can develop the necessary plugins. It wouldn't be much different from my WordPress development days - just less drama with the setup - and comparable to developing front-end app components.

The makers of Obsidian offer a Sync service, which I considered a few times, but I prefer to Git my stuff for the time being.

One recent addition that made Obsidian a good stand-in for a CMS is a Grammarly plugin by Simon Pacis , which really helped make Obsidian a good choice for me.

Conclusions

Overall, it was a good experience. There were some issues, but nothing I wouldn't expect when building something for the first time with a framework.

The problems

  • I wished for better editor support - the auto-complete in VS Code could use some improvements.
  • The development server kept crashing on me. It wasn't annoying enough to cry about it, but it's something I will have to look into. Maybe I'm breaking it ๐Ÿ˜ฑ
  • I'm unable to use the Astro Markdoc integration as initially intended. The integration is in its early days; hopefully, things will improve. Markdoc can parse plain ol' Markdown. The Astro folks decided that to continue supporting previous functionality, they would make the Markdoc integration only read files with the .mdoc extension. Obsidian only works with .md files properly. So Astro's choice breaks my Obsidian workflow. Even with the Markdoc integration enabled, with a manually changed extension in the integration's dist files, and my files changed to .md, Astro's default Markdown parsers take over and ignore the Markdoc integration. Quite the bummer, but I understand the reasons.

What I love about it

  • The performance. THE PERFORMANCE. OH MY GOD, THE PERFORMANCE!!! ๐Ÿ”ฅ ๐Ÿคฉ ๐Ÿ˜
  • I tried Astro Islands. Awesome stuff. REALLY. It might have issues here and there - to be determined if they're caused by my being new at Solid.js AND Astro, but I'll live if I can mix my frameworks. The learning pains (which aren't many) are totally worth it.
  • Simplicity. I get it. ๐Ÿ‘

Expectations vs. Reality

Let's see how the new setup faired.

I wanted:

  • a performant output without days of optimization โœ…
  • privacy-first setup, including analytics โœ…
  • relatively well-integrated tooling - ๐Ÿ˜ž I WANT Markdoc in .md files. I really do.
  • easy authoring โœ… - I may not yet do all I could do with Markdoc while preserving Obsidian sweetness, but my authoring workflow is much-improved thanks to general fixes. Still some to go, but I'm happy for now.
  • growth opportunity - ๐Ÿ™ I don't want to go MDX. Just don't like it. While Markdoc isn't a real option for me, I can't see the blog going in the direction I envisioned.

If Astronauts allows .md with Markdoc, the last two points go green as well.

Overall, I am very much an Astro fan. I think it's a beautiful meta-framework with many bragging rights. I started a second project with Astro.

Kudos to the maintainers, their docs team, and the Discord community.

Peace. Out.

Explore by Tag

On each tag page, you can find a link to that tag's RSS feed so you only get the content you want.