
Doruk
Likes to build anything. That can be LEGO or... SOFTWARE!
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)