2 posts tagged with "github"

You have to connect to github before creating the page. You cannot connect on existing page.

Why connect to GitHub?​

When using cloudflare pages, you can publish your build manually using the wrangler cli. This works when you rarely update the site. However, if you just want to write stuff, push to github and let it deploy automatically like github pages and netlify, you need to connect to github.

The main annoyance is that you cannot connect to github after creating the page. However, when you run the cli to create the initial code e.g. npm create cloudflare@latest my-next-app -- --framework=next it will create the page automatically. So you have to first create a github repo, and connect to it in the pages dashboard to create the pages, then add the actual code.

Steps​

• Create a github repo, just create a empty one on github.com like myapp
• When creating the page repo set --deploy false. For example, run the following in ~/dev

npm create cloudflare@latest myapp -- --framework=next --deploy false

• In ~/dev/myapp run the following to preview the website

npm run dev

• Push to github, the c3 cli already did git commit, the branch is already main so you don't need to rename it using git branch -M main

git remote add origin [email protected]:yourname/myapp.git
git push -u origin main

• Create Application from Workers & Pages sidebar
  • Select Pages tab, default is Workers
  • Connect to Git
  • Select the repo
  • Select the framework you used when creating the app, e.g. next

Then cloudflare will do the first deploy and subsequent deploys when you push to github's main branch.

Why I decided to setup a blog using Docusaurus and deploy to Cloudflare Pages instead of using gatsby, netlify, or github pages.

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

I have used several hosted blog services such as Medium, WordPress, Ghost. 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

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 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, I found there are several things I need to implement by myself such as tag. 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 and VuePress. I have used VuePress for awesome-time-series-database, but the VuePress blog plugin's last update time is 9 months ago 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 which is not supported by GitHub Pages. However, Netlify's free plan has limit on 100GB bandwidth and then $55 Per 100GB while Cloudflare Pages has no limit on bandwidth.

Cloudflare Pages does have its very special 20,000 files hard limit due to technical limit. 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. 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.