Hugo Another Minimalist Theme

A simple responsive blog theme for Hugo designed for academics - based on Natrium .

See the example site in action .

Screenshots

Light mode

Dark mode

Features

• Blog
• Dark mode
• Academics
• Responsive
• Privacy (no Google)
• Taxonomies
• Syntax highlighting
• Microdata
• Tailwind CSS
• Latex

Installation

You can install this theme just like any Hugo theme, using Run the following inside your Hugo site folder:

$ mkdir themes
$ cd themes
$ git clone https://github.com/hugcis/hugo-astatine-theme

You can now build your website using the hugo command from your site folder.

Configuration

Take a look at the sample config.toml file located in the exampleSite folder. It has some documentation for the available fields.

TailwindCSS

If you don’t want to use Tailwind and just want to write CSS yourself, you can ignore this.

If you are familiar with TailwindCSS and wish to change some of the tailwind classes in the theme, or add you own in you website’s layout files, you can copy the configuration to your webiste, with cp themes/hugo-astatine-theme/tailwind.config.js ./. Remember to set the right path in tailwind.config.js. For example, if you installed the theme as explained above, you may set it to:

module.exports = {
  content: [
    "content/**/*.md",
    "layouts/**/*.html",
    "themes/hugo-astatine-them/layouts/**/*.html",
    "themes/hugo-astatine-them/content/**/*.md" # If you happen to put html 
    # within some of the markdown files.
  ]
}

Then, from the website root, run this to build the stylesheet and rebuild it automatically on change:

npx tailwindcss -i ./themes/hugo-astatine-theme/css/main.css \
    -o ./themes/hugo-astatine-theme/css/style.css \
    --watch

LaTeX rendering with KaTex

The theme uses KaTex to render math. The JS code is only inserted in the footer of the page if you set the page parameter KaTeX to true.

If you wish to host KaTeX yourself, you can set the site parameter hostedKaTex to true in the configuration file config.toml. The path for the self-hosted KaTeX is set to be /js/katex/..., so you can get it hosted on your Hugo website by grabbing the latest KaTeX release and placing the katex folder in ${SITE_ROOT}/static/js/.

Content Types

Main page

This is the main page of your site. You can find the source that generated the page at content/_index.md . It contains three components: an info box with your profile picture and basic information (this is populated with the front matter of the _index.md), the content of the page (this is the markdown body of _index.md), and a list of publications (also controlled by the front matter of _index.md).

Posts

Used for blog posts. Blog posts are listed on the posts page.

Run hugo new post/<post-name>.md to create a post. The Posts section is there by default, but you can change this in the configuration file (see config.toml ).

Taxonomies

Posts can be placed in categories or have tags. List pages for the categories and tags can be accessed at the URLs ${BASE_URL}/categories/ and ${BASE_URL}/tags/

Syntax highlighting

Astatine is using Chroma and pygmentsStyle = "native" by default. If you would like to use another style you have to adjust the colors in pre in main.css.

Issues and contributions

If anything does not look right please post an issue! I would be happy to fix any issue, or if you feel like fixing them yourself please submit a pull request.

License

The code is available under the MIT License .

The content of the example site was partially generated with Metamorphosum (Copyright © 2014 Kyle Stetz, MIT License ).

See also

• Blonde
• Color Your World
• Compost
• Holy
• Lekh