Blogging is useless, so let's setup your own blog

Blogging probably won’t give you anything but scraping bot traffic. I still find it quite fun to have my own piece of the internet I can tweak on my own, make anything with, and also share information with myself in the future, but in a public way.

I am not regular enough with it to also reap benefits from the practice of writing and formatting ideas in a comprehensible way, but it is also another benefit I read about this activity.

Just from these, I can only encourage anyone, from whatever profession or background, to try to have a voice online.

And to encourage you to do so, I’ll explain the setup I have for this blog, which is:

• Maintenance free
• Has a visual interface to manage the content
• Costless (beside the domain, but could be avoided if necessary)

From 0 to publication in 20 minutes

#

The blog setup will involve the followings:

• A static website generator (I chose Hugo)
• A headless CMS (I went with Netlify CMS)
• A static website hosting

Setting Up Hugo

#

Hugo is a fast static site generator that turns Markdown files into a complete website. Here’s how to get started:

First, install Hugo on your machine. On macOS, use Homebrew:

brew install hugo

For other operating systems, check the Hugo installation guide.

Once installed, create your new site:

hugo new site my-blog
cd my-blog

Now you need a theme. Hugo has hundreds of themes available. For this tutorial, let’s use the popular PaperMod theme:

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Then configure your site by editing the config.toml file:

baseURL = 'https://yourdomain.com/'
languageCode = 'en-us'
title = 'My Blog'
theme = 'PaperMod'

Create your first post:

hugo new posts/my-first-post.md

To see your site locally, run:

hugo server -D

Visit http://localhost:1313 and you should see your blog running! The -D flag includes draft posts in the preview.

Hosting on GitHub

#

Before we can deploy our site, we need to push it to GitHub:

Create a new repository on GitHub (let’s call it my-blog). Then, in your local project:

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/my-blog.git
git push -u origin main

Make sure to add a .gitignore file to exclude the public folder and other unnecessary files:

/public/
/resources/_gen/
.DS_Store

Deploying with Cloudflare Pages

#

Now comes the fun part - deploying your site for free with Cloudflare Pages. I personally use Netlify for my hosting, but I would recommend Cloudflare Pages now as it offers excellent performance and generous free tier limits.

Go to Cloudflare Pages and sign in or create an account. Click “Create a project” and connect your GitHub account when prompted.

Select your my-blog repository and configure the build settings:

• Build command: hugo
• Build output directory: public
• Environment variables: Add HUGO_VERSION with the value matching your local version (check with hugo version)

Click “Save and Deploy” and Cloudflare will build and deploy your site. In a couple of minutes, your blog will be live at a *.pages.dev URL.

This is also the step where you can set up a custom domain if you have one. In the Cloudflare Pages dashboard, go to your project’s “Custom domains” section and follow the instructions. If you want to keep things completely free, the provided subdomain works perfectly fine.

Adding a Headless CMS with Netlify CMS

#

Writing in Markdown is great, but sometimes you want a visual interface to manage your content. This is where a headless CMS comes in. Despite the name, you can use Netlify CMS with any static site host, including Cloudflare Pages.

Create a new folder in your Hugo project:

mkdir -p static/admin

Inside this folder, create two files. First, config.yml:

backend:
  name: git-gateway
  branch: main

media_folder: "static/images"
public_folder: "/images"

collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts"
    create: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Date", name: "date", widget: "datetime" }
      - { label: "Draft", name: "draft", widget: "boolean", default: true }
      - { label: "Tags", name: "tags", widget: "list" }
      - { label: "Description", name: "description", widget: "text" }
      - { label: "Body", name: "body", widget: "markdown" }

Then create index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>

<body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>

</html>

To enable authentication, you’ll need to enable Netlify Identity. Even if you’re hosting on Cloudflare Pages, you can still use Netlify’s free Identity service:

1. Create a free account on Netlify
2. Create a new site (you can link it to your GitHub repo or just create an empty site)
3. Go to Site settings > Identity and click “Enable Identity”
4. Under “Registration preferences,” select “Invite only” for better security
5. Under “Services > Git Gateway,” enable it

Push these changes to GitHub, and Cloudflare will automatically redeploy your site. You can now access your CMS at yourdomain.com/admin and manage your content with a nice visual interface!

Bonus

#

It can be endless to improve our little blog, optimize it, etc… but if there was one optimization that I didn’t do at the beginning, but would advise anyone to do so, is being aware of the possible media content optimization, especially images compression.

Since for my Hugo blog, most of the images can be found in the /content folder, I did a script that goes through all of its subfolder, and convert every .jpg or .png files to a .webp file, also limiting the size of the file. This saved me 90% on network bandwidth.

The script can be found publicly in the following gist.