Home > Mobile >  hugo: build static site with Google Cloud Build
hugo: build static site with Google Cloud Build

Time:11-01

I would like to automatically build a Docker container that displays the public files of a website created with the Hugo framework. Therefore I added the following Dockerfile to the root directory of the Hugo website:

FROM klakegg/hugo:0.104.3-onbuild AS hugo

FROM nginx
COPY --from=hugo /target /usr/share/nginx/html

The idea of this multi-stage build is to create the website files on the fly and display the result using a nginx container. When I create the container locally on my Ubuntu 20.04 Linux PC and then run it, everything works as expected and the website is available at localhost:8080:

docker build -t hugo-local .
docker run -d -p 8080:80 hugo-local

If I built the container with Google Cloud Build, the build process completes successfully. The files are also copied to the correct directory (/usr/share/nginx/html).

steps:
# This step builds the container image.
- name: 'gcr.io/cloud-builders/docker'
  id: Build
  args:
  - 'build'
  - '-t'
  - 'eu.gcr.io/gcp-project/hugo-cloud:$BUILD_ID'
  - '.'

# This step pushes the image to Container Registry
# The PROJECT_ID and SHORT_SHA variables are automatically
# replaced by Cloud Build.
- name: 'gcr.io/cloud-builders/docker'
  id: Push
  args:
  - 'push'
  - 'eu.gcr.io/gcp-project/hugo-cloud'

However, instead of rendering the website, the default nginx welcome page is displayed:

docker run -d -p 8080:80 hugo-cloud

enter image description here

What am I doing wrong? Any ideas? Feedback highly appreciated.

I tried various base images, various environments.

CodePudding user response:

I'm unable to reproduce your issue.

I used one of my own Hugo sites:

git clone \
--recurse-submodules \
[email protected]:me/repo.git

I can run my site:

hugo server -D

And:

podman run \
--interactive --tty --rm \
--volume=${PWD}:/src \
--publish=1313:1313 \
docker.io/klakegg/hugo:0.104.3 \
  server -D

To your question, I added Dockerfile and cloudbuild.yaml files.

Dockerfile:

FROM klakegg/hugo:0.104.3-onbuild AS hugo

FROM nginx
COPY --from=hugo /target /usr/share/nginx/html

And I built and was able to run the site:

podman build \
--tag=snippets:$(git rev-parse HEAD) \
--file=./Dockerfile \
${PWD}

podman run \
--interactive --tty --rm \
snippets:$(git rev-parse HEAD)

cloudbuild.yaml:

steps:
- name: gcr.io/cloud-builders/docker
  id: build
  args:
  - build
  - --tag=gcr.io/${PROJECT_ID}/hugo-cloud:${BUILD_ID}
  - '.'

#- name: gcr.io/cloud-builders/docker
#  id: push
#  args:
#  - push
#  - gcr.io/${PROJECT_ID}/hugo-cloud:${BUILD_ID}

images:
- gcr.io/${PROJECT_ID}/hugo-cloud:${BUILD_ID}

Both approaches to the push work (your way) docker push and the default Cloud Build way of enumerating images.

Build it:

gcloud builds submit ${PWD} \
--config=cloudbuild.yaml \
--project=${PROJECT}

Get the most recent Build ID as TAG and run the container:

TAG=$(\
  gcloud builds list \
  --limit=1 \
  --project=${PROJECT} \
  --format="value(id)")

podman run \
--interactive --tty --rm \
--publish=8080:80 \
gcr.io/${PROJECT}/hugo-cloud:${TAG}

That works too.

  • Related