Giter Club home page Giter Club logo

hugo-theme-codex's Introduction

Codex

A minimal blog theme built for Hugo ๐Ÿœ

  • An about page ๐Ÿ‘‹๐Ÿป and a blog ๐Ÿ“
  • Blog posts can be tagged ๐Ÿท

Getting started

At the root of your Hugo project, run:

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

Next, copy the contents of the default 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.

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. 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:[email protected]"></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.

Future Updates & Contributing

Right now the way to customize the theme is not very user-friendly. That is the first thing to work on. If you get curious just hop into the theme directory and go exploring through the code. It's not too complicated what's going on.

hugo-theme-codex's People

Contributors

jakewies avatar somaniarushi avatar xvallspl avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.