All About My Custom Hugo Theme KMT

Why Another Hugo Theme? 🔗

because there is no theme has all my specifications available.

Why The Hugo Theme is Named Kmt? 🔗

I named my Hugo theme kmt after the name of my country.

Objectives & Goals 🔗

• speed page loading: surf the web at the speed of thought

How to install Hugo theme Kmt ? 🔗

Install via git submodule

Run this command while you are inside the folder of your Hugo site:

git submodule add  -b main --depth 1 https://github.com/abanoubha/gohugo-theme-kmt.git themes/kmt

Add the theme’s directory to your config file:

if you are using config.yaml add this.

theme: kmt

but if you use config.toml add this.

theme = kmt

That’s it. You installed it successfully.

How to update Hugo Theme Kmt in my website ? 🔗

If you installed the KMT theme into your blog/website HUGO project via GIT, just use this command.

git submodule update --remote

This command will update all the submodules in your git project. But if you need to update kmt theme only, use this command instead.

git submodule update --remote themes/kmt

Features & Functionalities 🔗

• multilingual theme
• SEO meta tags
• link to translation of current page if exists
• support image caption via p > img + em {} in CSS
• mobile-first, responsive layout
• web native lazy loading for images
• web native lazy loading for iframes
• use WebP image to speed up the page load time
• breadcrumb & easy navigation
• ‘read aloud’ or ‘read for me’ (text to speech)
• searching the website via Google

Social Media Buttons in Kmt Theme 🔗

• source code sharing sites: GitHub, GitLab and CodeBerg.
• video sharing social media: YouTube, Tiktok and Instagram.
• text-only sites: Medium and StackOverflow.
• chatting apps: Telegram and WhatsApp.
• General Social Media: X Platform (formerly Twitter) (pka Twitter), Facebook, LinkedIn and Mastodon.

Does Kmt Theme Support Google Analytics? 🔗

Yes, KMT theme supports Google Analytics and gtag. Kmt theme is a hugo theme developed mainly for my bilingual website.

You just need to add the google analytics / gtag id in hugo.toml.

[services]
  [services.googleAnalytics]
-    ID = 'G-xxxxxxxxxx'
+    ID = 'G-XHQY258XEF'

Make sure you use your own gtag which is like this G-XHQY258XEF.

Is Kmt Hugo Theme Support Adsense ? 🔗

Yes, Kmt theme supports AdSense to display ads on your website. You just need to change the parameter of adsense in your project hugo.toml like this.

[params]
  founded = 2023
- adsense = 'ca-pub-xxxxxxxxxxxxxxxx'
+ adsense = 'ca-pub-yyyyyyyyyyyyyyyy'

Make sure you changed the AdSense ID to the correct one.

SEO optimization in Kmt Theme 🔗

• Minimal: Kmt theme is developed with minimalism in mind. The less code enough to get the job done.
• Very Small: All files are optimized to be small.. very small. I used CSS instead of Tailwind for efficiency and optimization.
• Lazyloading of Image: Kmt theme has a custom Hugo renderer for images to add loading="lazy".

Why I Migrated KMT Hugo theme from Tailwind CSS to Vanilla/Pure CSS ? 🔗

Tailwind CSS is too bloated for my simple Hugo theme. One of the values of kmt theme is to be super lightweight and SEO optimized. So, smaller files is crucial. I published a dedicated blog post about this choice, read it here .

Read more about kmt theme 🔗

• How to support multiligual links to tags and categories in Hugo ?

I hope this post helps you. If you know a person who can benefit from this information, send them a link of this post. If you want to get notified about new posts, follow me on YouTube , Twitter (x) , LinkedIn , and GitHub .