Content first Hugo Theme

This Hugo theme focuses purely on content: Content is king. Layout and appearance are simply by design. The primary goal of the theme is to give the website visitor maximal user experience for reading and enjoying the published content elegantly. No Sidebars or any other annoying elements that interrupt the reading experience.

Installation

Clone this theme to your themes directory

git submodule add https://github.com/devidw/hugo-theme-cik ./themes/hugo-theme-cik

Add this theme to your list of themes inside your config-file Using config.toml

theme = ["…", "hugo-theme-cik", "…"]

Using config.yaml

theme: ["…", "hugo-theme-cik", "…"]

theme:
  - "…"
  - "hugo-theme-cik"
  - "…"

(Optional) Install additional hugo theme components to extend the theme. Some suggestions:

Update

git submodule update --init --recursive --remote

Configuration

Params

Main Sections

Please specifiy in which sections you posts are located:

mainSections:
  - posts

Author

author:
  name: David Wolf
  email: [email protected]
  signature: signature.svg # static file path

Payments

Generates <link rel=payment> links and adds them to the <head>

payments:
  - https://paypal.me/devidwolf
  - https://buymeacoffee.com/dwolf

Theme color

themeColor: "#8b7355"

Icons

icons:
  favicon: logo.svg
  touchIcon: logo.svg # Safari
  maskIcon: logo.svg # Safari

Frontmatter

No index

noindex: true

sets robots meta tag
excludes via robots.txt
excludes from sitemap.xml
excludes from RSS feed

Hooks

You can inject custom HTML markup by creating hook partial files inside your projects layouts/partials/hooks directory.

For example to hook directly before the closing </body> tag you can create a body/end.html file in your layouts/partials/hooks directory. The full path in this case would be layouts/partials/hooks/body/end.html.

Available hooks:

head/start.html to inject HTML right after the opening <head> tag
head/end.html to inject HTML right before the closing </head> tag
body/start.html to inject HTML right after the opening <body> tag
body/end.html to inject HTML right before the closing </body> tag

Styles

You can add additional custom styles to the Hugo theme via the /assets/sass/_custom.sass file.

If there is no /assets/sass/_custom.sass file in your project you can simply create it.

Using SASS

Simply add your SASS rules into _custom.sass.

All your custom styles will be compiled from SASS to CSS and minified automatically via Hugo pipes.

Using SCSS or CSS

If you not so familiar with SASS you can also write SCSS or just plain CSS.

To do so you only have to import your .scss or .css file into _custom.sass by doing a SASS-import using the @import method.

@import <filename>

Example

Say you want to include some CSS styles, which you write into /assets/sass/my-custom-styles.css.

To add them to the theme you add the following into /assets/sass/_custom.sass:

@import my-custom-styles

Do not include the file extension like .scss or .css in the path of the @import rule.

devidw / hugo-theme-cik Goto Github PK

hugo-theme-cik's Introduction