> Canonical URL: https://codingcat.dev/post/hugo-ionic-template # Hugo Ionic Template ✏️ Blog PostMay 19, 2022[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase) # Hugo Ionic Template ![](https://cdn.sanity.io/images/hfh83o0w/production/980bd32c6a71afd0d03b1f86797206d7236805fe-1280x720.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)✏️ Visual Architecture Diagram ## how this post connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Hugo Ionic Template✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Hugo Ionic Template: start with Hugo Ionic Template, implement Hands-On Implementation, and ship to production.AAA Contrast Verified **Hugo Ionic Template ** is a technical guide on CodingCat.dev by Alex Patterson focused on Firebase, Algolia, Google Cloud. How to use AJonP's Hugo Ionic Template, while building Algolia Indexes and deploying to Firebase Hosting. Hugo Ionic Theme with Firebase Hosting: 🎓 Lesson: https://ajonp.com/lessons/4-hugo-ionic2/ Continue to create and deploy a Hugo Static Site using Ionic 4 Theme. - Add Netlify Victor/Hugo template to project. - Update branding. - Configure Firebase Hosting - Configure Algolia Indexing - Configure Google Cloud Build 🎥 YouTube: https://, in today's video we're gonna cover how net lapies victor hugo template can be added to your project include search indexing by algo Lea and add Google cloud builder to the mix pushing your project to firebase host apologize in advance if I put you to sleep like I did AJ but there's a lot to cover alright let's get rolling and go ahead and clone the branch for net Liffey that's sitting out on lesso... Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=tgXFNqInA0w) or explore the architectural notes, chapters, and official documentation links below. > Please note that while working through this tutorial I chose to make branches instead of tags to see if people would enjoy that more. However there was an update to the Victor/Hugo template to start using webpack and I don't want to confuse anyone, so please don't pull the master branch to start. - master (initial) - netlify-victor-hugo (moves everything to npm setup) - complete-lesson-4 (has everything you need to go-live) - prod (shows the example trigger, as well as moving over to git submodule) ## Official Documentation [Google Cloud Build - Deploying Artifacts](https://cloud.google.com/cloud-build/docs/configuring-builds/build-test-deploy-artifacts#deploying_artifacts) ## Lesson Steps - Clone Lesson 4 - Add Netlify Victor/Hugo template to project. - Update branding. - Configure Firebase Hosting - Configure Algolia Indexing - Configure Google Cloud Build # Add Netlify Victor/Hugo template to project ## Get the initial setup You can follow along step-by-step at the [Initial Setup Lesson](/post/ajonp-hugo-ionic-template), and [YouTube Video](https://www.youtube.com/watch?v=CZmEZ62yMFA). Or you can start by cloning [Hugo Ionic](https://github.com/AJONPLLC/lesson-4-hugo-ionic.git) from GitHub, we are using a specific branch to start this lesson as the master was for the original lesson. Copied! 🐾 ``` git clone --single-branch -b netlify-victor-hugo https://github.com/AJONPLLC/lesson-4-hugo-ionic.git ``` ## Structure - site // Everything in here will be built with hugo content // Pages and collections - ask if you need extra pages - data // YAML data files with any data for use in examples - layouts // This is where all templates gopartials // This is where includes live - index.html // The index page - static // Files in here ends up in the public folder - src // Files that will pass through the asset pipelinecss // Webpack will bundle imported css seperately - index.js // index.js is the webpack entry for your css & js assets ## Running Hugo You can still run this project as a normal hugo site at this point, by running the command while in the site folder. > Make sure to return to your root folder `cd ..` ## Running Victor/Hugo There are a few additional requirements at this point that we need to install. Install the files via npm npm comes with [NodeJs](https://nodejs.org/en/download/) Copied! 🐾 ``` npm install ``` Start a browsersync server Copied! 🐾 ``` npm start ``` You should see something like: Copied! 🐾 ``` [13:29:18] Starting 'server'... [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.86.23:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 -------------------------------------- [Browsersync] Serving files from: ./dist [13:29:34] Starting 'hugo'... [ '-d', '../dist', '-s', 'site', '-v' ] ``` ## Update to use Victor/Hugo asset pipeline Why this becomes powerful is that you can start installing all of your favorite npm modules and importing them like you would with most non-static projects. Copy the `baseof.html` file from our theme to our base directory so that we can override the themes file. Copied! 🐾 ``` mkdir site/layouts && mkdir site/layouts/_default && cp site/themes/ajonp-hugo-ionic/layouts/_default/baseof.html site/layouts/_default/baseof.html ``` > Remember to edit baseof.html in your files not the themes (or they won't be saved.) Now we are going to edit the baseof.html and remove these two lines (just before ``) Copied! 🐾 ``` - ``` These were originally coming from our site folder, both in theme and direct, we are going to update this file to allow for victor/hugo to handle this requirement. So we will replace that line in the html withAlso while we are in /site/layouts_default/baseof.html add a reference right above ``.You should now see the theme change back to the stock Ionic Blue color, as we have not moved our styles to the source location. However there will be a new addition to the console in debugger.Move our `custom.css` file to the source folder.Copied! 🐾 ``` mv site/static/css/custom.css src/css/imports/custom.css ``` Now we need to import this file into our src/css/main.cssCopied! 🐾 ``` /* You can use import statements to include partials: */ @import 'imports/reset.css'; @import 'imports/custom.css'; /* Or add your statements here: */ body { font-family: sans-serif; font-size: 1em; text-align: center; } ``` ## Example of loading software to use Lets try adding something simple that we might use like lodashCopied! 🐾 ``` npm install lodash ``` Now this will be avalabel for us to use in our app.js or any other file we would like to reference the module.`src/js/app.js`Copied! 🐾 ``` console.log(Subscribe to ???? [AJonP's Youtube Channel](https://www.youtube.com/channel/UCnKZ8gEb78zXKMi1ns-IQ2g)); var _ = require('lodash'); console.log(_.VERSION); ``` In the console you will now see the current version of lodash. # Update branding I am sure that you love looking at AJ on your favicon and manifest (he likes being there ????). But you probably want to update a few things. ## icons In the `themes/ajonp-hugo-ionic/static/icons` folder you will find several images that can be used for your manifest file. I typically use [www.favicon-generator.org](https://www.favicon-generator.org/) to update these files based on an image that I create. You can now add all of these images to `site/static/icons` so they can be referenced later in manifest.json or anywhere in your site. ## manifest.json You should update this file to reflect any changes in your icons folder.Copied! 🐾 ``` { "name": "AJonP", "manifest_version": 1, "short_name": "AJonP", "start_url": "/", "scope": "/", "display": "standalone", "background_color": "#FFFFFF", "theme_color": "#3D2D4D", "gcm_sender_id": "103953800507", "icons": [{ "src": "/icons/android-icon-36x36.webp", "sizes": "36x36", "type": "image/png", "density": "0.75" }, ... ``` ## Favicons If you are using an older browser the main icon that goes in your browser will be used by `/site/static/favicon.ico`. Otherwise you should hvae larger images spelled out in the `themes/ajonp-hugo-ionic/layouts/partials/head.html`, they look similar to this...Copied! 🐾 ``` ``` Please feel free to update the entire head.html partial, or any of the layouts for that matter AJ doesn't mind too much :P. ## Configure Firebase Hosting Please make sure to checkout [Google Cloud Firebase CI/CD](https://ajonp/lessons/2-firebase-ci) for a great example. ### Quick steps Copied! 🐾 ``` firebase init ``` Select Hosting![](https://cdn.sanity.io/images/hfh83o0w/production/c2c733b847b570c2d0dedde2f59093c204ddbf04-924x258.png?w=924&q=82&fit=max&auto=format)Pick your project![](https://cdn.sanity.io/images/hfh83o0w/production/86534cbb1dd47a737e3461c6c92223542b717dd0-493x167.png?w=493&q=82&fit=max&auto=format)Set the output folder to dist, and select no for rewrite all urls.![](https://cdn.sanity.io/images/hfh83o0w/production/f655176be90a0975fe9a535497f608f05c97ebde-506x155.png?w=506&q=82&fit=max&auto=format) ## Configure Algolia Indexing First signup on [www.algolia.com/](https://www.algolia.com/?utm_source=codingcatdev). ### Algolia Signup About You! [Algolia Signup about](https://cdn.sanity.io/images/hfh83o0w/dev/303d053ad6d63cf740b8c032d31c7bf8b9844224-1216x713.webp)Your Datacenter! [Algolia Your Data Center](https://cdn.sanity.io/images/hfh83o0w/dev/7cfdddc2ebd251536267684e258a5abc7764b06f-1174x708.webp)Your Project Type - Depends on what you are making but I would choose Media for most sites.![](https://cdn.sanity.io/images/hfh83o0w/production/b99a6f3fb12f5b724de532cd18e316879ff5fc43-1105x686.jpg?w=1105&q=82&fit=max&auto=format)Pick Dashboard once you get here![](https://cdn.sanity.io/images/hfh83o0w/production/38e528ab2c1d04fa5a7aba1cd2da2931e6fc5ab2-1162x695.png?w=1162&q=82&fit=max&auto=format)You can run the tutorial or just skip for now.Now select Indicies, and Create Index! [Indicies](https://cdn.sanity.io/images/hfh83o0w/dev/728dd120fba9943910a100102e4ad98b36d5a133-1119x444.webp)Example of an Index Creation![](https://cdn.sanity.io/images/hfh83o0w/production/9b58aaf031d5e567ea098322f3c488e8e3394fb4-642x318.png?w=642&q=82&fit=max&auto=format)API Keys are where we can now get the remainder of our information that we will need.![](https://cdn.sanity.io/images/hfh83o0w/production/64744a03ce60c6a55675ce1d746296e73e2fc9f7-1028x701.png?w=1028&q=82&fit=max&auto=format) ## Add Algolia for Search > In your site/config.toml file you will see params.algolia. These are used just for the search bar to make the search happen...do not use your Admin API KEY!! Copied! 🐾 ``` # Search Only [params.algolia] appId = "C1OJ9HOH3E" apiKey = "f61b2bf395516ca150fc7b75281190ab" indexName = "example" ``` You will notice a section later when we use Cloud Depoy that will require you to addALGOLIA_APP_ID - ALGOLIA_ADMIN_KEY - ALGOLIA_INDEX_NAME - ALGOLIA_INDEX_FILE ## Configure Google Cloud Build An important part to any project is setting up a solid CI/CD pipeline (Continuous Integration/Continuous Delivery). I still believe that Google Cloud offers the best pricing for any size development team! If you are a very small shop you will run builds for free, for a very long time. ## Docker Images / Cloud Build > I found out recently from Mike McDonald, that there are a great set of Google Cloud Platform Community Images. They should work really well most of the time, but you might have to be careful on versioning. For instance Hugo is currently at .49 and I need something above .50 for my site. This is why I remain using my own Docker files. ### cloudbuild.yaml This file controls all of the steps necessary throughout our build process. You can manually execute each step locally to see that everything works as expected on your docker images. Copied! 🐾 ``` steps: # Build the hugo image - name: 'gcr.io/cloud-builders/docker' args: [ 'build', '-t', 'gcr.io/$PROJECT_ID/hugo', './dockerfiles/hugo' ] # Git the submodules, run npm install, hugo build - name: 'gcr.io/$PROJECT_ID/hugo' args: ['bash', './deploy.sh'] # Algolia index update - name: 'gcr.io/cloud-builders/npm' args: [ 'run','algolia'] env: - 'ALGOLIA_APP_ID=${_ALGOLIA_APP_ID}' - 'ALGOLIA_ADMIN_KEY=${_ALGOLIA_ADMIN_KEY}' - 'ALGOLIA_INDEX_NAME=${_ALGOLIA_INDEX_NAME}' - 'ALGOLIA_INDEX_FILE=${_ALGOLIA_INDEX_FILE}' # sw-precache - name: 'gcr.io/cloud-builders/npm' args: [ 'run','generate-service-worker'] # Build the firebase image - name: 'gcr.io/cloud-builders/docker' args: [ 'build', '-t', 'gcr.io/$PROJECT_ID/firebase', './dockerfiles/firebase' ] # Deploy to firebase - name: 'gcr.io/$PROJECT_ID/firebase' args: ['deploy', '--token', '${_FIREBASE_TOKEN}'] # Optionally you can keep the build images # images: ['gcr.io/$PROJECT_ID/hugo', 'gcr.io/$PROJECT_ID/firebase'] ``` Please checkout all of the [cloud builder images](https://cloud.google.com/cloud-build/docs/cloud-builders). ### Step 0 and 1 Docker is an available image we will use this to create our own image instance from our Dockerfile in dockerfiles/hugo/Dockerfile. The Google Cloud build image Node seems to offer a lot of the tools we will need already so we just add Hugo into this Dockerfile. Copied! 🐾 ``` FROM node LABEL author="developer@ajonp.com" # Set debconf to run non-interactively RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections # Install base dependencies RUN apt-get update && apt-get upgrade -y RUN apt-get install -y -q --no-install-recommends \ apt-transport-https \ asciidoc \ build-essential \ ca-certificates \ curl \ git \ libssl-dev \ python \ python-pygments \ rsync \ software-properties-common \ devscripts \ autoconf \ ssl-cert \ && apt-get clean # Download and install hugo ENV HUGO_VERSION 0.51 ENV HUGO_BINARY hugo_${HUGO_VERSION}_Linux-64bit.deb #ADD https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/${HUGO_BINARY} /tmp/hugo.deb RUN curl -sL -o /tmp/hugo.deb \ https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/${HUGO_BINARY} && \ dpkg -i /tmp/hugo.deb && \ rm /tmp/hugo.deb # confirm hugo RUN hugo env ``` The next step in this will execute our local file `deploy.sh` so that we can execute a few key commands. The purests out there will say that we can execute both the git command and the npm commands using the two external images. I find that it is faster to not spin up a new image since we are sitting in a node image already for npm. The git submodule also is a bit of a pain because you have to go through a complicated process (from what I have gathered) to either link github to google source repos or create tokens for one off logins. Copied! 🐾 ``` #!/bin/bash echo -e Adding Submodules... git submodule init git submodule update --recursive --remote echo -e Installing via npm... npm install echo -e Building via npm... npm run build ``` - Update any submodules (like our theme). - Install all of the victor/hugo dependencies (or all other). - Run the build command which will push all of our files to the `/dist` folder. ### Step 2 Now I know everything I said up above about npm image...sorry for any confusion. However, I thought it was better to leave these npm commands seperate from the deploy as they are not required and can be easily commented out of your builds. In the case of this evn variables, we can again leave these out of the public git repos of the world and only have them stored wihtin Google Cloud builder [variable values](https://cloud.google.com/cloud-build/docs/configuring-builds/substitute-variable-values), using the notation `${_variable}`. Copied! 🐾 ``` # Algolia index update - name: 'gcr.io/cloud-builders/npm' args: [ 'run','algolia'] env: - 'ALGOLIA_APP_ID=${_ALGOLIA_APP_ID}' - 'ALGOLIA_ADMIN_KEY=${_ALGOLIA_ADMIN_KEY}' - 'ALGOLIA_INDEX_NAME=${_ALGOLIA_INDEX_NAME}' - 'ALGOLIA_INDEX_FILE=${_ALGOLIA_INDEX_FILE}' ``` This is again using `atomic-algolia` to look at our newly created `dist/algolia.json` file and compares that to what is in the Algolia index. ### Step 3 Want a PWA still? Then we need to have a service worker. No AJ not an Animal service worker. Copied! 🐾 ``` # sw-precache - name: 'gcr.io/cloud-builders/npm' args: [ 'run','generate-service-worker'] ``` ### Step 4 and 5 > Please make sure to checkout Google Cloud Firebase CI/CD for a great example. The biggest item that you need to remember here is adding your token to the cloud builder.' Copied! 🐾 ``` # Build the firebase image - name: 'gcr.io/cloud-builders/docker' args: ['build', '-t', 'gcr.io/$PROJECT_ID/firebase', './dockerfiles/firebase'] # Deploy to firebase - name: 'gcr.io/$PROJECT_ID/firebase' args: ['deploy', '--token', '${_FIREBASE_TOKEN}'] ``` Now you should have your full [Hugo](https://gohugo.io/) site up and running on [Firebase Hosting](https://firebase.google.com/products/hosting/)! ## Resources, Links & Official Documentation - **Watch on YouTube: ** [Hugo Ionic Template Full Video](https://www.youtube.com/watch?v=tgXFNqInA0w) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - **🎥 YouTube: ** [https://link.ajonp.com/youtube](https://link.ajonp.com/youtube) - **🌎 Site: ** [https://link.ajonp.com/😺](https://link.ajonp.com/😺) - **📦 GitHub: ** [https://link.ajonp.com/github](https://link.ajonp.com/github) - **🎓Lessons: ** [https://link.ajonp.com/lessons](https://link.ajonp.com/lessons) - **🗞AJ’s Week in Web: ** [https://link.ajonp.com/week-in-web](https://link.ajonp.com/week-in-web) - **💬 Slack: ** [https://link.ajonp.com/slack](https://link.ajonp.com/slack) - **🐦 Twitter: ** [https://link.ajonp.com/twitter](https://link.ajonp.com/twitter) - **💬 Slack: ** [https://bit.ly/ajonp-slack-invite](https://bit.ly/ajonp-slack-invite) - **🐦 Twitter: ** [https://bit.ly/ajonp-twitter](https://bit.ly/ajonp-twitter) - [**Firebase Documentation:**](https://firebase.google.com/docs) Firestore, Data Connect, Authentication, App Check, and Cloud Functions - [**Algolia Search Documentation:**](https://www.algolia.com/doc/?utm_source=codingcatdev) Instant search indexing, typo tolerance, and hybrid AI retrieval - [**Google Cloud Architecture & Docs:**](https://cloud.google.com/docs) Cloud Run, Kubernetes Engine, BigQuery, and Vertex AI guides ## Related CodingCat.dev Tutorials & Podcast Episodes - [**AJonP Hugo Ionic Template**](/post/ajonp-hugo-ionic-template): How to use AJonP's Hugo Ionic Template - [**Firebase Multisite Hosting**](/post/firebase-multisite-hosting): Creation of multiple sites within Hugo (main and amp), as well as multiple sites written in Angular (admin and app). - [**Angular CLI Deploying**](/post/angular-cli-deploying): Demonstrating how to quickly deploy using Angular CLI to 6 places. Then how to setup CI/CD in Azure, AWS, and Google Cloud Platform. ## Frequently Asked Questions (FAQ) ### What are the main takeaways from Hugo Ionic Template? How to use AJonP's Hugo Ionic Template, while building Algolia Indexes and deploying to Firebase Hosting. Hugo Ionic Theme with Firebase Hosting: 🎓 Lesson: https://ajonp.com/lessons/4-hugo-ionic2/ Continue to create and deploy a Hugo Static Site using Ionic 4 Theme. - Add Netlify Victor/Hugo template to project. - Update branding. - Configure Firebase Hosting - Configure Algolia Indexing - Configure Google Cloud Build 🎥 YouTube: https://, in today's video we're gonna cover how net lapies victor hugo template can be added to your project include search indexing by algo Lea and add Google cloud builder to the mix pushing your project to firebase host apologize in advance if I put you to sleep like I did AJ but there's a lot to cover alright let's get rolling and go ahead and clone the branch for net Liffey that's sitting out on lesso... Throughout this post, Alex Patterson breaks down real-world implementation details for Firebase, Algolia, Google Cloud so developers can apply these patterns directly in production. ### How do you implement Firebase best practices in production? When adopting Firebase and Algolia in a production stack, start by validating your configuration against the [**Firebase Documentation**](https://firebase.google.com/docs) (Firestore, Data Connect, Authentication, App Check, and Cloud Functions). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full Hugo Ionic Template walkthrough and find related code resources? You can watch the complete video session for [**Hugo Ionic Template**](https://www.youtube.com/watch?v=tgXFNqInA0w) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Firebase, check out our related guide: [**AJonP Hugo Ionic Template**](/post/ajonp-hugo-ionic-template). ## ✏️ Video Summary Hugo Ionic Theme with Firebase Hosting: 🎓 Lesson: https://ajonp.com/lessons/4-hugo-ionic2/ Continue to create and deploy a Hugo Static Site using Ionic 4 Theme. - Add Netlify Victor/Hugo template to project. - Update branding. - Configure Firebase Hosting - Configure Algolia Indexing - Configure Google Cloud Build 🎥 YouTube: https:// — in today's video we're gonna cover how net lapies victor hugo template can be added to your project include search indexing by algo Lea and add Google cloud builder to the mix pushing your project to firebase host apologize in advance if I put you to sleep like I did AJ but there's a lot to cover alright let's get rolling and go ahead and clone the branch for net Liffey that's sitting out on lesso... ## recent blog posts. [All Blog Posts→](/blog)[![The Heads of AI wearing black company logo t-shirts and shaking hands in a circular web of cloud and GPU investments](https://cdn.sanity.io/images/hfh83o0w/production/d1d83d596ce5899d797cd3aaf1bd0142038f282a-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)October 26, 2026[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)[AI & MCP Agents](/topic/ai) ### [Anthropic's S-1, $518B in cloud commitments, and circular AI capex](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk) Anthropic just filed its Form S-1 for a Nasdaq IPO under ticker ANT, revealing $518B in take-or-pay cloud commitments to Google, AWS, and Microsoft. Here is how Mark Zuckerberg, Elon Musk, Jensen Huang, Sundar Pichai, Satya Nadella, Tim Cook, and Dario Amodei built a circular revenue machine, and what happens to your S&P 500 ETF if it stalls. [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](https://cdn.sanity.io/images/hfh83o0w/production/e83065d0a4e2f841ce64d3f4aea8ddbbf07e5cb9-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/php2shell-cve-2026-109618-ai-php-security-scramble)October 22, 2026[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)[AI & MCP Agents](/topic/ai) ### [PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](/post/php2shell-cve-2026-109618-ai-php-security-scramble) Two critical pre-authentication RCE flaws in PHP (CVE-2026-109618 and CVE-2026-109619), uncovered by AI models from OpenAI and Google Gemini, sparked a global patching scramble across 70% of the web. Here is how PHP2Shell works and how to patch your servers. [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)