Thought Process Behind Launching This Blog

I've compiled the initial thoughts I had when launching this blog.

【Purpose】

By blogging about the technologies I've acquired, I aim to lead to an accurate and deep understanding of the technology, and as a bonus, attempt to monetize it to supplement server maintenance funds. Therefore, the priorities are as follows:

1. Acquire the latest technology.
2. Keep operational costs as low as possible. If expenses exceed revenue, continuation becomes difficult.
3. Minimize non-article efforts, such as operational hassles and posting articles.
4. The content of the articles is planned to be primarily technical, followed by hobbies.

【Considerations on the Operating Environment】

I listed operating methods for starting a blog.

<Disadvantages of Free Sites>

1. Does not lead to acquiring the latest technology.
2. Free sites automatically display ads, increasing displays that don't lead to revenue. Also, unintended ads may be shown.
3. Since it becomes a dedicated blog site, the effort is probably minimal.

<Disadvantages of Paid Sites>

1. Does not lead to acquiring the latest technology.
2. The problem is that it costs money. High chance of quitting without continuing.
3. Probably the least amount of effort.

<Independent: WordPress + Home Server + Cloudflare Tunnel>

1. Only Cloudflare Tunnel is novel.
2. Basically free, so continuation is easy.
3. WordPress itself has become highly functional, tending to complicate management like article updates, incurring some learning costs. *Within an acceptable range?

<Independent: JS Framework + GitHub + Headless CMS + Cloudflare Pages>

1. Content management via Headless CMS, a new form of CMS, plus a JS framework.
2. Basically free, so the purpose is achieved.
3. Operating via SaaS is good, but if the service ends, you're stuck. Increased switching costs and effort.

【Development Environment】

Therefore, based on the above considerations and the framework information below, as part of my studies for future large-scale app development, I decided to try building a blog site with a frontend framework + headless CMS + Cloudflare Pages.

<Regarding the Editor>

For a development code environment, it's common to install an integrated environment called an IDE and add extensions suited to the development environment. VS Code is optimal, but since the lightweight and fast Zed has implemented Astro extensions, I will use that.

<Desktop Environment for Development>

Code development requires integration with other cloud services like npm (Node Package Manager) and GitHub. (Reference: npx stands for "Node Package Execute." Unlike npm, it's a command-line tool to temporarily execute Node.js packages without installing them, running them without polluting the environment.)

A blog environment doesn't require an advanced development environment, so either Mac or Windows is fine, but to save the trouble of installing WSL, I will proceed with macOS this time.

【Dev Container】

In development by multiple members, unifying the development environment using DevContainers is major. However, honestly, introducing DevContainers in an environment that can be developed by one person, like a blog, seems more troublesome to maintain, so I put it on hold this time.

【Features of Frontend Frameworks】

Usually, a collection of convenient functions and libraries compiled according to a "design philosophy" for building a site is called a framework. Following that design philosophy when writing code makes site development efficient. While it requires understanding the philosophy and learning the code's features, after learning, consistency is born across the implementation code, making it easier to read and tending to have fewer bugs, making it an essential element for large-scale sites.

<Reference>

1. Results of migrating from Next.js to Astro
2. React has derivatives like React Native, which can be used to create native smartphone apps. When providing services over a wide area, the learning cost relatively decreases.
3. However, for cross-platform development for iOS and Android, Google's Flutter has more momentum than React Native. Since the UI is shared, the operation feel doesn't change even if the model differs, making it particularly convenient for business use. Therefore, I don't think there's a reason to force the adoption of React.

【Open Source (Free) Headless CMS】

There aren't many types of open-source headless CMS that use in-house servers. Like microCMS, many companies provide them as SaaS cloud services. However, there are significant advantages to open source, such as wanting to own the data internally or worrying about usage fees when scaling up. However, an in-house server is required.

* 20 Modern CMS

<Selection of Headless CMS>

Basically, since it's a personal blog that cannot be sustained unless it's free, it narrows down to those available open source under the MIT license like strapi, Ghost, and Directus. Among those, strapi seems useful for future expansion and building e-commerce sites, so I'll go with this one this time.

【Conclusion】

So, I decided to proceed with Astro + Strapi + Alloydb (PostgreSQL) + TailwindCSS + Cloudflare Pages + Macbook Pro + Zed editor as the technological foundation for this blog. The key here is the build flow.

1. Start strapi container on Mac, create articles.
2. In the blog creation build, copy static pages and images from strapi, and do not use strapi in production (no in-house server needed!).
3. Upload (Deploy) the complete set of production data created by the build to Cloudflare Pages. The site is entirely static data with minimal JavaScript. Display is super fast lol.

The crucial point is that production is all static data. It feels like using strapi only when writing articles.