A minimalist theme for Hugo.
Live Demo at: iossefy.github.io/kaslaanka
this theme is a fork of Hugo-tanka theme.
this theme is a "do it yourself" theme, you probably want to change the css to make it your taste,
use custom.css to do it.
- minimalist theme
- easily customizable
- easy to setup
- does not need any javascript (javascript is optional)
- works as a blog or/and a personal website
- gives you a space to be creative
- remove the bloat (utterances comments, progressivly, highlight.js)
- scriptless by default.
- removed bootstrap.
- changed how the index, single pages and blog posts look.
- blog list on the home page is limited, if the users want to see more they go to /blog/
- listing projects on the home page.
- brief about me on the home page.
- support unlisted articles.
- better favicons.
- better tags
- add categories
- add multiple languages support
- HUGE first letter paragraph (if you want)
- Brief description under blog post title
Install hugo using the setup guide.
Create a new Hugo site
hugo new site .add the theme to your Hugo site
# first initialise your repository with git
git init
# then fetch the theme and put it inside themes/ directory
git submodule add https://github.com/Iossefy/kaslaanka.git themes/kaslaankause the theme by adding this line in your config (config.toml) file
theme = 'kaslaanka'to get your site ready add the following params to your config:
[params]
sitename = "Kaslaanka Theme"
copyrights = "John Doe"
defaultList = "global"
paginationLen = 3
projectsURL = "https://example.com"
brief_about = "<center>Kaslaanka theme demo made with ❤️️</center>"run this in your terminal to see progress:
hugo serveit usually serves on http://localhost:1313/. Now you've are half way there.
Let's add some of our awesome projects to the homepage. add the following under [params]
[[params.myprojects]]
name = "Totally Awesome Project"
description = "Machine Learning Magic!!!"
url = "https://example.com"
[[params.myprojects]]
name = "Kaslaanka"
description = "The best hugo theme ever!!!"
url = "https://github.com/Iossefy/kaslaanka"Let's add some nav links:
[[menu.primary]]
name = "Home"
url = "/"
weight = 1
[[menu.primary]]
name = "About"
url = "/about"
weight = 2
[[menu.primary]]
name = "Subscribe"
url = "/index.xml"
weight = 3Now you are done installing the theme. Read Hugo's
documentation and continue your
journey. i will use yaml to write the rest of the README, it's easy
to convert between them, just use whatever you like. Check out
config.yml annotated with comments.
you should check out exampleSite/. don't copy it fully, there are
some workaround used in layouts/blog/ to deploy on github pages,
please ignore it.
add your custom css here /static/css/custom.css
/* <span class="first-letter">H</span>ello World! */
.first-letter {
font-family: "Roboto Serif";
}add your custom javascript here /static/js/custom.js
// be creative
for(;;){alert("HAHAHAHAHAH")}you can add external scripts in /layouts/partials/scripts.html
<script src="..." ... ></script>you can add as much <meta> and <link> as you like in
/layouts/partials/meta.html
tags:
- hello
- okthis post will be listed at /tags/hello/ and /tags/ok/
categories:
- travelthis post will be listed at /categories/travel/
sitename: "Site Name!"
baseURL: "/"
languageCode: en-us
title: "Kaslaanka Theme"
author: John Doe
enableEmoji: true
hasCJKLanguage: false
# You can change code highlight theme
pygmentsstyle: "tango"
pygmentscodefences: true
# if you want to add html to your markdown
markup:
goldmark:
renderer:
unsafe: true
# Links of the navbar
menu:
primary:
- name: Home
url: /
weight: 1
- name: About
url: /about
weight: 2
- name: Subscribe
url: /index.xml
weight: 3
# You can add languages!
# do not expect it to work out of the box
# https://gohugo.io/content-management/multilingual/
defaultContentLanguage: en
languages:
en:
LanguageName: English
# contentDir: content/english
ru:
LanguageName: русский
# contentDir: content/russian
params:
sitename: "Kaslaanka Theme"
# it will produce: copyrights (c) 2022 joe
copyrights: John Doe
# set default homepage list (what section to list pages from)
# default: global
# currently available options (global, blog)
defaultList: global
# list 3 items of every section
# you can use a section specific list
# to list n items of that section.
# see ./layouts/partials/bloglist.html for example
paginationLen: 3
# path to the favicon directory
# see ./layouts/_defaults/baseof.html line #30 to line #37
# faviconpath: "/img/favicon"
# projects will show in the index page
myprojects:
- name: "Totally Awesome Project"
description: "Machine Learning Magic!!!"
url: https://example.com
- name: "Kaslaanka"
description: "The best hugo theme ever!!!"
url: https://github.com/Iossefy/kaslaanka
# link to more projects
# show your github repositories as example
# or create your own page.
projectsURL: https://example.com
# a brief about me
brief_about: <center>Kaslaanka theme demo made with ❤️️</center>
# and don't forget
theme: kaslaankasitename = "Site Name!"
baseURL = "/"
languageCode = "en-us"
title = "Kaslaanka Theme"
author = "John Doe"
enableEmoji = true
hasCJKLanguage = false
pygmentsstyle = "tango"
pygmentscodefences = true
defaultContentLanguage = "en"
theme = "kaslaanka"
[markup.goldmark.renderer]
unsafe = true
[[menu.primary]]
name = "Home"
url = "/"
weight = 1
[[menu.primary]]
name = "About"
url = "/about"
weight = 2
[[menu.primary]]
name = "Subscribe"
url = "/index.xml"
weight = 3
[languages.en]
LanguageName = "English"
[languages.ru]
LanguageName = "русский"
[params]
sitename = "Kaslaanka Theme"
copyrights = "John Doe"
defaultList = "global"
paginationLen = 3
projectsURL = "https://example.com"
brief_about = "<center>Kaslaanka theme demo made with ❤️️</center>"
[[params.myprojects]]
name = "Totally Awesome Project"
description = "Machine Learning Magic!!!"
url = "https://example.com"
[[params.myprojects]]
name = "Kaslaanka"
description = "The best hugo theme ever!!!"
url = "https://github.com/Iossefy/kaslaanka"you can make a post unlisted by adding the following
---
unlisted: true
---add a brief description to a single blog page.
---
brief: "This is my demo brief!"
---if you want to add an edit counter, see edit in the front matter.
you increment it every time you edit the post. where 3 is the
number of edits.
---
edits: 3
---GPL-3.0 LICENSE.