✏️ Create New Post#

hugo new content [path]

Example hugo new content content/posts/new-post/index.md

All images can then be put in the same folder as the post and be referenced with [Image Alt Text](image.jpeg)

🖼️ Image Handling#

Use Hugo Images Mods. I had wasted a long time trying to figure how to use Image Render Hook to compress and resize images automatically..

📨 Automatic Deployment to Self-Host VPS with Github Actions#

Generate Private Key for Deployments#

ssh-keygen

Choose default on all prompts. This will generate a public and private key (id*.pub and id*)

Add the public key for your server access in .ssh/authorized_keys, this will allow Github Actions to SSH to your server to dump the build files

Set Repository Secrets#

In Github Repo, Settings > Secret & Variables > Actions

• SSH_HOST : Your Server IP / Hostname
• SSH_PATH : Path to the public folder (where the build files will be dumped to)
• SSH_PRIVATE_KEY : id* from earlier
• SSH_USER : Username used to SSH

Add Github Actions Workflow#

Add .github/workflows/deploy.yml

name: Deploy Hugo site

on:
  push:
    branches: ["main"]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

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

      - name: Build
        run: hugo --minify

      - name: Deploy via rsync
        uses: burnett01/rsync-deployments@v8
        with:
          switches: -avz --delete
          path: public/
          remote_path: ${{ secrets.SSH_PATH }}
          remote_host: ${{ secrets.SSH_HOST }}
          remote_user: ${{ secrets.SSH_USER }}
          remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

Now whenever posts are made, committed, and pushed to github. Github Actions will run hugo and send the build files to your server 👍

💬 Adding Disqus Comment Box#

1. Register Disqus
2. Go to Site Admin > Setttings
3. Take note of your shortname

Add Disqus Shortname to Hugo Config#

Add this config to hugo.toml

[services]
  [services.disqus]
    shortname = '<your shortname here>'

Add Disqus template to Post Default Layout#

Modify single post layout themes/<your_theme>/layouts/_default/single.html

Add this snippet before </article> (or somewhere around there)

  {{ if not .Params.hideComments }}
  {{ template "_internal/disqus.html" . }}
  {{ end }}

Now if you want to disable the comment box in certain post(s) / page(s). Use hideComments = false frontmatter.