Hosting GoHugo with AWS Amplify

November 9, 2024 in AWS, AWS Amplify, GoHugo by Michael O'Leary9 minutes

Introduction

AWS Amplify boasts a significant number of features, including the ability to create and support:

Authentication through Cognito
APIs using REST and GraphQL
FaaS through the use of Lambda
Storage through S3 Bucket
Database Storage through DynamoDB
Managed CI\CD pipeline for deployment
and many more features

Prerequisites

An AWS Account (See the References section for account registration guides) A supported git provider, which includes GitHub, Bitbucket, GitLab and CodeCommit (note: CodeCommit is not available to new customers) GoHugo cli tool installed (See references section for details on how to install GoHugo for your operating systems)

Step 1 - Getting Setup Locally

Assuming you have GoHugo installed, let’s create a website called “sample-gohugo”. To do this, let’s run the command:

hugo new site sample-gohugo

❯ hugo new site sample-gohugo

Congratulations! Your new Hugo site was created in /Workspace/sample-gohugo.

Just a few more steps...

1. Change the current directory to /Workspace/sample-gohugo.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

Next, let's change that directory by running the command and initialising a repo; I've already created an empty repository, which I want to use for a samples of this nature.

Once the new site has been created, let’s add it to a git repository called sample-gohugo. I’m deploying PaperMod to a dedicated branch called papermod for testing.

❯ cd sample-gohugo
❯ echo "# sample-gohugo" >> README.md
❯ git init
❯ git add --all
❯ git commit -m "Initial Commit"
❯ git branch -M main 
❯ git remote add origin git@github.com:michael-oleary/sample-gohugo.git
❯ git push -u origin main
❯ git branch papermod
❯ git checkout papermod

Next, we need to select the theme installation method. I’ve selected the Papermod theme which has several methods of installation, these include:

Git Clone Method
Git Submodule Method
Downloading and Unzipping
Lastly, installation can be done via the Hugo module method.

Given that the submodule method is the recommended approach, I will go with this one. (For information on where I got this command please see the reference section and the PaperMod wiki)

❯ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
Cloning into '/Users/moleary/Workspace/Repos/Personal/sample-gohugo/themes/PaperMod'...
remote: Enumerating objects: 139, done.
remote: Counting objects: 100% (139/139), done.
remote: Compressing objects: 100% (101/101), done.
remote: Total 139 (delta 38), reused 118 (delta 33), pack-reused 0 (from 0)
Receiving objects: 100% (139/139), 249.10 KiB | 27.68 MiB/s, done.
Resolving deltas: 100% (38/38), done.

Next, we will configure the config.yml file with the theme we want by adding the line below

theme: PaperMod

I’ve copied the sample configuration from the PaperMod wiki and tweaked it slightly for this article but feel free to tweak it to your liking.

baseURL: "https://examplesite.com/"
title: ExampleSite
theme: PaperMod

minify:
  disableXML: true
  minifyOutput: true

  params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ExampleSite
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  author: Me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "<link / abs url>"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: Welcome to my blog

  socialIcons:
    - name: x
      url: "https://x.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link


  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: posts
      name: posts
      url: /
      weight: 10
    - identifier: categories
      name: categories
      url: /categories/
      weight: 20
    - identifier: tags
      name: tags
      url: /tags/
      weight: 30
    - identifier: example
      name: example.org
      url: https://example.org
      weight: 40

# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false

Before we test out the server locally lets add a sample post page.

❯ hugo new --kind post post/sample-post.md
Content "/Users/moleary/Workspace/Repos/Personal/sample-gohugo/content/post/sample-post.md" created

Now let’s update the sample-post.md with the following content.

---
title: "Sample Post"
date: 2024-11-10T05:11:45+11:00
draft: false
---

# This is sample post

Now we can test the server locally

❯ hugo serve
port 1313 already in use, attempting to use an available port
Watching for changes in /Users/moleary/Workspace/Repos/Personal/sample-gohugo/{assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /Users/moleary/Workspace/Repos/Personal/sample-gohugo/config.yml
Start building sites … 
hugo v0.138.0+extended+withdeploy darwin/amd64 BuildDate=2024-11-06T11:22:34Z VendorInfo=brew


                   | EN  
-------------------+-----
  Pages            | 11  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  2  
  Cleaned          |  0  

Built in 22 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1311/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

Here we can see the localhost running

Let’s navigate the webpage and hey presto we have a local hosted version available.

But what if we want our adoring fans to the see it? Well this is where amplify comes into the play. So let’s commit those changes to the code.

❯ git status
On branch papermod
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   .gitmodules
        new file:   themes/PaperMod

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .hugo_build.lock
        config.yml
        content/
        public/

❯ git add --all
❯ git commit -a -m "Updated with Initial Template for PaperMod"
[papermod e20acd6] Updated with Initial Template for PaperMod
 31 files changed, 358 insertions(+)
 create mode 100644 .gitmodules
 create mode 100644 .hugo_build.lock
 create mode 100644 config.yml
 create mode 100644 content/post/sample-post.md
 create mode 100644 public/404.html
 create mode 100644 public/assets/css/stylesheet.d6fcd20a4fb86efa4dfac8ec95da60244cc8871042183da1ef28e3a762ad79c8.css
 create mode 100644 public/categories/index.html
 create mode 100644 public/categories/index.xml
 create mode 100644 public/first/index.html
 create mode 100644 public/index.html
 create mode 100644 public/index.xml
 create mode 100644 public/page/1/index.html
 create mode 100644 public/post/index.html
 create mode 100644 public/post/index.xml
 create mode 100644 public/post/page/1/index.html
 create mode 100644 public/post/sample-post/index.html
 create mode 100644 public/post/sample_page3/index.html
 create mode 100644 public/post/sample_post/index.html
 create mode 100644 public/posts/index.html
 create mode 100644 public/posts/index.xml
 create mode 100644 public/posts/page/1/index.html
 create mode 100644 public/posts/test/index.html
 create mode 100644 public/sample_page/index.html
 create mode 100644 public/sample_page2/index.html
 create mode 100644 public/sitemap.xml
 create mode 100644 public/tags/first/index.html
 create mode 100644 public/tags/first/index.xml
 create mode 100644 public/tags/first/page/1/index.html
 create mode 100644 public/tags/index.html
 create mode 100644 public/tags/index.xml
 create mode 160000 themes/PaperMod
❯ git push --set-upstream origin papermod
Enumerating objects: 59, done.
Counting objects: 100% (59/59), done.
Delta compression using up to 16 threads
Compressing objects: 100% (38/38), done.
Writing objects: 100% (58/58), 14.26 KiB | 1.10 MiB/s, done.
Total 58 (delta 22), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (22/22), done.
remote: 
remote: Create a pull request for 'papermod' on GitHub by visiting:
remote:      https://github.com/michael-oleary/sample-gohugo/pull/new/papermod
remote: 
To github.com:michael-oleary/sample-gohugo.git
 * [new branch]      papermod -> papermod
branch 'papermod' set up to track 'origin/papermod'.

Now let’s proceed to deploying this with AWS Amplify.

Step 2 - Deploying it in AWS Amplify

Login into your AWS Console and navigate to AWS Amplify, we should be able to see some of our Amplify Applications. Here you can see where I have deploy my personal blog. Let’s select the Create net app button.

In the next screen we can see a variety of applications that can be deployed to including frameworks such as:

React
Angular
Vue
Next.js

In addition, we can see the Version Control provider that can be stored, these include:

GitHub (which we used in Step 1)
Bitbucket
CodeCommit (deprecated for new AWS customers)
and GitLab

You can also deploy without Git, but seriously why are you not using Git. (If you are someone who deploys applications to Amplify without Git, I’d love to understand the motivation or benefits of this approach so please reach out to me if you have any insights on this)

Let’s select GitHub and then the Next button.

In the next screen we need to configure our access to sample-gohugo repo. Note: I’ve connected this account to GitHub before so you might see different screens to what I’m displaying here.

Once permissions are applied we can return to the App setting for our Amplify Application.

Add the repository sample-gohugo and the papermod branch

In the screen below I need to update the Build output directory to public.

Also the version of PaperMod I’m using required the latest version of Hugo. So I need to update my build settings to the following.

If you select Edit YML file then you should be able to update the yaml file with the following. Then click save

Then select Next

version: 1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    preBuild:
      commands:
        - nvm install v22.11.0
        - nvm use v22.11.0
        - npm upgrade hugo
        - hugo version
    build:
      commands:
        - hugo
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

Conduct on final last review then hit Save and deploy

This will kick off the build process once this is complete we should be able to visit our website.

Step 4 - Check the Website

You should now have the bare bone structure for deploying a sample hugo site using AWS Amplify.

Please see the reference below for any of the details for themes, GoHugo installation, AWS account registration and the PaperMod theme wiki which was used for this blog.

References

GoHugo Installation

GoHugo Themes

GoHugo Cheatsheet

AWS Account Registration

PaperMod Wiki

IT 'n' Stuff

Title here