Clean visual style close to Markdown typography, aimed at personal blogs
HugoStarter
kayal — Hugo Starter Template
By mnjm
Kayal is a Hugo theme for personal blogs with a style close to Markdown typography, offering light and dark color schemes, client-side search, and writing extensions such as KaTeX and Mermaid.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-03View source
What stands out
A quick read of the recorded project description.
Light and dark color schemes can follow browser preferences automatically and also support manual switching
Built-in KaTeX formula and Mermaid diagram support
Client-side search powered by Fuse.js, with no server-side search endpoint required
Provides shortcodes such as Callouts and third-party Markdown/code imports
Reserved extension points for a custom homepage, comments, custom CSS, and header
Template Details
Kayal is a Hugo theme published on Hugo Themes, positioned for personal blog sites, with a design that pursues simplicity and lightness and a visual style close to the typographic feel of Markdown. The repository uses the MIT license, and the demo site source is placed in the exampleSite branch for reference to actual usage.
The theme provides light and dark color schemes, can automatically switch following browser preferences, and also supports manual switching; the homepage uses a profile-style layout. Configuration options are centralized in the theme's own configuration files, mostly commented out by default; uncomment to enable or adjust.
For writing and reading, it includes Callouts, shortcodes for importing Markdown and code from third-party sites, KaTeX formulas, Mermaid diagrams, table of contents, code copy, heading anchors, article covers, and responsive image processing, and supports linking to third-party site content within articles. Search is client-side based on Fuse.js, and there is also RSS output, breadcrumbs, and Google Analytics integration.
The theme reserves placeholder positions for a custom homepage, other statistics, comments, custom CSS, and a custom header; assets are self-hosted by the site and do not rely on a CDN. Icons use FontAwesome 6 SVGs. Installation supports git submodule, Hugo Module, and manual methods; the quick path given in the README is to add the submodule, copy the configuration files under the theme's config/_default to the project root's config/_default, then delete hugo.toml and build.
Note: the feature list in the README is the author's own description and has not been verified item by item in this material; the licenses of third-party assets such as demo images, fonts, and icons need to be checked separately and cannot be judged solely by the code's MIT license.
HugoLauncher
Is it right for your project?
Use Cases
- Building a text-focused personal blog
- Writing articles that include mathematical formulas or flowcharts
- Blogs that want site assets self-hosted and not dependent on a CDN
- Static sites that need client-side full-text search without introducing a backend service
Suitable For
- Developers using Hugo to build personal blogs
- Writers who prefer Markdown-style clean typography
- Static sites that need formulas, diagrams, and client-side search
- Users who want to freely modify and distribute the theme under the MIT license
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Can be installed via git submodule, Hugo Module, or manually; the README provides quick submodule steps
- 2
After installation, copy the configuration files under themes/kayal/config/_default to the project root's config/_default and adjust them
- 3
Most options in the theme configuration files are commented out by default; uncomment to enable
- 4
If hugo.toml exists in the project root, per the README it must be deleted before building
- 5
The licenses of third-party assets such as demo images, fonts, and icons need to be checked separately
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- Allows free use, modification, commercial use, and distribution of that version's code.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Client-side search depends on the third-party library Fuse.js, which is released under a separate license; check its license terms before use.
- Enabling Google Analytics requires registering a Google account and obtaining a tracking ID; it is an external service and may involve data compliance and privacy policy requirements.
- Shortcodes that import Markdown and code from third-party sites access external sites; actual use is subject to the target site's terms and availability.
- Icons come from FontAwesome 6, whose license is independent of the theme's MIT license; confirm separately before commercial use or redistribution.
- The demo site source is in the exampleSite branch; the licenses of demo assets such as images therein need to be checked separately and are not granted together with the theme code license.
- Demo images, fonts, icons, and other third-party assets need to be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Client-side search powered by [Fuse.js](https://www.fusejs.io/)
Original README
Google Analytics
Original README
Shortcodes: Includes Callouts, Markdown and Code import from 3rd Party sites.
Original README
SVG Icons from FontAwesome 6
Original README
https://github.com/mnjm/kayal/blob/main/LICENSEhttps://github.com/mnjm/kayal/blob/main/README.mdSource for the Demo site is available in [exampleSite](https://github.com/mnjm/kayal/tree/exampleSite) branch.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- Hugo Themes
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- Hugo
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-02
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: bba44e41a5299a315edaea8d6bac119765578ae83050bde787e8b8a85a4b7a72
2026-10-03T19:23:06.343Z
Source file / repository# Kayal
Kayal is a Hugo theme designed to be minimal and lightweight, with markdown-ish aesthetics for personal blog sites.
<p styles="font-size: 2em; font-weight:bold;" align="center">🌐<a href="https://mnjm.github.io/kayal/">Demo site</a></p>
<p align="center">
<img src="https://github.com/mnjm/kayal/actions/workflows/main.yaml/badge.svg" alt="Demo Site GH Pages">
<img src="https://img.shields.io/github/license/mnjm/kayal" alt="GitHub License">
<img src="https://img.shields.io/github/languages/code-size/mnjm/kayal" alt="GitHub code size in bytes">
<a href="https://themes.gohugo.io/themes/kayal/"><img src="https://img.shields.io/badge/Hugo--Themes-@Kayal-blue" alt="Kayal"></a>
</p>
| Desktop | Mobile |
| ---- | ---- |
|||
Source for the Demo site is available in [exampleSite](https://github.com/mnjm/kayal/tree/exampleSite) branch.
## Features
- Clean and Responsive Design
- Light and Dark Color Modes: Automatically adjusts based on browser preferences and/or manual toggle.
- Profile Homepage
- Customizable Configuration: Easily adjust settings to personalize
- Shortcodes: Includes Callouts, Markdown and Code import from 3rd Party sites.
- KaTeX Support
- Mermaid Diagrams Support
- Client-side search powered by [Fuse.js](https://www.fusejs.io/)
- Cross-linking: Ability to link posts on third party sites.
- RSS Feed
- Table of Contents
- Code Copy
- Heading Anchors
- Google Analytics
- SVG Icons from FontAwesome 6
- SEO Friendly.
- Breadcrumbs
- Article Cover image
- Responsive Image optimization
- Extensibility: Includes placeholders for
- Custom Homepage
- Other Analytics
- Comments
- Custom CSS
- Custom header
- Site hosted assets / no CDNs
- And many more...
## Installation
Kayal supports several installation methods: as a git submodule, a Hugo Module, or through manual installation.
Detailed instructions on how to install Kayal can be found in [Installation](https://mnjm.github.io/kayal/docs/getting-started/) on the demo site. Here's a quick guide on how to install the theme as a git submodule:
1. In your Hugo site directory, run the following command:
```bash
git submodule add -b main https://github.com/mnjm/kayal.git themes/kayal
```
2. Copy config files from `themes/kayal/config/_default` to `config/_default` at the root of your Hugo project. Make necessary configuration changes in these files. Refer to [Configuration](https://mnjm.github.io/kayal/docs/configuration/) on the demo site for more information.
3. Remove `hugo.toml` if present, and build the site.
## Configuration
The config files included with Kayal contain all possible settings recognized by the theme. By default, many of these settings are commented out, but you can simply uncomment them to activate or modify.
Refer to [Configuration](https://mnjm.github.io/kayal/docs/configuration/) on the demo site for more details.
## Contribution
Found a bug or have a new feature idea? Create an issue to let me know, or even better, submit a pull request directly!
## Addendum
While building this theme, I constantly referred to the source codes of [Blowfish](https://github.com/nunocoracao/blowfish) and [Hugo-PaperMod](https://github.com/adityatelange/hugo-PaperMod). The idea for using markdown aesthetics came from [Archie](https://github.com/mnjm/archie), another Hugo theme.
## License
This theme is released under the [MIT License](./LICENSE).
Explore similar templates
Compare previews and descriptions within the same stack and category.
hugo-xmin
hugo-xmin is an extremely minimal Hugo theme written by Yihui Xie for template beginners. HTML and CSS total about 140 lines, with no external dependencies, and it uses the MIT license.
Hugo · Starter
hugo-theme-gallery
A Hugo Extended photo gallery theme that organizes images with Page Bundles, automatically generating album lists and gallery pages with a Justified layout and PhotoSwipe lightbox.
Hugo · Starter
reveal-hugo
reveal-hugo is a Hugo theme that converts Markdown content into Reveal.js-based HTML presentations. It supports slide separation with `---`, shortcodes for fragments, slides, sections, notes, Markdown, and MathJax, and organizes content as root or section presentations with order controlled by weight.
Hugo · Starter
anatole
Anatole is a minimalistic two-column Hugo theme ported from farbox-theme-Anatole, featuring dark mode, multilingual and RTL support, and optional portfolio, comments, analytics, KaTeX, and Mermaid integrations. It suits personal blogs, portfolios, or documentation sites built with Hugo.
Hugo · Starter
hugo-theme-diary
A Hugo diary-style theme ported from the Hexo theme Journal, with a grid homepage for essays and daily notes. It supports six languages, dark mode, table-of-contents scroll positioning, reading time, code highlighting, and configurable sidebar, fonts, and colors.
Hugo · Starter
risotto
risotto is a minimalist, responsive Hugo theme inspired by terminal ricing aesthetics. It uses semantic HTML and pure CSS with no JavaScript, and its layout relies on CSS Grid for native responsiveness without manual breakpoints.
Hugo · Starter