Blogging Via Cloudflare, Git, and Markdown

A Blog

I wanted two things in a blog:

• CloudFlare Pages
• Markdown

I had configured Cloudflare Pages last year to pull from a git repo and build this site, but I hadn’t really done anything more. Pages supports a variety of static site generators and I had started developing a site in Vue (due to using Vue in another project); however, that route requires quite a bit of work (and wouldn’t have inherently supported markdown). Also, I didn’t really have a reason to go further.

A “Better” Blog

I then decided to document another project and picked this back up. That’s right, this blog is mostly my notes on things I do. It’s also to share those things as they might be useful.

Vue?

I did look into some guides for turning what I had into a markdown parsing blog, but those were all node based (which moves incredibly fast and thus the dependencies were out of date) and more complicated than I wanted.

• Snipcart offers a good tutorial, but it wasn’t quite “turnkey” enough for me and doesn’t parse markdown.
• Nuxt.js is inspired by Next.js, based around Vue, and offers a content module that would parse Markdown; however, I would still be required to design and implement the pages, templates, et al.

In the end I decided not to use Vue and switch to something more immediately ready.

Hugo

Hugo builds a blog from Markdown and offers a quick start guide that is roughly five steps.

Configure the site

This is fairly self explanatory, but the high-points are:

• Set the Hugo Configuration settings that matter to you, for me this was:
  • copyright
  • enableEmoji
  • theme
  • title
  • timeZone
• Pick a theme you like.
• Configure the build on Pages:
  • Add a BUILD_ARGUMENTS environment variable (BUILD_ARGUMENTS is set to --buildDrafts --buildExpired --buildFuture for Preview builds).
  • Add a BASE_URL environment variable set to THIS URL for Production Builds.
  • Add a HUGO_VERSION environment variable to update Hugo to 0.109.0 (this keeps my theme happy).
  • Update the build command to git submodule update && hugo ${BUILD_ARGUMENTS} --baseURL "${BASE_URL:-${CF_PAGES_URL}}". This will checkout the theme and set baseURL for both Production and Preview.
  • Change the build output directory to /public, that’s where Hugo puts the site.

A Blog!

Now I have a blog that is stored in Git and written in Markdown.

One more thing

While configuring my new blog I noticed that Clarity, the theme I had chosen, would use the blog’s Title in the copyright notice. That seems wrong, so I forked the theme, fixed it, and openned a pull request to get my changes into the theme for everybody.

The benefit of Open Source Software is that little things like this can be fixed (rather than tolerated) if you’re willing to put in a little bit of effort.