Code Monkey home page Code Monkey logo

hugothemes's Introduction

Hugo themes

A collection of all themes that were created by the Hugo community. See a complete listing of all of these themes along with screenshots and demos at themes.gohugo.io. Every theme in this list will automatically be added to the theme site.

Build script

For the curious, here's how this automatic adding is accomplished.

Installation

Installing all themes

If you would like to install all of the available Hugo themes, simply clone the entire repository from within your working directory with this command:

git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Installing a single theme

cd themes
git clone URL_TO_THEME

Adding a theme to the list

  • Create your theme using hugo new theme THEMENAME;
  • Test your theme against https://github.com/spf13/HugoBasicExample;
  • Add a theme.toml file to the root of the theme and add some metadata about the theme;
  • Add a descriptive README.md to the root of the theme;
  • Add /images/screenshot.png and /images/tn.png (see below);
  • Open up a new Issue with a link to the theme's repository on GitHub.

If your theme doesn't fit into the Hugo Basic Example site, we encourage theme authors to supply a self-contained Hugo site in /exampleSite.

NOTE: The folder name here is important, as this folder will be picked up and used by the script that generates the Hugo Theme Site. It mirrors the root directory of a Hugo website and allows you to add custom content, assets and a config file with preset values.

See Artist theme's exampleSite for a good example. And please make the site's content as neutral as possible.

Each theme needs:

  1. To be added to the hugoThemes repo;
  2. To have the right fields in theme.toml;
  3. To have the right images; and
  4. A good README.

theme.toml

This file contains metadata about the theme and its creator. The following fields are required:

name = "Hyde"
license = "MIT"
licenselink = "https://github.com/spf13/hyde/blob/master/LICENSE.md"
description = "An elegant open source and mobile first theme"
homepage = "http://siteforthistheme.com/"
tags = ["blog", "company"]
features = ["blog", ]
min_version = 0.13

[author]
    name = "spf13"
    homepage = "http://spf13.com/"

# If porting an existing theme
[original]
    author = "mdo"
    homepage = "http://hyde.getpoole.com/"
    repo = "https://www.github.com/mdo/hyde"

Notes:

  1. This is different from the file created by hugo new theme in the old v0.12. The current Hugo v0.13 does create the same template with the new fields except min_version that was added in 0.14-DEV.

  2. Only theme.toml is accepted, not theme.yaml or not theme.json.

Media

Screenshots are used as preview in the list. Make sure that they have the right dimensions:

  • Thumbnail should be 900×600 in pixels
  • Screenshot should be 1500×1000 in pixels
  • Media must be located in:
    • [ThemeDir]/images/screenshot.png
    • [ThemeDir]/images/tn.png

Additional media may be provided in that same directory.

README.md

Your theme's README file (which should be written in Markdown and called README.md) serves a double purpose. This is because its content will appear in two places—i.e., it will appear:

  1. On your theme's details page at themes.gohugo.io; and
  2. At GitHub (as usual), on your theme's regular main page.

Note: If you add screenshots to the README please make use of absolute file paths instead of relative ones like /images/screenshot.png. Relative paths work great on GitHub but they don't correspond to the directory structure of themes.gohugo.io. Therefore, browsers will not be able to display screenshots on the theme site under the given (relative) path.

hugothemes's People

Contributors

bep avatar digitalcraftsman avatar spf13 avatar anthonyfok avatar quoha avatar gizak avatar dim0627 avatar tmaiaroto avatar crakjie avatar esell avatar zhe avatar titi avatar markdblackwell avatar keichi avatar gcushen avatar fredrikloch avatar bitxeno avatar syui avatar rakuishi avatar key-amb avatar vjeantet avatar chibicode avatar stou avatar nsomar avatar nraboy avatar marloncabrera avatar hut8 avatar hbpasti avatar dplesca avatar abhi1010 avatar

Watchers

Steve T avatar

Forkers

fossabot

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.