> Canonical URL: https://codingcat.dev/post/ajonp-hugo-ionic-template

# AJonP Hugo Ionic Template

✏️ Blog PostMay 18, 2022

# AJonP Hugo Ionic Template

![](https://cdn.sanity.io/images/hfh83o0w/production/2d05e8d1908651e9d626214672be473a7f85dcd4-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: AJonP Hugo Ionic Template✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for AJonP Hugo Ionic Template: start with AJonP Hugo Ionic Templ, implement Hands-On Implementation, and ship to production.AAA Contrast Verified

> Just a little donation reminder as Hugo says "Hugo stands on the shoulder of many great open source libraries", as does many of my tutorials. Brew Hugo

# Hugo Getting Started

Checkout the guide at [gohugo.io](https://gohugo.io/getting-started/installing/). My guides will always be on a Mac, but I will always try to provide a link for additional operating systems.

## Lesson Steps

- Install Hugo
- Create new Hugo site
- Start Using AJonP Template

### Lesson 2 (required for Algolia)

Please chekcout Lesson: [Hugo Ionic](/post/hugo-ionic-template) for the next set of features 1. Victor Hugo 1. Deploy

## Install Hugo

### Brew

If you are like me and just bought a new Mac, you probaly are taking brew for granted and think it is just there right ????! Well first you can head over to [brew.sh](https://brew.sh/) they will tell you to run

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

### Hugo

```
brew install hugo
```

# Create new Hugo site

```
hugo new site 4-hugo-ionic cd 4-hugo-ionic
```

At this point you will notice that the project remains pretty empty in a generic skeleton.

![](https://cdn.sanity.io/images/hfh83o0w/production/7698a6dbd9016ab031c65d55d52cd8ea4fd46c14-510x352.png?w=510&q=82&fit=max&auto=format)

It only has two files config.toml and archetypes/default.md

> If you run `hugo serve` right now, you will see a blank screen as there is no content to show.

## Index.html

Adding this to the base of our site will be used for setting up the [Home Page](https://gohugo.io/templates/homepage/). This is the only required page you will ever need to build a Hugo based site. Please keep in mind that this is still an html page.

`layouts/Index.html`

```
You could make an entire site here if you wanted.
```

> Again if you run `hugo serve` right now, you will see a blank screen as there is no content to show.

## _index.md

`content/_index.md`

> I know this is getting a little frustrating! Again if you run `hugo serve` right now, you will see a blank screen as there is no content to show.

## Update Index.html

This will be the **first**  page that will show anything in the browser!

layouts/index.html

Now run the command `hugo serve` and you will see a page that has

![](https://cdn.sanity.io/images/hfh83o0w/production/09d173f744abfcaef9c4891b199e2476e3abcbe6-824x242.png?w=824&q=82&fit=max&auto=format)

## Making a Point

Now I wanted to walk you through all of that to show 1. The steps really necessary to make a Hugo site 1. Prove that laying out a site from scratch is time consuming

# Start Using AJonP Template

## Theme Download Location

You can find the link on Hugo's Theme site [https://themes.gohugo.io/ajonp-hugo-ionic/](https://themes.gohugo.io/ajonp-hugo-ionic/)

## Git integraiton

### Clone (Easy, not updated)

```
git clone https://github.com/AJONPLLC/ajonp-hugo-ionic themes/ajonp-hugo-ionic
```

### Submodule (Better, updated)

```
git submodule add https://github.com/AJONPLLC/ajonp-hugo-ionic themes/ajonp-hugo-ionic
```

Adding the submodule will allow you to receive all of the updates that you want, or lock into a specific commit to run your site from. Then later you are able to run

```
git submodule update --remote --merge
```

## Theme Benefits

Now you should have a new folder in themes/ajonp-hugo-ionic. This has the full theme including an example site found in themes/ajonp-hugo-ionic/exampleSite

Features

# Ionic Theming

Taking things a step further you can change any of the colors on the site by using Ionic's [Color Generator](https://beta.ionicframework.com/docs/theming/color-generator).

Here is a Hugo inspired look.

![](https://cdn.sanity.io/images/hfh83o0w/production/c9f3ee52636b1d9714a8ab9906b8f487ca023db8-2316x1594.png?w=1600&q=82&fit=max&auto=format)

Just copy the CSS Variables it produces into static/css/custom.css

```
:root {
  --ion-color-primary: #ff387d;
  --ion-color-primary-rgb: 255, 56, 125;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #e0316e;
  --ion-color-primary-tint: #ff4c8a;
  --ion-color-secondary: #0d171f;
  --ion-color-secondary-rgb: 13, 23, 31;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0b141b;
  --ion-color-secondary-tint: #252e35;
  --ion-color-tertiary: #2cb286;
  --ion-color-tertiary-rgb: 44, 178, 134;
  --ion-color-tertiary-contrast: #000000;
  --ion-color-tertiary-contrast-rgb: 0, 0, 0;
  --ion-color-tertiary-shade: #279d76;
  --ion-color-tertiary-tint: #41ba92;
  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;
  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;
  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}
```

# Theme updates

I used the theme for [AJonP](https://codingcat.dev) so it may change (you can always stay at a commit), but please contact me or Pull request on [Github](https://github.com/AJONPLLC/ajonp-hugo-ionic/pulls).

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [AJonP Hugo Ionic Template Full Video](https://www.youtube.com/watch?v=CZmEZ62yMFA) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **Initial: ** [https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/initial](https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/initial)
- **With Theme: ** [https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/ajonp-hugo-theme](https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/ajonp-hugo-theme)
- **🎥 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)
- **[Layouts](): ** [https://gohugo.io/templates/](https://gohugo.io/templates/)
- **[Shortcodes](): ** [https://gohugo.io/content-management/shortcodes/](https://gohugo.io/content-management/shortcodes/)
- **[Sitemap](): ** [https://gohugo.io/templates/sitemap-template/#hugo-s-sitemap-xml](https://gohugo.io/templates/sitemap-template/#hugo-s-sitemap-xml)
- **[Font Awesome](): ** [https://fontawesome.com/](https://fontawesome.com/)
- **[Ionic](): ** [https://ionicframework.com/](https://ionicframework.com/)
- **[Google Ads](): ** [https://ads.google.com/home/](https://ads.google.com/home/)
- **[Google Analytics](): ** [https://marketingplatform.google.com/about/analytics/](https://marketingplatform.google.com/about/analytics/)
- **[Disqus](): ** [https://disqus.com/](https://disqus.com/)
- **[AddThis](): ** [https://www.addthis.com/](https://www.addthis.com/)
- **[OpenGraph](): ** [https://developers.facebook.com/docs/sharing/opengraph/](https://developers.facebook.com/docs/sharing/opengraph/)
- **[Twitter Cards](): ** [https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)
- **bit.ly/ajonp-patreon: ** [https://bit.ly/ajonp-patreon](https://bit.ly/ajonp-patreon)
- **bit.ly/ajonp-teespring: ** [https://bit.ly/ajonp-teespring](https://bit.ly/ajonp-teespring)
- **bit.ly/ajonp-youtube-sub: ** [https://bit.ly/ajonp-youtube-sub](https://bit.ly/ajonp-youtube-sub)
- **github.com/ajonpllc: ** [https://github.com/ajonpllc](https://github.com/ajonpllc)
- **bit.ly/aj-week-in-web: ** [https://bit.ly/aj-week-in-web](https://bit.ly/aj-week-in-web)
- [**MDN HTML Reference:**](https://developer.mozilla.org/en-US/docs/Web/HTML) Semantic markup, accessibility attributes, and document structure
- [**Algolia Search Documentation:**](https://www.algolia.com/doc/?utm_source=codingcatdev) Instant search indexing, typo tolerance, and hybrid AI retrieval
- [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS) Modern layout, Grid, Flexbox, animations, and cascade layers

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Hugo Ionic Template**](/post/hugo-ionic-template): How to use AJonP's Hugo Ionic Template, while building Algolia Indexes and deploying to Firebase Hosting
- [**Let's Learn Svelte**](/post/lets-learn-svelte): Embrace the hype. Give Svelte and SvelteKit a try! Learn how to build modern web applications with SvelteKit, a quickly growing framework for generating static ...
- [**Design Systems with Web Components**](/post/design-systems-with-web-components): How Stencil can build Web Components for any Design System. This is a developers view into how a design system will work in any size organization.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from AJonP Hugo Ionic Template?

How to use AJonP's Hugo Ionic Template. Hugo Ionic AJonP Theme: 🎓 Lesson: https://ajonp.com/lessons/4-hugo-ionic/ GitHub: Initial - https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/initial
With Theme - https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/ajonp-hugo-theme 🎥 YouTube: https://link.ajonp.com/youtube
🌎 Site: https://link.ajo, and today's lesson will cover how to build a static site based on Hugo static site generator we're going to add a on ik thing to this created by a John P in the Advanced portion of this lesson we're gonna cover net lippies template victor hugo and how we can leverage this setup that will include NPM and also allow us to do our scripting that we need to push algo Lea indexes I'm not gonna cover the... Throughout this post, Alex Patterson breaks down real-world implementation details for HTML, Algolia, CSS so developers can apply these patterns directly in production.

### How do you implement HTML best practices in production?

When adopting HTML and Algolia in a production stack, start by validating your configuration against the [**MDN HTML Reference**](https://developer.mozilla.org/en-US/docs/Web/HTML) (Semantic markup, accessibility attributes, and document structure). 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 AJonP Hugo Ionic Template walkthrough and find related code resources?

You can watch the complete video session for [**AJonP Hugo Ionic Template**](https://www.youtube.com/watch?v=CZmEZ62yMFA) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into HTML, check out our related guide: [**Hugo Ionic Template**](/post/hugo-ionic-template).

## ✏️ Video Summary

Hugo Ionic AJonP Theme: 🎓 Lesson: https://ajonp.com/lessons/4-hugo-ionic/

GitHub:
Initial - https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/initial
With Theme - https://github.com/AJONPLLC/lesson-4-hugo-ionic/releases/tag/ajonp-hugo-theme

🎥 YouTube: https://link.ajonp.com/youtube
🌎 Site: https://link.ajo — and today's lesson will cover how to build a static site based on Hugo static site generator we're going to add a on ik thing to this created by a John P in the Advanced portion of this lesson we're gonna cover net lippies template victor hugo and how we can leverage this setup that will include NPM and also allow us to do our scripting that we need to push algo Lea indexes I'm not gonna cover the...

## 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)