Deploy a Hugo Website with Cloud Build and Firebase Pipeline

The goal is to be able to commit code and have it trigger the pipeline which will in turn deploy the website. Your journey will be divided into two parts. First, you will build the website locally and deploy it to Firebase manually so you can gain an understanding of the entire process. Second, you will automate the process by building a pipeline with Cloud Build.

1. Open Cloudshell and create installhugo.sh
   Input below commands in installhugo.sh file

   #!/bin/bash
   # Copyright 2020 Google Inc. All rights reserved.
   # Licensed under the Apache License, Version 2.0 (the "License");
   # you may not use this file except in compliance with the License.
   # You may obtain a copy of the License at
   # http://www.apache.org/licenses/LICENSE-2.0
   # Unless required by applicable law or agreed to in writing, software
   # distributed under the License is distributed on an "AS IS" BASIS,
   # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   # See the License for the specific language governing permissions and
   # limitations under the License.
   
   _HUGO_VERSION=0.96.0
   echo Downloading Hugo version $_HUGO_VERSION...
   wget \
   --quiet \
   -O hugo.tar.gz \
   https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz
   
   echo Extracting Hugo files into /tmp...
   mv hugo.tar.gz /tmp
   tar -C /tmp -xzf /tmp/hugo.tar.gz
   echo The Hugo binary is now at /tmp/hugo.

2. Run installhugo.sh

   sh installhugo.sh

3. Enter the following commands in the cloudshell:cd ~

   gcloud source repos create my_hugo_site
   gcloud source repos clone my_hugo_site
   cd ~
   /tmp/hugo new site my_hugo_site --force

4. Now install the Ananke theme to provide a layout for your site. Enter the following commands in the Linux instance shell:cd ~/my_hugo_site
   
   git clone \
   https://github.com/budparr/gohugo-theme-ananke.git \
   themes/ananke
   echo 'theme = "ananke"' >> config.toml

5. Remove the git files from the themes directory

   sudo rm -r themes/ananke/.git
   sudo rm themes/ananke/.gitignore

6. Open a new tab in your browser then open this link in it to go to the Firebase console then click Add project.
7. Accept the Firebase terms, then click Continue.
8. You may be asked to confirm the Firebase billing plan. The Firebase costs are included with the lab. If you are prompted, click Confirm plan.
9. You will be asked to acknowledge some of the criteria when adding Firebase to a project. Click Continue.
10. You will be asked to confirm the use of Google Analytics for this Firebase project. Since this is a lab environment, use the toggle to disable Google Analytics and click Add Firebase. It will take about one minute for Firebase to be added to the project.
11. Click Continue if prompted after Firebase is added.
12. Install Fireball CLI in the Cloud Shell:

    curl -sL https://firebase.tools | bash

13. Now you need to initialize Firebase. Enter the command below into the shell:cd ~/my_hugo_site

    firebase init

14. Select Hosting using the arrow keys and spacebar. When asked for a project option, select Use an existing project, then use the arrow keys, spacebar, and the Enter key to select the Project ID provided on the lab instruction page. For the public directory, select the default value public. For configuring as a single page application, select the default value of N. For setting up automatic builds and deploys with GitHub, select N.
    If asked to overwrite any existing files, select Y.
15. You are ready to deploy the application. Enter the commands below into the Linux instance shell to rebuild the site with Hugo and to deploy it with Firebase:

    /tmp/hugo && firebase deploy

16. After the application has been deployed, you will receive a hosting URL. Click on it and you will see the same website being served from the Firebase CDN (content delivery network). If you receive a generic “welcome” message, wait a few minutes for the CDN to be initialized and refresh the browser window. Save this hosting URL for later use.
17. Configure the git commands global parameters by entering the commands below into the Linux shell. Make sure to include the quotation marks.

    git config --global user.name "hugo"
    git config --global user.email "hugo@blogger.com"

18. Enter the commands below in the Linux shell to create a .gitignore file to exclude certain directories from the repository:

    cd ~/my_hugo_site
    echo "resources" >> .gitignore

19. Perform the initial commit to the repository by entering the commands below:git add .

    git commit -m "Add app to Cloud Source Repositories"
    
    git push -u origin master

20. Create cloudbuild.yaml

    cd ~/my_hugo_site
    vim cloudbuild.yaml

    # Copyright 2020 Google Inc. All rights reserved.
    #
    # Licensed under the Apache License, Version 2.0 (the "License");
    # you may not use this file except in compliance with the License.
    # You may obtain a copy of the License at
    #
    #     http://www.apache.org/licenses/LICENSE-2.0
    #
    # Unless required by applicable law or agreed to in writing, software
    # distributed under the License is distributed on an "AS IS" BASIS,
    # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    # See the License for the specific language governing permissions and
    # limitations under the License.
    steps:
    - name: 'gcr.io/cloud-builders/wget'
      args:
      - '--quiet'
      - '-O'
    # Unless required by applicable law or agreed to in writing, software
    # distributed under the License is distributed on an "AS IS" BASIS,
    # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    # See the License for the specific language governing permissions and
    # limitations under the License.
    steps:
    - name: 'gcr.io/cloud-builders/wget'
      args:
      - '--quiet'
      - '-O'
      - 'firebase'
      - 'https://firebase.tools/bin/linux/latest'
    - name: 'gcr.io/cloud-builders/wget'
      args:
      - '--quiet'
      - '-O'
      - 'hugo.tar.gz'
      - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz'
      waitFor: ['-']
    - name: 'ubuntu:18.04'
      args:
      - 'bash'
      - '-c'
      - |
        mv hugo.tar.gz /tmp
        tar -C /tmp -xzf /tmp/hugo.tar.gz
        mv firebase /tmp
        chmod 755 /tmp/firebase
        /tmp/hugo
        /tmp/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}"
    substitutions:
      _HUGO_VERSION: 0.96.0

21. From the command line enter the following command

    gcloud alpha builds triggers import --source=/tmp/trigger.yaml

22. Edit the file config.toml and change the title

    Blogging with Hugo and Cloud Build

23. Enter the commands below to commit the changes to the repository and trigger the Cloud Build pipeline:

    git add .
    git commit -m "I updated the site title"
    git push -u origin master

24. Check the build history to see the status of the build.

    gcloud builds list

25. Check the build logs for the current build

    gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD))

26. Grab the URL from the build performed

    gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD)) | grep "Hosting URL"