Basic HTML Elements
The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.
MathJax
MathJax JavaScript library allows you to include mathematics in your web pages for viewing in any modern browser.
Translation Support
With Hugo i18n possibilities, you can easily have a website in your language. This Hugo theme is ready to be translated into other languages. You can create a special file that contains translated text to show the visitor instead of English.
Featured Images
Featured image is the image that appears on summaries at the list pages and the top of content pages. Every content page in this theme can have a featured image.
Hugo Syntax Highlighting
You can have code snippets highlighted so that they are easier to read on your site using Chroma, Hugo’s default syntax highlighter. It is built in Go lang and is really, really fast – and for the most important parts compatible with Pygments. Chroma takes source code and other structured text and converts it into syntax highlighted HTML, ANSI-coloured text, etc.
Creating a New Theme
Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.
We’ll start with creating a new site with a very basic template.
(Hu)go Template Primer
Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates.
Getting Started with Hugo
Step 1. Install Hugo Go to Hugo releases and download the appropriate version for your OS and architecture.
Save it somewhere specific as we will be using it in the next step.
More complete instructions are available at Install Hugo
Step 2. Build the Docs Hugo has its own example site which happens to also be the documentation site you are reading right now.
Follow the following steps:
Clone the Hugo repository Go into the repo Run hugo in server mode and build the docs Open your browser to http://localhost:1313 Corresponding pseudo commands: