Org + Hugo + Cloudflare for personal blog

Hugo Quick setup

Ox-Hugo

Source of documentation:

• ox-hugo manual for init.el Backlink

1(use-package ox-hugo
2	:after ox)

Handing in org.file

I use one-page-per-post way to manage the post, the heading section looks the following:

 1#+TITLE:
 2#+AUTHOR: Chloe
 3#+DATE: 2022-10-28
 4#+HUGO_SECTION: posts
 5#+HUGO_BASE_DIR:~/Blog
 6#+HUGO_TAGS:
 7#+EXPORT_HUGO_CATEGORIES:
 8#+hugo_weight: auto
 9#+HUGO_DRAFT: true
10#+hugo_auto_set_lastmod: t

I use YASnipeet to generate the head section, so the date will be autogenerated to be the current date. Be aware that in ox-hugo, HUGO_BASE_DIR is mandentory, it determines where the root directory the exported .md file lies. By setting both BASE_DIR and HUGO_SECTION, the generated .md file will be exported to ~/Blog/content/posts.

Add following snippet at the end the org file will enabling the autosave to the target location

1# Local Variables:
2# eval: (org-hugo-auto-export-mode)
3# End:

Hugo

The setup of hugo is as easy as what’s shown in the official guidance. In my case, I set the New Site name to be Blog, so that the .md file will be generated in ~/Blog/content/posts as what I expected. In this case I can skip the Step 4 in the official guidance as some .md files with hugo front matter are already in place.

The front matter generated from the snippet typically looks like the following:

+++
title = "Org + Hugo + Cloudflare for personal blog "
author = ["Chloe"]
date = 2022-10-28
lastmod = 2022-10-28T08:25:39-04:00
tags = ["config", "hugo"]
draft = true
+++

Start the server with the following code where -D means enabling draft, and ignoreCache will deisable the cache function, this will prevent some changes not showing in the website on time.

1hugo server -D --ignoreCache

Except for using theme cactus, I also included a backlink section for my blog, the configuation can be found here.

Cloudflare

I use Cloudflare to deploy my personal website, for the site is free, and allows for continuous deployment with GitHub. The guidance of deployment can be found here. Be aware with the Deployment with Cloudflare Page section, if using the free version of cloudflare, the build command need to be set as

1hugo -b $CF_PAGES_URL

For the CSS to be built successfully in the final production. The above code will modify the baseURL to be found in the config.toml file (by default the section looks like baseURL = 'http://example.org/'), which is why when using hugo server to preview the website everything seems to work just fine. An easy way to investigate the effect of the production version of the personal website, cd /public and run

1python -m http.server 8000

in the command line, open localhost:8000 in the browser.