jk's blog

25 Jun 2022

Hugo Setup

How I created this blog

Using Hugo and Cloudflare Pages

Follow this post: https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site

Use this theme: https://themes.gohugo.io/themes/ink-free/


Create a new repository on Github. I called mine blog-kingsmill-io.

Create a new hugo site:

hugo new site blog-kingsmill-io
cd blog-kingsmill-io
git init

Use the ink-free theme:

cd themes
git submodule add https://github.com/chollinger93/ink-free 
git submodule update --init --recursive

Push to GitHub:

git remote add origin https://github.com/aynsof/blog-kingsmill-io
git branch -M main
git push -u origin main

Create a new post:

hugo new posts/hello-world.md

Render posts related to tags by creating layouts/taxonomy/tag.html:

<ul>
  {{ range .Data.Pages }}
  <li>
    <a href="{{.RelPermalink}}">{{ .Title }}</a>
  </li>
  {{ end }}
</ul>

Create a Cloudflare Pages project:

  1. Go to Cloudflare Pages on the Cloudflare Dash
  2. Click Create a project -> Connect to Git
  3. Make sure you’ve connected your GitHub account and granted access to Cloudflare for the repository you’re using for your blog

Set the Hugo version being used by Cloudflare Pages to 0.98.0:

  1. Go to Cloudflare Pages
  2. Click on your project
  3. Go to Settings -> Environment Variables
  4. Edit variables, then add a new variable
  5. Set HUGO_VERSION to the minimum required by your theme (in this case 0.98.0)
  6. Click Save