Hugo Blog Awesome | Demo link
| Dark mode | Light mode |
|---|---|
 |
 |
Important
This template requires Hugo extended version v0.160.0 or later. New users can dive right in. If you're coming from an older version, check out the Migration Guide before upgrading.
- Minimal design
- Light and dark mode
- Syntax highlighting
- RSS feed
- No jQuery, no Bootstrap
- 100/100 Google PageSpeed Insights score on all 4 metrics
Hugo Blog Awesome (HBA) is a theme crafted to capture your readers' attention.
Additionally, it's fast, privacy-conscious, and comes with no external dependencies. That's right. There are no Google fonts, icon packs, or JavaScript frameworks. No trackers or ads to bloat your website.
Its focus on minimalism and clean UI ensures that your content takes the spotlight. This, coupled with the support for dark mode, provides a stress-free (on the eyes) reading experience for your audience.
Built with Hugo, SCSS, and vanilla JavaScript.
To create a new Hugo site with this theme as a Git submodule, run the following command:
hugo new site myblog
cd myblog
git clone https://github.com/hugo-sid/hugo-blog-awesome.git themes/hugo-blog-awesomeTo preview the theme with example content, run the following command from the exampleSite directory:
cd themes/hugo-blog-awesome/exampleSite
hugo server --themesDir ../..To use this theme, set the theme variable in your site's hugo.toml:
theme = "hugo-blog-awesome"Step 1: Create a new Hugo site
hugo new site myblog
cd myblogStep 2: Initialize your site as a Hugo module
hugo mod init github.com/USER/REPOReplace github.com/USER/REPO with your repository address (or any module path you prefer).
Step 3: Add hugo-blog-awesome/v2 as a module dependency
hugo mod get github.com/hugo-sid/hugo-blog-awesome/v2Step 4: Configure the module in your site's hugo.toml
Add the following to your hugo.toml:
[module]
[[module.imports]]
path = "github.com/hugo-sid/hugo-blog-awesome/v2"Step 5: Verify your module dependencies are resolved
hugo mod tidyYou're all set! You can now start creating content. The theme will be automatically included from the module.
Step 6: Preview your site
hugo serverVisit http://localhost:1313 to see your site with the theme applied.
You can take a look at the hugo.toml file in the exampleSite directory for an example configuration.
It is recommended that you copy the hugo.toml file from the exampleSite directory to the root directory of your Hugo site. You can then edit the hugo.toml file to suit your needs.
I used realfavicongenerator.net to generate the favicons. You can place the resulting files in the assets\icons folder. That should get your favicon working.
If you want to customize anything further, you can modify layouts\_partials\head.html.
Social icons can be added by configuring hugo.toml file in the following manner.
[[params.socialIcons]]
name = "github"
url = "https://github.com/hugo-sid"
[[params.socialIcons]]
name = "twitter"
url = "https://twitter.com"
[[params.socialIcons]]
name = "Rss"
url = "/index.xml"List of available icons (click to expand)
| Name | Platform |
|---|---|
123rf |
123rf.com |
adobestock |
stock.adobe.com |
anilist |
anilist.co |
applemusic |
music.apple.com |
applepodcasts |
podcasts.apple.com |
behance |
behance.net |
bilibili |
bilibili.com |
bitcoin |
- |
bluesky |
bsky.app |
buymeacoffee |
buymeacoffee.com |
calendly |
calendly.com |
codeforces |
codeforces.com |
| codeberg | codeberg.org |
codepen |
codepen.io |
cryptohack |
cryptohack.org |
ctftime |
ctftime.org |
cv |
- |
deezer |
deezer.com |
dev |
dev.to |
deviantart |
deviantart.com |
discogs |
discogs.com |
discord |
discord.com |
dreamstime |
dreamstime.com |
dribbble |
dribbble.com |
douban |
douban.com |
email |
- |
facebook |
facebook.com |
flickr |
flickr.com |
forgejo |
forgejo.org/ |
freepik |
freepik.com |
gitea |
gitea.io |
github |
github.com |
gitlab |
gitlab.com |
goodreads |
goodreads.com |
googlescholar |
scholar.google.com |
guruShots |
gurushots.com |
hackerone |
hackerone.com |
hackerrank |
hackerrank.com |
hackthebox |
hackthebox.eu |
instagram |
instagram.com |
itchio |
itch.io |
kaggle |
kaggle.com |
kakaotalk |
kakaocorp.com/service/KakaoTalk |
key |
- |
keybase |
keybase.io |
kofi |
ko-fi.com |
komoot |
komoot.com |
lastfm |
last.fm |
leetcode |
leetcode.com |
letterboxd |
letterboxd.com |
liberapay |
liberapay.com |
linkedin |
linkedin.com |
mastodon |
mastodon.social |
matrix |
matrix.org |
medium |
medium.com |
microblog |
micro.blog |
monero |
- |
mixcloud |
mixcloud.com |
nuget |
nuget.org |
paypal |
paypal.com |
peertube |
- |
pgp |
- |
phone |
- |
ploywork |
ploywork.com |
qq |
qq.com |
radicle |
radicle.xyz |
reddit |
reddit.com |
researchgate |
researchgate.net |
rss |
- |
serverfault |
serverfault.com |
soundcloud |
soundcloud.com |
shutterstock |
shutterstock.com |
signal |
signal.org |
slack |
slack.com |
snapchat |
snapchat.com/add |
speakerdeck |
speakerdeck.com |
spotify |
spotify.com |
stackoverflow |
stackoverflow.com |
stackshare |
stackshare.io |
steam |
steampowered.com |
strava |
strava.com |
telegram |
telegram.org |
threads |
threads.net |
tiktok |
tiktok.com |
twitch |
twitch.tv |
twitter (the blue bird logo) |
twitter.com |
unsplash |
unsplash.com |
x (formerly Twitter) |
x.com |
xda |
xda-developers.com |
xing |
xing.com |
ycombinator |
ycombinator.com |
youtube |
youtube.com |
zhihu |
zhihu.com |
zulip |
zulip.com |
other |
- |
If you are trying to add an icon that is not listed above, you can modify layouts\partials\svgs\svgs.html to include your icon (SVG). You are encouraged to submit your icon by creating a pull request.
To enable go to top button on blog posts, set goToTop to true in hugo.toml file.
[params]
goToTop = trueTo add custom HTML to the <head> section, create a partial named custom-head.html.
The contents of this partial will be inserted at the end of the <head> section.
To create a new post, run the following command:
hugo new posts/my-first-post.md
Then, edit the my-first-post.md file to suit your needs.
To exclude a page from your rss feed just enable exclude_from_rss parameter in your markdown file. You can view this option in archetypes/default.md
---
title:
date: {{ .Date }}
exclude_from_rss: false
---To enable Disqus comments, set services.disqus.shortname in your site's hugo.toml.
To use another comments system, provide your own comments.html partial in layouts\_partials\comments.html.
To keep your Hugo Blog Awesome theme up-to-date, follow the instructions based on your installation method.
If you installed the theme using Hugo modules, use the steps below to update your theme.
Step 1: Update to the latest version
hugo mod get -u github.com/hugo-sid/hugo-blog-awesome/v2This command fetches the latest version of the theme.
Step 2: Tidy up your module dependencies
hugo mod tidyThis ensures your go.mod and go.sum files are clean and up-to-date.
Step 3: Verify the update
hugo serverRun your site locally to confirm everything works with the updated theme.
If you installed the theme as a Git submodule, follow these steps to update.
Step 1: Navigate to the theme directory
cd themes/hugo-blog-awesomeStep 2: Fetch and merge the latest changes
git pull origin mainThis pulls the latest version from the remote repository.
Step 3: Navigate back to your site root
cd ../..Step 4: Verify the update
hugo serverRun your site locally to confirm everything works with the updated theme.
When updating between major versions (e.g., v1 to v2), there may be breaking changes. Always check the Migration Guide for instructions before updating.
- Hugo Modules: New versions are fetched on demand when you run
hugo mod get -u - Git Submodule: You control when to update by running
git pull
Please read CONTRIBUTING.md.
Thanks to these wonderful people for contributing to Hugo blog awesome:
If you are using this theme for any website, feel free to list the website here. You can submit a pull request (PR) to include your website.
- https://krisnova.net/
- https://paddy-exe.github.io/
- https://www.siggijons.net/
- https://debanwita27.github.io/
- https://mrizkimaulidan.vercel.app/
- https://www.yukizr.com/
- http://liamdalg.co.uk/
- https://codewithzichen.bine.me/
- https://chriscodes.net/
- https://journeytolunar.com/
- https://ruiper.es/
- https://josephscottcampbell.com/
- https://heckintosh.github.io/
- https://dieter.plaetinck.be/
- https://www.boniface.me/
- https://meanii.dev/
- https://unixsec.io/
- https://blog.crisweb.com/
- https://jonblack.gg/
- https://viazure.cc/
- https://spikethedragon40k.github.io/
- https://tk-web.top
- https://xayan.nu/
- https://danielecer.com/
- https://mabslabs.com/
Don't forget to ⭐️ the repo if you liked this theme!
The social icons are made possible thanks to Aditya Telange's hugo-PaperMod theme.
Thanks to piharpi for creating the Jekyll klise theme. It served as an inspiration to create this Hugo theme.
This theme is released under the MIT license. For more information read the License.
