material lite theme for hugo
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
static added files from blog template to new hugo theme Jul 10, 2015

Material Design Lite inspired theme for hugo

This is a theme for hugo, a static site generator. It is based on the blog template of Google's Material Design Lite.

wercker status


Like the original template, this theme's license is Apache 2.0.


Content organization & features

This theme does currently not support lists, categories, tags...

This theme is optimized to use 2 content types: posts and pages. Pages are automatically displayed in the dropdown list beneath the author and posts are displayed on the homepage.

You can add a description and an image to a post or page using the front matter.

Some features

  • posts can have featured images
  • header contains tags for Open Graph and Twitter Cards
  • links to profiles on Facebook, Twitter, Google Plus
  • customizable share button
  • pagination
  • customizable background image/color
  • customizable design (colors)
  • responsive design
  • code highlighting

Configuration variables

These are the supported site parameters:

TwitterUser = "YourTwitterUsername"
FacebookUser = "YourFacebookUsername"
GooglePlusUser = "YourGooglePlusUsername"
copyright = "© a short copyright statement"
author = "John Doe"
background = "a relative or absolute URL to a background image"
bgcolor = "a background color; will be ignored if you use background"
primary = "indigo"
accent = "pink"

Primary and accent define the colors of the design. Check the MDL customizer to see the supported colors.

Share button configuration

Create a file called share.html in layouts/partials/ to override the configuration for the share button.

This is the default configuration. This button uses a plugin called carrot to share to different networks. I recommend keeping the ui part as is and only modifying the networks part. Check this link for detailed instructions.

	// See
	$(function() {
		var config =
				ui: {
					flyout: "middle left",
					button_text: "<i class='material-icons'>share</i>"
		var share = new Share(".share", config);

Header tags

If you want to add extra tags to the <head> of your page, you can create a file called header-extra.html in layouts/partials/ and add your extra content to that file.


This theme is very basic and I welcome all contributions and feedback. Please create an issue or a pull request to contribute.