Intro

I've seen way too many ads on social media platforms about Shopify, Squarespace, and Wix to not be somewhat intrigued by it. The ecosystem in it is absolutely huge, and with this site in particular, I've only scratched the surface; there's still way more to explore.

In this blog, I'll provide a very high-level overview of how blogging sites work, the tools available for creating blogging sites, as well as a brief outline of how this specific blog site was built.

Here's a quick overview of the tools this site is built with (more info and the source code can be found on github):

• frontend: Next.js + MUI

  some blogs on this contain code snippets, which are parsed and syntax-highlighted with react-syntax-highlighter

• CMS: headless CMS, Strapi.

  Blogs are written in Markdown syntax. The frontend parses them into React components at build time.

• database: Azure PostgreSQL.

• hosting: frontend on Vercel + Cloudflare, backend on Azure VM

How blog sites work

CMS -- the core tool

History

Back in the day, blog sites were written in plain HTML, CSS, and JS. Hence, creating, deleting, or updating blogs require HTML, CSS, and JS knowledge. We've since moved past that. Blog sites nowadays utilize CMSs.

CMS stands for Content Management System. It allows you to create web pages without writing code.

Traditional CMSs usually have an all-in-one solution where the frontend, the backend, the database, authentication, etc. are packed into the CMS itself.

Headless CMSs differ from traditional CMSs in that headless CMSs only provide a way for creating the "content" (be it blogs, comments, likes, users, etc.) of your webpage -- exactly what the content looks like depends on the frontend of the site. In other words, it only provides a method of creating and pulling content. This decouples the "data" layer of the site from the "view" layer. If you decide to have a mobile app that pulls these blogs later on, you may customize the look of the app to be completely different from the web version if you want to.

When it comes to creating blogs with CMSs, it's all done via the GUI editor. This makes it extremely easy to add/delete/update blogs. Strapi, a headless CMS this site uses, supports Rich Text and Markdown, allowing for many types of content to be displayed.

The UI

With a traditional CMS, UI customizability is limited compared to headless CMSs. The upside of traditional CMSs is that their frontends are easier to customize since they require minimal-to-no coding knowledge.

Headless CMSs, on the other hand, do not come with UIs. They generally provide an API -- REST or GraphQL -- that your frontend can interact with and pull content from.

Strapi provides both REST and GraphQL. This site uses Strapi's REST API.

As for the look-and-feel of the blogs themselves, how they're designed really depends on your requirements. Personally, I'm very familiar with Markdown, and the types of content that I want in my blogs apart from text -- things like videos, images, and code snippets -- are supported with Markdown. So, Markdown was an absolute no-brainer for me. For this site, Markdown is parsed to HTML using react-markdown in the frontend during build time.

Each blog on this site also has Chapters. It's automatically generated by extracting headings from the markdown text. This site uses remark-parse to do that.

How to choose a CMS

Whether a certain CMS is the right choice depends on the nature of the site. I came across Strapi while browsing through a list of CMSs online. For my blog site, on top of displaying text, I also wanted it to support videos/images and code snippets in any programming language.

Hence, the decision was made -- Strapi.

It can do all of the things I wanted well, it's easy to set up, and most importantly, it's free -- an absolute requirement for a broke university student. Most traditional CMSs aren't free or do have free tiers but are very limited, which is completely understandable. Strapi, on the other hand, is a popular open-source headless CMS. They provide their own cloud hosting solution as well, but since I really like free things, I decided to go with Azure because the DB and VM are free for a whole year.

My other reasons include:

• I really really really like free things
• I wanted to brush up my Next.js skills
• I wanted to get my hands dirty with MUI, a React.js component library that follows Google's Material Design principles
• I had never had experience with Azure previously, so I wanted to explore it a little bit.

Security

If the site is to be hosted publicly, every layer of the site -- the database, the backend, the frontend, the hosting provider -- must be secure and tested thoroughly for vulnerabilities.

• Strapi, the CMS this site uses, provides strict security measures by default. SQL injection, XSS, and other attacks aren't possible with Strapi. I'll go into detail in my next blog.
• Cloudflare, Vercel, and Azure provides basic protection by default as well.
• react-markdown, a tool this site uses to translate markdown text to React components, is also strictly secure by default.
• remark-parse, a tool this site uses to parse markdown text into JSON tokens and turns heading tokens into chapters, is also strictly secure by default.
• So are Next.js and React.js.

That said, I was quite surprised when I deployed Strapi on a public domain, and I discovered that the /register-admin page -- a page containing the form for superuser creation -- was still public! The registration button doesn't work, of course, but for some reason, it's public despite running the server in production mode and following the steps in Strapi's 5 deployment docs. As an additional layer of defense, I configured the reverse-proxy to forbid that path completely.

Oh, and the fact that Strapi's documentation on deployment isn't very comprehensive really does not help.

To sum up, in most cases, people tend to divert away from the defaults. So, it's important to make sure that any customization that is done, is done properly and securely.

Conclusion

The tech ecosystem in the world of blogging is huge. Where previously, we had to create blogs by manually writing HTML, CSS, and Javascript and worry about their security, a lot of it now is automated and secure by default. As a first-timer myself, I'm not so well-versed with the tools available; nevertheless, I think we can both agree that the ecosystem is large and seems pretty fun to explore!