Skip to content

H4tch/hugo-plus

Repository files navigation

Hugo-plus

A fully featured and customizable Hugo theme that's built using Bootstrap components.

Hugo-plus provides a base set of customizable features that are able to remain consistent across theme and layout changes.

Screenshot Screenshot of a Dark Theme

Why?

Hugo lacks a standardized set of features that a Theme should support. Many of its Themes have hard-coded content which leads inconsistent user experiences.

This project introduces a basic structure which allows Themes, Layouts, Components, and Plugins to be reused and customized.

Customization can be done in stages - whether you just want to change the color palette and fonts, create different Layout Views for the content, or develop additional Components.

Who?

Targeted towards lazy developers who want a quick solution to host their thoughts, projects, and other content while having a basis for further customization and expansion of the finished product.

Features

Components

  • Jumbotron
  • Carousel
  • Panel widgets
    • Recent Posts
    • About Author (context aware, shows author related to current content)
    • Social links
  • 'Series' Table of Content
  • HTML5 Audio control widget for embedding audio files within content
    • Support for title, album info, albumn art, and preloading of the data
  • Syntax highlighting via Hightlight.js
    • Theme can be customized per Content
  • Disqus comment integration
    • Optional on-demand comment loading
    • Comment count querying
  • Magnific Popup lightbox
    • Supports photos, videos, iframes, and custom inline HTML code
    • Popup items can also be grouped into a Gallery
  • Google Custom Search Box

Content Organization

  • Mutliple Author support
    • Custom Author profile pages
    • Author taxonomy for displaying and aggregating posts by an author
  • Series taxonomy to group blog posts into a series.
    • Series section also exists which allows you to organize the blog posts better and create an overview page for the series
    • Series can be hierarchical
  • Stream section and shortcode for a Twitter styled lists of posts
    • Good for random thought streams, incremental progress throughout the year, or a project changelog
  • Content management, organization, and customization
    • Author, Series, Categories, and Tags Taxonomies
    • Content can hidden using the meta field in the Content's front matter

Theming

  • Fully responsive layouts and components built with Bootstrap
  • Customizable Component composition of page Layout

Other plugins or service integrations

  • OpenGraph metadata integration
    • Supports Author data, Article data, and custom graphic for the page
  • Google Analytics Plugin
  • Google Trends Shortcode Widget
  • 'Spoiler' Shortcode hide/show content

Getting Started

If you already have a Hugo website, or you want to continue testing traditional Hugo themes, you can use Hugo-plus as any other Hugo theme. However, for Hugo-Plus to work with a plain Hugo website, you must copy over Hugo-Plus' 'data/' directory to your site. Also change the 'title' in 'config.toml' to 'home' so the configuration of the homepage can be read from 'data/config/home.toml'.

First, dowload hugo-plus directly, or clone it by typing:

git clone https://github.com/H4tch/hugo-plus/

If you don't have Hugo installed, download it here. and install it within your environment's $PATH or in your site's root directory.

Content is created using Hugo's new command from the top level directory.

hugo new blog/first-post.md

This creates a new content post within the blog section of your site. This content will be written and formatted using Markdown as denoted by the md extension. Content is organized by Section and/or Taxonomy.

By default all content has draft = true set to prevent incomplete posts from showing up in your feed. Set this to false when the post is finished.

To build the website run hugo --buildDrafts in the site folder. To build and run a locally hosted server of your website, run hugo server -w. You can connect to it in your browser by navigating to localhost:PORTNUMBER.

Further Reading

Dive deeper into the features and customizations of Hugo-plus here. An Introduction to Hugo can be found here.

(c) 2015 Daniel Hatch (h4tch)

MIT LICENSE Badge Gratipay Badge Flattr Badge

About

A Fast & Comprehensive Wesbite Platform built with Hugo and Bootstrap

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •