News

Automated Deployment of Hugo Websites on Firebase Internet hosting and Drafts on Cloud Run

automated-deployment-of-hugo-websites-on-firebase-internet-hosting-and-drafts-on-cloud-run

Posted by James Ward, Developer Advocate

Just lately I accomplished the migration of my weblog from WordPress to Hugo and I needed to benefit from it now being a static web site by internet hosting it on a Content material Supply Community (CDN). With Hugo the supply content material is apparent recordsdata as an alternative of rows in a database. Within the case of my weblog these recordsdata are in git on GitHub. However when the supply recordsdata change, the location must be regenerated and redeployed to the CDN. Additionally, typically it’s good to have drafts obtainable for overview. I setup a steady supply pipeline which deploys adjustments to my prod web site on Firebase Internet hosting and drafts on Cloud Run, utilizing Cloud Construct. Learn on for directions for how one can set all this up.

Step 1a) Setup A New Hugo Mission

When you don’t have an current Hugo mission you’ll be able to create a GitHub copy (i.e. fork) of my Hugo starter repo:

Step 1b) Setup Current Hugo Mission

You probably have an current Hugo mission you will want so as to add some recordsdata to it:

.firebaserc

“tasks”:
“manufacturing”: “hello-hugo”

cloudbuild-draft.yaml

steps:
– identify: ‘gcr.io/cloud-builders/git’
entrypoint: ‘/bin/sh’
args:
– ‘-c’
– |
# Get the theme git submodule
THEME_URL=$(git config -f .gitmodules –get-regexp ‘^submodule..*.url$’ | awk ”)
THEME_DIR=$(git config -f .gitmodules –get-regexp ‘^submodule..*.path$’ | awk ”)
rm -rf themes
git clone $$THEME_URL $$THEME_DIR

– identify: ‘gcr.io/cloud-builders/docker’
entrypoint: ‘/bin/sh’
args:
– ‘-c’
– |
docker construct -t gcr.io/$PROJECT_ID/$REPO_NAME-$BRANCH_NAME:$COMMIT_SHA -f – . << EOF
FROM klakegg/hugo:newest
WORKDIR /workspace
COPY . /workspace
ENTRYPOINT hugo -D -p $$PORT –bind $$HUGO_BIND –renderToDisk –disableLiveReload –watch=false serve
EOF
docker push gcr.io/$PROJECT_ID/$REPO_NAME-$BRANCH_NAME:$COMMIT_SHA

– identify: 'gcr.io/cloud-builders/gcloud'
args:
– run
– deploy
– –image=gcr.io/$PROJECT_ID/$REPO_NAME-$BRANCH_NAME:$COMMIT_SHA
– –platform=managed
– –project=$PROJECT_ID
– –region=us-central1
– –memory=512Mi
– –allow-unauthenticated
– $REPO_NAME-$BRANCH_NAME

cloudbuild.yaml

steps:
– identify: ‘gcr.io/cloud-builders/git’
entrypoint: ‘/bin/sh’
args:
– ‘-c’
– |
# Get the theme git submodule
THEME_URL=$(git config -f .gitmodules –get-regexp ‘^submodule..*.url$’ | awk ”)
THEME_DIR=$(git config -f .gitmodules –get-regexp ‘^submodule..*.path$’ | awk ”)
rm -rf themes
git clone $$THEME_URL $$THEME_DIR

– identify: ‘gcr.io/cloud-builders/curl’
entrypoint: ‘/bin/sh’
args:
– ‘-c’
– |
curl -sL https://github.com/gohugoio/hugo/releases/obtain/v0.69.2/hugo_0.69.2_Linux-64bit.tar.gz | tar -zxv
./hugo

– identify: ‘gcr.io/cloud-builders/wget’
entrypoint: ‘/bin/sh’
args:
– ‘-c’
– |
# Get firebase CLI
wget -O firebase https://firebase.instruments/bin/linux/newest
chmod +x firebase
# Deploy web site
./firebase deploy –project=$PROJECT_ID –only=internet hosting

firebase.json

Step 2) Setup Cloud Construct Triggers

Within the Google Cloud Construct console, hook up with your newly forked repo:

Choose the newly forked repo:

Create the default push set off:


Edit the brand new set off:

Set the set off to solely hearth on adjustments to the ^grasp$ department:

Create a brand new set off:

Give it a reputation like drafts-trigger, specify the department selector as .* (i.e. any department), and the construct configuration file kind to “Cloud Construct configuration file” with a worth of cloudbuild-draft.yaml

Setup permissions for the Cloud Construct course of to handle Cloud Run and Firebase Internet hosting by visiting the IAM administration web page, find the member with the identify ending with @cloudbuild.gserviceaccount.com, and choose the “pencil” / edit button:

Add a job for “Cloud Run Admin” and one other for “Firebase Internet hosting Admin”:

Your default “prod” set off is not learn to check but, however you’ll be able to take a look at the drafts on Cloud Run by going again to the Cloud Construct Triggers web page, and clicking the “Run Set off” button on the “drafts-trigger” line. Test the construct logs by discovering the construct within the Cloud Construct Historical past. As soon as the construct completes go to the Cloud Run console to seek out your newly created service which hosts the drafts model of your new weblog. Notice that the service identify contains the department so that you could see drafts from totally different branches.

Step three) Setup Firebase Internet hosting

To setup your manufacturing / CDN’d web site, login to the firebase console and choose your mission:

Now you will want your mission id, which might be discovered within the URL on the Firebase Mission Overview web page. The URL for my mission is:

console.firebase.google.com/mission/jw-demo/overview

Which suggests my mission id is: jw-demo

Now copy your mission id go into your GitHub fork, choose the .firebaserc file and click on the “pencil” / edit button:

Exchange the hello-hugo string together with your mission id and commit the adjustments. This commit will set off two new builds, one for the manufacturing web site and one for the drafts web site on Cloud Run. You possibly can verify the standing of these builds on the Cloud Construct Historical past web page. As soon as the default set off (the one for Firebase internet hosting) finishes, try your Hugo web site working on Firebase Internet hosting by navigating to (changing YOUR_PROJECT_ID with the mission id you used above): https://YOUR_PROJECT_ID.net.app/

Your prod and drafts websites at the moment are routinely deploying on new commits!

Step four) (Non-compulsory) Change Hugo Theme

There are various themes for Hugo and they’re straightforward to vary. Usually themes are pulled into Hugo websites utilizing git submodules. To vary the theme, edit your .gitmodules file and set the subdirectories and url. For example, right here is the content material when utilizing the mainroad theme:

[submodule “themes/mainroad”]
path = themes/mainroad
url = https://github.com/vimux/mainroad.git

Additionally, you will want to vary the theme worth in your config.toml file to match the listing identify within the themes listing. For instance:

theme = “mainroad”

Notice: On the time of scripting this, Cloud Construct doesn’t clone git submodules so the cloudbuild.yaml does the cloning as an alternative.

Step 5) (Non-compulsory) Setup Native Enhancing

To setup native modifying you’ll first must clone your fork. You are able to do this with the GitHub desktop app. Or from the command line:

git clone –recurse-submodules https://github.com/USER/REPO.git

Upon getting the recordsdata regionally, set up Hugo, and from contained in the repo’s listing, run:

hugo -D serve

This may serve the drafts within the web site. You possibly can try the location at: localhost:1313

Committing non-draft adjustments to grasp and pushing these adjustments to GitHub will kick off the construct which can deploy them in your prod web site. Committing draft to any department will kick off the construct which can deploy them on a Cloud Run web site.

Hopefully that every one helps you with internet hosting your Hugo websites! Let me know should you run into any issues.


0 Comments

admin