jeblister / kube

Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog.

kube Theme for Hugo

kube Kube is a professional and a responsive Hugo theme for developers and designers that offers a documentation section mixed with a landing page and a blog.

I create this theme based on Kube Framework.

Demo

To see this theme in action, check out kube project which is rendered with this theme and some content for documentation and blog posts.

Features

• Mobile-first Design : Every element in kube is mobile-first and fully embraces latest and greatest tech.
• Responsive Design : Optimized for mobile, tablet, desktop
• Horizontal Rhythm : Like Kube framework this theme is based on a 4px vertical grid.
• Typography : beautiful typographie choice
• Google Analytics : Google Analytics using the internal async template
• Disqus Commenting : Post comments with Disqus using the internal template
• OpenGraph support : SEO-optimized using OpenGraph
• Schema Structured Data : Schema Structured Data and Meta tags
• Paginated Lists : Simple list pagination with page indicators
• Reading Time : Post reading time and update notice set user expectations
• Meta data for all blog article : Rich post data including links to category and tag taxonomy listings, author and word count
• Related Posts : Related Content for increased page views and reader loyalty
• Block Templates : Block Templates for foolproof layout extensions
• Table of Contents : Accessible Table of Contents for documentation
• SEO Site Verification : Site verification with Google, Bing Alexa and Yandex
• 404 page : 404 page with animated background

Installation

Inside the folder of your Hugo site run:

$ mkdir themes
$ cd themes
$ git clone https://github.com/jeblister/kube.git

For more information read the official setup guide for Hugo.

Copy custom archetypes to your site:

cp themes/kube/archetypes/* archetypes

Next, take a look in the exampleSite folder at. This directory contains an example config file and the content for the demo. It serves as an example setup for your blog.

Copy at least the config.toml in the root directory of your website. Overwrite the existing config file if necessary.

Hugo includes a development server, so you can view your changes as you go :

hugo server -w

Now you can go to localhost:1313 and the kube theme should be visible.

Getting Started

There are a few concepts this theme employs to make a personal documentation site. It's important to read this as you may not see what you expect upon launching. It assumes you want to call your documentation posts docs and organizes them as such. For example, creating a new docs with Hugo would require you typing:

  $ hugo new --kind docs docs/my-new-doc.md

It also assumes you want to display three types of content docs and blog and some pages : the faq, company and sign-in pages and display links to this pages in the menu. This guide will take you through the steps to configure your documentation site to use the theme.

Configuring you website

Where should blog post markdown files be stored?

The theme works with other content types, but docs pages work best when grouped under docs. When using the docs content type you'll have a customized list page sorted by weight and the default list page for all documentation. Here's an example:

Defining yourself as the Author

In this case you would want to add author = "your name" variable like your name to your post's Front Matter.

Webmaster Verification

Verify your site with several webmaster tools including Google, Bing, Alexa and Yandex. To allow verification of your site with any or all of these providers simply add the following to your config.toml and fill in their respective values:

[Params.seo.webmaster_verifications]
  google = "" # Optional, Google verification code
  bing = "" # Optional, Bing verification code
  alexa = "" # Optional, Alexa verification code
  yandex = "" # Optional, Yandex verification code

Index Blocking

Just because a page appears in your sitemap.xml does not mean you want it to appear in a SERP. Examples of pages which will appear in your sitemap.xml that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages that simply list summaries of other pages.

Though it's possible to block search indexing from a robots.txt file, kube makes it possible to block page indexing using Hugo configuration as well. By default the following page types will be blocked:

• Section Pages (e.g. Post listings)
• Taxonomy Pages (e.g. Category and Tag listings)
• Taxonomy Terms Pages (e.g. Pages listing taxonomies)

To customize default blocking configure the noindex_kinds setting in the [params] section of your config.toml. For example, if you want to enable crawling for sections appearing in Section Menu add the following to your configuration file:

[params]
  noindex_kinds = [
    "taxonomy",
    "taxonomyTerm"
  ]

To block individual pages from being indexed add nofollow to your page's front matter and set the value to true, like:

noindex = true

And, finally, if you're using Hugo v0.18 or better, you can also add an _index.md file with the noindex front matter to control indexing for specific section list layouts:

├── content
│   ├── modules
│   │   ├── starry-night.md
│   │   └── flying-toilets.md
│   └── news
│       ├── _index.md
│       └── return-flying-toasters.md

To learn more about how crawlers use this feature read block search indexing with meta tags.

Custom CSS

To add your own theme css or override existing CSS without having to change theme files do the following:

1. Create a style.css in your site's layouts/static/css directory or use custom.css file in 'themes/kube/static/css/custom.css`
2. Add link to this file in 'themes/kube/layouts/_default/baseof.html'.

Default style block :

<!-- Your own theme here -->
<link href="/css/custom.css" rel="stylesheet" type="text/css" />

Contributing

Did you find a bug or have an ideas for new features? Feel free to use the issue tracker to let me know or make a pull request.

There's only one rule...there are no rules.

License

MIT

Credits

• kube framework
• after dark theme

Contact

This is the second theme I've made for Hugo, so I'm sure I've done some things wrong or assumed too much. If you have ideas or things that should be fixed, please let me know.

• Mohamed JEBLI @jebli_7

kube's Issues

fails to build site with hugo-0.96

$ cd exampleSite/

$ hugo --themesDir=../..
Start building sites …
hugo v0.96.0+extended linux/amd64 BuildDate=unknown VendorInfo=debian:0.96.0-1+b1
ERROR 2022/05/09 10:55:45 render of "page" failed: "<<PROJECT>>/themes/kube/layouts/_default/baseof.html:5:10": execute of template failed: template: _default/single.html:5:10: executing "_default/single.html" at <.Hugo.Generator>: can't evaluate field Hugo in type *hugolib.pageState
[...]
Total in 39 ms

$

Fixing the .Hugo.Generator gives another error:

Start building sites … 
hugo v0.96.0+extended linux/amd64 BuildDate=unknown VendorInfo=debian:0.96.0-1+b1
ERROR 2022/05/09 11:03:40 render of "page" failed: "<<PROJECT>>/themes/kube/layouts/_default/baseof.html:28:8": execute of template failed: template: _default/single.html:28:8: executing "_default/single.html" at <.RSSLink>: can't evaluate field RSSLink in type *hugolib.pageState
[...]
Total in 83 ms

Modifying landing page

Hi, very nice template! A quick question, to modify the landing page do I need to edit directly the HTML code in the theme?

No Permalink field when defining menu.extra

I'm getting this error: "theme/partials/header.html" at <.Permalink>: can't evaluate field Permalink in type *hugolib.MenuEntry

When trying to utilize the extra nav:

[[menu.extra]]
    name = "Contact"
    permalink = "something"

Looks like Hugo doesn't support the permalink field?

Switching it in the theme's header.html from

            <a href="{{ .Permalink }}">{{ .Name }}</a>

to

            <a href="{{ .URL }}">{{ .Name }}</a>

to match the main menu nav works.

I'm super new to Hugo so I'm not sure if that's the actual correct fix or not. But if you want a PR for it I can make it.

Sticky navbar

Please add the option to make the navbar sticky, or make it default.

Thanks!

Javascript / JQuery functions like Toggles don't seem to be working

I'm not sure if this is a bug (so apologies in advance if I'm missing something), but it seems like some functions like Toggleme don't work on my served hugo site loaded with the Kube theme. I test this by copying over the example site and loading http://localhost:1313/docs/toggleme/. I'm not seeing anything happening in the console either.

It seems to work on the 'normal' Kube site, here: https://imperavi.com/kube/docs/toggleme/.

How to create hyperlink to locally stored HTML files

I am unable to figure out how to link to locally stored .html files from the theme. I successfully created a new blog post under docs and on clicking on it I am able to view the related text. I also added a hyperlink to that same .md file (under docs folder) but the website is unable to render it. It shows 404 not found error. However, I have ensured that the .html file exists in the specified location and the path to the .html file is also correct. How do I fix this?

Top nav not pulling through

Nav items: blog, faq, docs are not pulling through on the nav bar.

WARNING: date and/or title missing from archetype file

When creating a new documentation item, I get the following warning:

WARNING: date and/or title missing from archetype file "/home/brylie/code/MaaS/maas-api-hugo/archetypes/docs.md".
From Hugo 0.24 this must be provided in the archetype file itself, if needed. Example:
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
---

blog/single.html contains hard-wired box

blog/single.html contains a box which talks about "Redactor, Grafs and Kube". I can obviously delete this, but I feel like this shouldn't be in the theme if it's for general use?

Add heading anchors for every title in a doc page

I am loving this theme! You can see how I'm using it in https://scalacenter.github.io/bloop/. Thanks for the work that has gone into this 😄

Now, I'm trying to modify the theme to add heading anchors for every title in a doc page. I'd like to know if you've already thought about this use case and you know a way to have it without implementing it from scratch.

404 page

Thanks for building Kube!

The page on Hugo themes mentions a "404 page : 404 page with animated background" - yet I can't really find it in the code, or on the example website.

I was wondering if you had any plan or recommendation to build such a page.

Thanks.

Empty master.js file included

At the moment there is an empty master.js file included on all pages. Is this meant to be here? It appears to be blank?

Why is the favicon embedded in every page?

This increases the size of every page and makes it harder for the browser to cache the icon. What's the rationale behind this?

Google verification code is not working

Hi

I have included a google analytics code in config.toml, as it is indicated in the documentation:
[params.seo.webmaster_verifications]
google = "UA-mygooglecode-X" # Optional, Google verification code

but it is not working. I have checked that no code has been generated in the public folder files that include the Google verification code. There is no google analytics javascript code as well.

I have checked that the google code is correct, and it works if I manually included the code.

Thank you very much in advance.

Best

Docs - Events

Hi

Love the theme.

I plan on offering free events to my community and this theme would be perfect if I could change docs - events. Is this possible? If I changed:

Front Matter Folder - Docs to Events
Sections - Docs to Events
Config - Main Menu: Docs to Events

If I changed these, would it work? Apologies if this question is a little elementary. My ultimate goal is instead of offering docs, on the docs page, offering events.

Multilingual Mode, rtl and bidi

Maybe it's interesting to apply this issue jeblister/bulma#2 here? I'll try to help you if you kick it off.

Cannot override single.html

Hi, I've been trying to use / override single.html but it always render from _default/single.html. Did i miss something?

i create a menu like this in config.toml:

[[menu.main]]
    name = "Download"
    weight = -100
    url = "/download/"

under project name/layouts, create folder download and download/single.html

single.html is similar like other template:

{{ define "title"}} {{ .Title}} {{end}}
{{ define "header"}} {{ partial "header" .}} {{ end }}
{{ define main }}
<div id="main">
    <div class="row">
        <div class="col col-6">
            <img src="/img/download.png"/>
        </div>
        <div class="col col-6">
            <h1>{{.Title}}</h1>
            <p>{{.Description}}</p>
            <h2>hskcjd</h2>
        </div>
    </div>
</div>
{{ end }}
{{ define "footer"}} {{ partial "footer" .}} {{end}}

under project name/content/download.md

+++
title = "Download"
description = "The sky is the limit only for those who aren't afraid to fly!"
draft = false

+++

Thanks for helping!

Posts are blank

Hi,
The blog posts are blank, I can see the content in the .md files but they don't render, (not even on your demo site).

Failed on loading resources

Hi,

By using the public folder to upload the page to GitHub pages, the CSS, images, and js resources are not loading completely.
You could check it out (by now) on https://ceduquey.github.io/pruebaKube/

I'm still checking where the error could come from, i'm opening the issue by now!

No menu at a certain screen/window size

I noticed that on my tablet (Asus Zenpad with 2048x1536 resolution) in portrait mode the navigation menu doesn't appear. In landscape mode it's fine. I am able to replicate it on my desktop browser by getting the window width just right (I would assume 1536) where neither the regular menu nor the hamburger/mobile menu will appear. It does not appear to be browser specific.

I discovered this on my own site using the kube theme, but can replicate it at the demo site here: https://kube.elemnts.org/

Thanks!

hamburger on mobile does not stay on top of page.

have to scroll to top always. by intention ???