msfjarvis.dev/content/blog/how-to-use-codex.md

title	date	slug	description	keywords	draft	tags	stylesheet
How To Use Codex	2020-06-04T09:19:29-04:00	how-to-use-codex	Explaining how to get up and running with the Codex theme for Hugo.	gohugo hugo go blog	false	hugo	post.css

Codex is a minimal blog theme for Hugo.

Getting Started

1. Start a new hugo site

hugo new site my-new-site
cd my-new-site

2. Initialize project with git

git init

3. Add hugo-theme-codex as a submodule

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

4. List "codex" as the name of your theme in config.toml

# config.toml

theme = "codex"

5. Start the server

hugo server -D

You should now see some default content.

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. As of right now we support Twitter and GitHub, but more can be supported in the future. To show any of these icons, just provide the value in the [params] section of config.toml.

# config.toml

[params]
  twitter = "hugo-theme-codex"
  github = "jakewies/hugo-theme-codex"

If either of these options are given, hugo-theme-codex will render the social icon in the footer.

See the contents of the example site for more details.

You can also create additional social icons by replicating the code in partials/social-icons.html. For example, to add an email social icon, you can add the follwing:

<a class="social-icons__icon social-icons__icon--email" href="mailto:youremail@example.com"></a>

Note that you also need to add the following css in corresponding css files where social icons are displayed, i.e. about.css and post.css:

.social-icons__icon--email {
  background-image: url("/icons/email.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.

The theme supports KaTeX which renders math typesetting in markdown document. Simply turn on by math: true in your post.

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.

Favicon

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