https://github.com/devidw/hugo-theme-cik
Hugo Theme built on the “Content is King” philosophy. 👑
https://github.com/devidw/hugo-theme-cik
blog-theme blog-theme-hugo blog-themes blogging cik content-is-king contentisking hugo hugo-blog hugo-blog-theme hugo-theme simple static static-theme theme theme-ui
Last synced: 3 months ago
JSON representation
Hugo Theme built on the “Content is King” philosophy. 👑
- Host: GitHub
- URL: https://github.com/devidw/hugo-theme-cik
- Owner: devidw
- License: mit
- Created: 2021-11-13T17:10:58.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T10:04:04.000Z (about 3 years ago)
- Last Synced: 2025-02-02T11:41:44.365Z (4 months ago)
- Topics: blog-theme, blog-theme-hugo, blog-themes, blogging, cik, content-is-king, contentisking, hugo, hugo-blog, hugo-blog-theme, hugo-theme, simple, static, static-theme, theme, theme-ui
- Language: HTML
- Homepage: https://devidw.github.io/hugo-theme-cik/
- Size: 547 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
1. Clone this theme to your `themes` directory
```cmd
git submodule add https://github.com/devidw/hugo-theme-cik ./themes/hugo-theme-cik
```
2. Add this theme to your list of themes inside your config-file
Using `config.toml`
```toml
theme = ["…", "hugo-theme-cik", "…"]
```
Using `config.yaml`
```yaml
theme: ["…", "hugo-theme-cik", "…"]
```
or
```yaml
theme:
- "…"
- "hugo-theme-cik"
- "…"
```
3. (Optional) Install additional hugo theme components to extend the theme. Some suggestions:
* https://github.com/devidw/hugo-theme-component-asciidoctor-skin
* https://github.com/devidw/hugo-theme-component-structured-data
* https://github.com/devidw/hugo-theme-component-webmentions
* https://github.com/devidw/hugo-theme-component-oembed
* Or create your own one using https://github.com/devidw/cookiecutter-hugo-theme-component
## Update
```cmd
git submodule update --init --recursive --remote
```
## Configuration
### Params
#### Main Sections
Please specifiy in which sections you posts are located:
```yaml
mainSections:
- posts
```
#### Author
```yaml
author:
name: David Wolf
email: [email protected]
signature: signature.svg # static file path
```
#### Payments
Generates `` links and adds them to the ``
```yaml
payments:
- https://paypal.me/devidwolf
- https://buymeacoffee.com/dwolf
```
#### Theme color
```yaml
themeColor: "#8b7355"
```
#### Icons
```yaml
icons:
favicon: logo.svg
touchIcon: logo.svg # Safari
maskIcon: logo.svg # Safari
```
### Frontmatter
#### No index
```yaml
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 `` 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 `` tag
* `head/end.html` to inject HTML right before the closing `` tag
* `body/start.html` to inject HTML right after the opening `` tag
* `body/end.html` to inject HTML right before the closing `` 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.
```sass
@import
```
##### 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`:
```sass
@import my-custom-styles
```
Do not include the file extension like `.scss` or `.css` in the path of the `@import` rule.