Hugo Themes

Prev/Next: Kraiklyn Hugo Theme Jane All Themes

Coder

A simple and clean blog theme for Hugo

Download Demo Homepage
Hugo Coder

Hugo Coder Logotype

A simple and clean blog theme for Hugo.

How to use this theme

To use hugo-coder go through the following steps.

Download

Clone this repository into your Hugo project.

git clone https://github.com/luizdepra/hugo-coder.git themes/coder

Configuration

Add the following lines to your config.toml.

baseurl = "http://www.example.com" # Hostname (and path) to the root.
title = "johndoe" # Site title.
theme = "coder" # Set the theme.
languagecode = "en" # The site’s language code used to generate RSS.
defaultcontentlanguage = "en" # The default content language.

paginate = 20 # Default number of pages per page in pagination.
canonifyurls = true # Enable to turn relative URLs into absolute.

pygmentsstyle = "b2" # Color-theme or style for syntax highlighting.
pygmentscodefences = true # Enable code fence background highlighting.
pygmentscodefencesguesssyntax = true # Enable syntax guessing for code fences without specified language.

disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.

[params] # theme parameters
    author = "John Doe" # Author's name.
    info = "Full Stack DevOps and Magician" # Author's job title or info.
    description = "John Doe's personal website" # Site description.
    keywords = "blog,developer,personal" # Site keywords.
    avatarurl = "images/avatar.jpg" # Contain the path of the optionnal avatar in the static folder.

    footercontent = "Enter a text here." # Add footer content

    # Whether you want to hide copyright and credits in the footer.
    hideCredits = false
    hideCopyright = false

    # Custom CSS
    custom_css = []

    # RTL support
    rtl = false

    # Multilanguage mode
    langseparator = "|" # Separates menus from language selectors when site is multilingual.

# Social links
[[params.social]]
    name = "Github"
    weight = 1
    url = "https://github.com/johndoe/"
[[params.social]]
    name = "Twitter"
    weight = 2
    url = "https://twitter.com/johndoe/"
[[params.social]]
    name = "LinkedIn"
    weight = 3
    url = "https://www.linkedin.com/in/johndoe/"

# Menu links
[[menu.main]]
    name = "Blog"
    weight = 1
    url  = "/posts/"
[[menu.main]]
    name = "About"
    weight = 2
    url = "/about/"

You can look at full working config.toml inside the exampleSite folder.

Multilingual mode

To use multilingual mode, the configuration above needs to be extended by parameters for the specific languages. Each language section overrides default site’s parameters when that language is chosen.

[params]
    langseparator = "|" # separates menus from language selectors.

[languages]
    [languages.en]
        languagename = "English" # The language name to be displayed in the selector.
        title = "John Doe"

        # You can configure the theme parameter for each language. 
        [languages.en.params]
        author = "John Doe"
        info = "Full Stack DevOps and Magician"
        description = "John Doe's personal website"
        keywords = "blog,developer,personal"

        [languages.en.menu] # It is possible to change the menu too.

        [[languages.en.menu.main]]
        name = "About"
        weight = 1.0
        url = "/about/"

        [[languages.en.menu.main]]
        name = "Blog"
        weight = 2.0
        url = "/posts/"


    [languages.pl]
        languagename = "Polski"
        title = "John Doe po polsku"

        [languages.pl.params]
            author = "John Doe"
            description = "Strona domowa John'a Doe"
            keywords = "blog,developer,strona domowa"
            info = "Full Stack DevOps i Magik"

        [languages.pl.menu]

            [[languages.pl.menu.main]]
            name = "O mnie"
            weight = 1.0
            url = "/pl/about/"

            [[languages.pl.menu.main]]
            name = "Blog"
            weight = 2.0
            url = "/pl/posts/"

It is possible to force Hugo to render all default language content under the language code with defaultContentLanguageInSubdir = true. In this case, remember to update your menus URLs (i.e. /en/about/).

Build & Test

It is necessary to have less and uglifycss installed to build and run the demo. Assuming that already have NodeJS/NPM installed, run npm install -g less uglifycss.

To update or generate the minified CSS file:

make build

To build your site and test, run:

hugo server

To preview the exampleSite, run

make demo

The above command copies current state of the theme to exampleSite/themes and starts hugo with hugo serve -D (Go does not support Symlink directories)

Disqus

Add the following line to your config, disqusShortname = "yourdiscussshortname" When this is set, all posts are disqus enabled
You can disable comments for a post by adding the following to your page meta data: disable_comments: true.

License

Coder is licensed under the MIT license.

Author

Luiz de Prá

Contributors

Special Thanks

  • Gleen McComb, for his great article about custom pagination.
  • All contributors, for every PR and Issue reported.

See Also