All Projects โ†’ jakewies โ†’ Hugo Theme Codex

jakewies / Hugo Theme Codex

Licence: mit
A minimal blog theme for Hugo ๐Ÿœ

Programming Languages

go
31211 projects - #10 most used programming language

Projects that are alternatives of or similar to Hugo Theme Codex

Hugo Theme Techdoc
The Techdoc is a Hugo Theme for technical documentation.
Stars: โœญ 118 (-44.34%)
Mutual labels:  hugo, scss
Gaohaoyang.github.io
blog & blog theme๐Ÿค˜
Stars: โœญ 1,699 (+701.42%)
Mutual labels:  blog, scss
Hugo Theme Noteworthy
A minimalist Hugo theme for writers and bloggers
Stars: โœญ 119 (-43.87%)
Mutual labels:  blog, hugo
Engineering Blog
๐Ÿ“ We write about our technologies and the problems we handle at scale.
Stars: โœญ 99 (-53.3%)
Mutual labels:  blog, scss
Kross Hugo
Kross Creative Portfolio Template
Stars: โœญ 172 (-18.87%)
Mutual labels:  blog, hugo
Lipi
A simple static blog generator.
Stars: โœญ 100 (-52.83%)
Mutual labels:  blog, hugo
Yihui
Personal website of Yihui Xie
Stars: โœญ 122 (-42.45%)
Mutual labels:  blog, hugo
Hugo Bearblog
๐Ÿงธ A Hugo theme based on ยปBear Blogยซ. Free, no-nonsense, super-fast blogging. This theme now includes a dark color scheme to support dark mode ๐Ÿฆ‰ โฌ›๏ธ!
Stars: โœญ 86 (-59.43%)
Mutual labels:  blog, hugo
Hugo Serif Theme
Serif is a modern business theme for Hugo.
Stars: โœญ 168 (-20.75%)
Mutual labels:  hugo, scss
Hexo Theme Book
A simple, elegant, book-like hexo theme with some useful features.
Stars: โœญ 166 (-21.7%)
Mutual labels:  blog, scss
Hugo Theme Even
๐Ÿš€ A super concise theme for Hugo https://hugo-theme-even.netlify.app
Stars: โœญ 1,351 (+537.26%)
Mutual labels:  hugo, scss
Hugo Clarity
A theme for Hugo based on VMware Clarity
Stars: โœญ 189 (-10.85%)
Mutual labels:  blog, hugo
Educenter Hugo
Educenter is an educational website template. It can be used as an online teaching platform, school and university websites
Stars: โœญ 96 (-54.72%)
Mutual labels:  hugo, scss
Tableless
O site do Tableless em Hugo. Mais leve, impossรญvel.
Stars: โœญ 107 (-49.53%)
Mutual labels:  blog, hugo
Hugo Theme Basic
Basic site theme styled with minimal tachyons, syntax highlighting, and blog series configuration. ๐Ÿ“ฆ
Stars: โœญ 89 (-58.02%)
Mutual labels:  blog, hugo
Hugo Theme Zen
A fast and clean Hugo theme with css-grid and Hugo pipes support.
Stars: โœญ 119 (-43.87%)
Mutual labels:  hugo, scss
Hugo Papermod
A fast, clean, responsive Hugo theme
Stars: โœญ 1,202 (+466.98%)
Mutual labels:  blog, hugo
Hugo Vitae
Vitae is a blog theme for Hugo that focuses on your content.
Stars: โœญ 81 (-61.79%)
Mutual labels:  blog, hugo
Hugo Theme Console
A minimal, responsive and light theme for Hugo inspired by Linux console.
Stars: โœญ 143 (-32.55%)
Mutual labels:  blog, hugo
Cosx.org
็ปŸ่ฎกไน‹้ƒฝไธป็ซ™
Stars: โœญ 180 (-15.09%)
Mutual labels:  blog, hugo

Codex

A minimal blog theme built for Hugo ๐Ÿœ

Hugo desktop screenshot

  • An about page ๐Ÿ‘‹๐Ÿป and a blog ๐Ÿ“
  • Blog posts can be tagged ๐Ÿท
  • Mathematical notations are supported with KaTex ๐Ÿ“
  • Sass/SCSS for styling โœจ
  • Support for Google Analytics ๐Ÿ“ˆ and Disqus ๐Ÿ’ฌ
  • i18n support

Prerequisites

Hugo extended version (for Sass/SCSS support).

For macOS users, the extended version is installed by default if you use homebrew.

For Windows users, you can install with choco:

choco install hugo-extended -confirm

Getting started

At the root of your Hugo project, run:

git submodule add https://github.com/jakewies/hugo-theme-codex.git themes/hugo-theme-codex

Next, copy the contents of the exampleSite/config.toml to your site's config.toml. Make sure to read all the comments, as there a few nuances with Hugo themes that require some changes to that file.

The most important change you will need to make to the config.toml is removing this line:

themesDir = "../../" 

It only exists in the example site so that the demo can function properly.

Finally, run:

hugo server -D 

Note: If you are seeing a blank page it is probably because you have nothing in your content/ directory. Read on to fix that.

Configuring the Home Page

The site's home page can be configured by creating a content/_index.md file. This file can use the following frontmatter:

---
heading: "Hi, I'm Codex"
subheading: "A minimal blog theme for hugo."
handle: "hugo-theme-codex"
---

If you would rather override the about page's layout with your own, you can do so by creating a layouts/index.html. You can find the index.html file that hugo-theme-codex uses here.

Configuring Social Icons

Social Icons are optional. To show any of these icons, just provide the value in the [params] section of config.toml.

# config.toml

[params]
  twitter = "https://twitter.com/GoHugoIO"
  github = "https://github.com/jakewies/hugo-theme-codex"
  # ...

  iconOrder = ["Twitter", "GitHub"]

If any of these options are given, hugo-theme-codex will render the social icon in the footer, using the order specified in iconOrder.

See the contents of the example site for more details.

You can also create additional social icons by:

  1. Adding your own SVGs in static/svg/, for example static/svg/reddit.svg.
  2. Modifying your site's config as follows:
    [params]
       # ...
       reddit = "<url to your reddit>"
    
       iconOrder = ["Reddit"]
    

Make sure that the icon title must match the icon's file name. If the title contains more than one word, say "My Awesome Site", you can use dash "-" for the icon name: my-awesome-site.svg.

Creating a blog post

You can create a new blog post page by going to the root of your project and typing:

hugo new blog/:blog-post.md

Where :blog-post.md is the name of the file of your new post.

This will execute the theme's blog archetype to create a new markdown file in contents/blog/:blog-post.md with the following frontmatter:

# Default post frontmatter:

# The title of your post. Default value is generated
# From the markdown filename
title: "{{ replace .TranslationBaseName "-" " " | title }}"
# The date the post was created
date: {{ .Date }}
# The post filename
slug: ""
# Post description used for seo
description: ""
# Post keywords used for seo
keywords: []
# If true, the blog post will not be included in static build
draft: true
# Categorize your post with tags
tags: []
# Uses math typesetting
math: false
# Includes a table of contents on screens >1024px
toc: false

The frontmatter above is the default for a new post, but all values can be changed.

Configuring Table of Contents in blog posts

To display post title in Table of Contents in blog posts, set showPageTitleInTOC to true in the [params] section of config.toml.

# config.toml

[params]
  # ...
  showPageTitleInTOC = true

Adding a new section menu

In your site's config.toml, add a new menu definition for say, "photos":

# config.toml

[[menu.main]]
    identifier = "photos"
    name = "photos"
    title = "Photos"
    url = "/photos"

Then, put your posts under "content/photos".

Custom styling

You have two options for custom styling. The first is to create an assets/scss/custom.scss in your project and put your custom styling there. For example, the snippet below changes the dot's color on your About page to blue:

// custom.scss
.fancy {
  color: #1e88e5;
}

You can even use Hugo variables/params in your custom styles too!

// custom.scss
.fancy {
  color: {{ .Site.Params.colors.fancy | default "#1e88e5" }}
}
# config.toml
[params.colors]
    fancy = "#f06292"

The second option is to use the supported scss overrides. You can do this by creating an assets/scss/overrides/scss file in your project. The following overrides are supported:

// overrides.scss

// The primary accent color used throughout the site
$primary: ''

Tags

Right now hugo-theme-codex uses the tags taxonomy for blog posts. You can view all the blog posts of a given tag by going to /tags/:tag-name, where :tag-name is the name of your tag.

i18n

Support for i18n is currently available for the following languages:

  • English
  • German

If you would like to have another language supported, create a post in the Discussions section of the repository. You may also support your language of choice by creating a i18n/ directory in your project with a .toml file named after the language you are supporting.

There are not many UI-related strings to override in this theme. If you are looking to support a language of your own, refer to the i18n/en.toml file to see which strings can be overridden.

Favicon

To update favicon of the site, replace the one in static/favicon.ico with your own.

Contributing

Check out the CONTRIBUTORS.md file for more info on how you can contribute!

Contributors โœจ

All Contributors

Thanks goes to these wonderful people (emoji key):


Jake Wiesler

๐Ÿ’ป ๐ŸŽจ ๐Ÿ“–

Chuxin Huang

๐Ÿ“– ๐Ÿ’ป ๐ŸŽจ

Kent

๐Ÿ’ป ๐Ÿ“– ๐ŸŽจ

Arushi Somani

๐Ÿ“–

Xavier Valls

๐Ÿ“– ๐Ÿ’ป ๐ŸŽจ

Pyvain

๐Ÿ’ป ๐Ÿ“–

Justin Lebar

๐Ÿ’ป

Aareet Shermon

๐ŸŽจ

dgnicholson

๐ŸŽจ ๐Ÿ’ป

Harsh Shandilya

๐Ÿ’ป

Marco Kamner

๐Ÿ’ป

ewen

๐Ÿ’ป

Sanchith Hegde

๐Ÿ’ป ๐Ÿ“–

Sรถren Johanson

๐Ÿ’ป

James Lloyd

๐Ÿ’ป

Wilson E. Husin

๐Ÿ’ป

Tom Morris

๐Ÿ’ป

Mohamad Fadhil

๐Ÿ’ป

Sam Kvale

๐Ÿ’ป

Mark C

๐Ÿ’ป

Robin

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].