Easy way to blog on hosted Hugo site

Hey all. I had a Hugo site which I just deployed to CloudFlare pages. I wanted to ask this question… Each time I need to write a post, I’d go into my /contents folder , commit and push to GitHub and CF will autodeploy it. But isn’t it too much to go through all these processes just to add one post? I’m I doing this wrong?

1 Like

I follow the same process, but with GitHub Desktop to simplify things. I also just discovered today there are CMS’s that you can use with Hugo (Netlify, Forestry, Cloud Cannon, etc). Perhaps there is a better way, so I will track this post.

Yes, it sounds like you want a CMS. Forestry would be easiest to get going.

Netlify CMS is free, but it will take some work to get working since you’re not hosting on Netlify. Basically, it needs a callback API for GitHub to talk to for authentication. I wrote some code for that, for Cloudflare Pages.

1 Like

I use Gitlab. I would have liked to try that code. :grin:

You are not doing it wrong. The cool thing about static site generators is how flexible they are for deploying a site to the web. There are many ways to do it correctly!

For most of my sites, as I rarely update them, I still keep in version control, but I just build the site locally and upload to my server when I make an update. I use the following bash script:

#!/bin/bash
rsync -uavh --delete public/ example.org:example.org/

I personally only use autodeployment processes when working with multiple people or data sources; if the site needs to change without me. Otherwise I just upload to my hosting accounts. :slight_smile:

1 Like

It’s just OAuth; it probably wouldn’t take much to adapt, if you want to try it. (If you make it work for both, feel free to send a PR.)

That’s outside my simple CSS/HTML/JS DIY skills.

I use a text editor (Atom) that has git support. So I just make a new file (there are even Hugo Packages that can call hugo new for you), and when it’s ready to publish, commit and push to github.

1 Like

Is there any Android markdown editors which can also generate the front matter (date, title, draft) or has an option to show it when create a new file

Are there any editors or can Vim produce frontmatter like hugo new new.md does? All editors, I’ve to type in the front matter. Especially the date, time can’t be written easily. Those must be auto generated by the editor… so basically I’m looking for an editor which does this by an editor.

You can search for guides on setting up a specific editor. For instance, try searching for “vim front matter templates” or similar, and you’ll be on the right path. :slight_smile:

1 Like

This is the absolute best way. Trust me. Adding a CMS means that you either need to build the site each time the page is loaded (horrible for performance, how Wordpress usually works) or you have to trigger a rebuild of your static site each time you add a post in the CMS (IMO this defeats the purpose of using the CMS).

As you get better with git, the process you are describing should take 10 seconds. Make sure you test your changes using hugo server locally, and then you should just need to push once and walk away.

1 Like

For the CMS feel, I use Forestry. It’s free for up to 3 sites.
It’s fairly easy to setup.

I have a one-click deployment set up. It seems easy to me and is structured like this:

GitHub pages serves my site. In order to keep hidden files and comments in my Hugo source private, I have both a private GitHub repository for the Hugo source documents and a public one for the rendered site. I use a naming convention like “Site1” for the rendered site and “Site1w” for the working source.

After making any changes to my source code, I just click one button and it deploys. I do this by having a simple shell script associated with the Run action in my text editor (Panic Nova). (The shell script consists mostly of others’ work posted here or in the Hugo docs. The funny “\033[0m” strings are just to colorize the text so it stands out.) The deployment script looks like this:

#!/usr/bin/env bash

echo -e "\033[0;32mBuilding Site 1 site … \033[0m"

# Build the site.

echo -e "\033[0;32mRunning Hugo … \033[0m"
hugo

# commit changes in site1w

echo -e "\033[0;32mCommitting locally … \033[0m"
msg="rebuilding site on `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git add .
git commit -m "$msg"

echo -e "\033[0;32mPushing source to GitHub … \033[0m"

# push source files to GitHub

git push origin main

# copy the site from public over to the site1 folder

rsync -ar ~/websites/site1w/public/ ~/websites/site1/

# go to the deployment folder

cd ~/websites/site1/

echo -e "\033[0;32mDeploying site to GitHub … \033[0m"

# Commit changes locally

msg="rebuilding site on `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git add .
git commit -m "$msg"

# Push rendered site to GitHub

git push origin main

# Go back to the working folder

cd ~/websites/site1w/

# Report!

echo -e "\033[0;32mSite 1 site is deployed. \033[0m"

No need for two repositories. You can have a private repo and the GitHub pages will still be public. I have this setup for a number of customer sites.

A GitHub action workflow like below can deploy the site on each new push to the main branch.

.github/workflows/deploy.yaml

name: Deploy Pages on Push

on:
  push:
    branches:
      - main

concurrency:
  group: group: ${{ github.workflow }}
  cancel-in-progress: true

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          submodules: true # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.96.0"
          extended: true

      - name: Build
        run: hugo

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ github.token }}
          publish_dir: ./public
2 Likes

Many customers use Forestry.io to edit the content on the site. Link it up to GitHub and it will push all changes to GitHub and then the above script will auto deploy the site.