For around 6 to 7 years I have been contributing to various blogs and websites as a copywriter, editor and volunteer. I have used many tools working on those community projects, mastering the art of using Markdown to my advantage. Having experienced using big blogging and documentation platforms like Docusaurus in the past, I really wanted to try to implement a simple one on my personal website.

Fortunately Astro is handling most of the work for me ! Here’s how my afternoon went.

Trying to overcomplexify things (as usual)

I must admit that as a primarily backend developer, I tend to not think about what the framework I use (for frontend work) is making available to me. So you can imagine that instead of looking at the documentation like any sensible person would do, I decided to try and use separate libraries to handle markdown and frontmatter.

So I started by installing marked and front-matter to parse my markdown files and extract headers. My code looked something like this:

const content = fs.readFileSync(`src/posts/${post}.md`).toString();
const { attributes, body } = fm(content);
const htmlBody = await marked.parse(body);

const postParsed = Post.safeParse(attributes);
if (!postParsed.success) throw new Error(postParsed.error.message);

const postData = postParsed.data;
const authorsData = postData.authors.map((a) => authors[a]);

Not too bad, but then I realized that Astro’s quirks caused the rendered HTML to not integrate well with my style sheets and started to look for a proper way to inject the rendered HTML into my layout instead of using set:html.

Realizing Astro already handles markdown

After a google search that took me .1 seconds, I realized that Astro already has a built-in way to handle markdown rendering and frontmatter parsing… Oh well that’s what I get for not reading the documentation.

Magically enough, after using the proper way, I was able to get an actual Astro component that I could use to render my blog posts. The code looks like this:

export async function getStaticPaths() {
  type PostModule = {
    Content: any;
    frontmatter: Record<string, any>;
  };

  const posts = import.meta.glob<PostModule>("@posts/*.md", {
    eager: true,
  });

  return Object.entries(posts).map(([path, module]) => {
    const fileName = path.split("/").pop()?.replace(/\.md$/, "");

    return {
      params: { post: fileName },
      props: {
        name: fileName,
        Content: module.Content, // This is the Astro component
        frontmatter: module.frontmatter, // This is the frontmatter data object
      },
    };
  });
}

Now that I got this out of the way I could finally focus on making my blog post pretty (as you can see I am a master of making things look good right ?). I had to tinker a bit to make sure every Markdown element was styled properly, but I think I managed to get a good result.

What to expect from this blog

Do not expect to find a lot of technical or too serious content here, I will mostly write when I feel like it or whenever I have something to share with the world. Though you can expect a repost of patch notes and updates on my personal projects so that’s something you can look forward to.

Hopefully that taught me a lesson about the existence of documentation and properly reading it before jumping headfirst into implementing something as basic as a blog.