All About My Custom Hugo Theme KMT

Β· Β· 594 words Β· 3 minute read

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)

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 πŸ”—

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 , Facebook , Telegram and GitHub .

Share: