Why blog using Docusaurus and Cloudflare Pages
Tags: gatsby, blog, react, vue
Published: 2024-01-12 09:06:53


Why I decided to setup a blog using Docusaurus and deploy to Cloudflare Pages instead of using gatsby, netlify, or
github pages. NOTE: You can also find this post on the blog https://at15.dev/blog/2023/12/why-blog-using-docusaurus-and-cloudflare-pages 

## Why use static site generator for blog when you have Medium, Wordpress?

I have used several hosted blog services such as [Medium](https://medium.com/@at15),
WordPress, [Ghost](https://ghost.org/). These managed platforms do not require any setup
and provide better exposure thanks to existing audiences on the platform.
The main reason I choose to use static site generator is they allow me to write blog as code
in plain markdown, version control the content using git and add style/interactive components (in React) when needed.
The managed platforms offer many things out of box but their customization and API is
limited e.g. [Medium API is no longer supported](https://github.com/Medium/medium-api-docs)

## Why Docusaurus instead of Gatbsy, Hugo, Jekyll, etc?

GitHub pages offers Jekyll and I am not a fan of Ruby (working at AWS on region build made the feeling even worse).
Building Jekyll pages locally is much painful compared with Go or NodeJS based static site generator because I
don't setup Ruby toolchain on my own devices.

[Hugo](https://gohugo.io/) is in Go but the template syntax and the extensibility is not as good as these React based
ones such as Gatsby and Docusaurus.

Gatsby is the one I planned to start with because it offers a GraphQL API, making building extension and interact with
other languages a breeze. However, after looking at
its [blog template](https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/), I found there are several things
I need to implement by myself such as [tag](https://www.gatsbyjs.com/docs/adding-tags-and-categories-to-blog-posts/).
I am lazy and want most things out of box with a reasonable default that I customize later.

Then I looked into documentation type of static site generator such as [Docusaurus](https://docusaurus.io/)
and [VuePress](https://vuepress.vuejs.org/). I have used VuePress
for [awesome-time-series-database](https://github.com/xephonhq/awesome-time-series-database), but the VuePress blog
plugin's last update time is [9 months ago](https://github.com/vuepress/vuepress-plugin-blog) so I tried Docusaurus.
The default docusaurus template support both doc and blog with tags, the blog looks better than gatsby's blog template.
So I decided to use Docuasurus.

## Why Cloudflare Pages instead of Netlify, GitHub Pages?

GitHub Pages is the most straightforward to setup when source code of blog is hosted on GitHub and I used to use it
before I switched to Netlify for [PR preview](https://docs.netlify.com/site-deploys/deploy-previews/) which
is [not supported by GitHub Pages](https://github.com/orgs/community/discussions/7730). However, Netlify's free plan has
limit on [100GB bandwidth](https://www.netlify.com/pricing/) and
then [$55 Per 100GB](https://www.netlify.com/pricing/#core-pricing-table)
while [Cloudflare Pages has no limit on bandwidth](https://community.cloudflare.com/t/cloudflare-bandwidth-limit/447321).

Cloudflare Pages does have its very
special [20,000 files](https://developers.cloudflare.com/pages/platform/limits/#files) hard limit due
to [technical limit](https://community.cloudflare.com/t/cloudflare-pages-what-plan-do-we-need-to-exceed-the-20k-asset-limit/408982/2).
But as long as I don't copy `node_modules` into the `build` directory, it might take years for me to hit that limit with
notes and blogs (116 files right now). btw: You can count the files (including subdirectories)
using `find . -type f | wc -l`
per [stackoverflow](https://unix.stackexchange.com/questions/4105/how-do-i-count-all-the-files-recursively-through-directories).
If I did hit the limit, I could host (part of) the website on other places (e.g. nginx, object store like R2/S3)
and use (Cloudflare) CDN to serve the content.

In next post I will talk about the actual steps of creating the blog using Docusaurus and configure Cloudflare Pages
with github integration and custom domain.