Best Way To Create Blog

A long while ago I was a blogger, I was writing summaries about philosophy books, ideas.

In these old days, I was writing them in Markdown format. Then i was serving them to Github Static Pages.

I was so passionate that, when I updated my blog, I was checking all the links, fixing broken ones, ...

I am grateful that I come to today in one piece!

Thankfully, in these days, creating a blog is a breeze!

I am using Sanity CMS for content creation.
It has a query language called "groq" and trust me, It exists for a reason.

groq`*[_type == "post" && _createdAt < now()] 

this is the query section

| order(_createdAtdesc) 

this is the ordering

{...,"authorName": author->name, "authorImage": author->image.asset->url,"mainCategory":categories[0]->title}`

and this is the projection part.

just like SQL with more intuitive syntax!

when you have a relation in your data (think it like FK) you can "follow" (or "populate") other entity.

Having blog content management separated is a great isolation.

You don't have to bring your developer identity with you when you are doing that.

Well... Almost... Because when I want to publish this post, I have to build my next.js app again. However, I am sure that there are some solutions for this. Noted for my future self.

Speaking of the builds, these blog pages are generated statically (generated on build time)

/blog
/blog/[slug]

paths are builded statically

export async function getStaticPaths() {
  const paths = await client.fetch(
    groq`*[_type == "post" && defined(slug.current)][].slug.current`,
  );
  console.log('paths', paths);

  return {
    paths: paths.map(slug => ({params: {slug}})),
    fallback: false,
  };
}

export async function getStaticProps(context) {
  // It's important to default the slug so that it doesn't return "undefined"
  const {slug = ''} = context.params;
  const post = await client.fetch(query, {slug});
  return {
    props: {
      post,
    },
  };
}

Note For Future

I will try qwik and its builder tool, builder.io

And update here their comparison results in aspects of:

- ease of use
- free plan generosity
- CMS page (it says builder does not have CMS page, which is called visual CMS)