Giter Club home page Giter Club logo

hugo-html5up-alpha's Introduction

Hugo HTML5up Alpha

Hugo HTML5up Alpha is a port of the static HTML template Alpha by HTML5 UP. It is designed to mirror the look and feel of the original template as closely as possible while taking advantage of all the best features Hugo has to offer.

Features

  • Blog
  • Sections
  • Taxonomies
  • Page bundles
  • Disqus Comments
  • Fontawesome icons
  • Menus and Submenus
  • OpenGraph Metadata
  • Customizable Homepage

Demo

This theme comes with a more comprehensive demo, which closely mimics the original HTML5 UP theme and demonstrates more of its features. You can view a fully functional demo at:

https://hugo-html5up-alpha.nelsonroberto.com/

To run the demo locally use the following commands:

$ git clone https://github.com/dewittn/hugo-html5up-alpha/
$ cd hugo-html5up-alpha/exampleSite
$ hugo server --themesDir ../..

Configuration

See the demo's configuration as an example:

https://github.com/dewittn/hugo-html5up-alpha/blob/master/exampleSite/config.toml

Homepage

The homepage has five sections that are customizable and removable.

  • Banner
  • Highlight
  • Features
  • Blog
  • Call to Action

Settings for the homepage come from data\homepage.yml.

### Banner ###
banner:
  enable: true
  title: "Alpha"
  content: "" # Change this if you want something other then the site description
  buttons:
    - title: "Sign Up"
      link: "#"
      class: "primary"
    - title: "Learn More"
      link: "#"

### Highlight ###
highlight:
  enable: true
  header: "Introducing the ultimate mobile app <br /> for doing stuff with your phone"
  content: "Blandit varius ut praesent nascetur eu penatibus nisi risus faucibus nunc ornare<br /> adipiscing nunc adipiscing. Condimentum turpis massa."
  image: "images/pic01.jpg"

### Features ###
features:
  enable: true
  rows:
    - items:
      - title: "Magna etiam"
        icon: "fa-bolt"
        accent: "accent2" #accent values are 1-8
        content: "Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros."
      - title: "Ipsum dolor"
        icon: "fa-chart-area"
        accent: "accent3" #accent values are 1-8
        content: "Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros."
    - items:
        - title: "Sed feugiat"
          icon: "fa-cloud"
          accent: "accent4" #accent values are 1-8
          content: "Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros."
        - title: "Enim phasellus"
          icon: "fa-lock"
          accent: "accent5" #accent values are 1-8
          content: "Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros."

### Blog ###
blog:
  enable: true
  # Leave header text blank to remove entire <section>
  header: "Recent Posts"
  buttonText: "Read More"
  postCount: 2

### Call to Action ###
cta:
  enable: true
  header: "Sign up for beta access"
  content: "Blandit varius ut praesent nascetur eu penatibus nisi risus faucibus nunc."

Global Banner

The global header is also configurable by modifying the globalheader.yml file.

title: "[Alpha](/) by HTML5 UP"
button:
  enable: true
  title: "Sign up"
  link: "#"

Cover Image

The cover image URL is hard-coded, therefore to replace this add an image to the following location in your Hugo application:

/static/images/banner.jpg

Comments powered by Disqus

The comments section is not shown unless a Disqus code is set in the config.toml file.

disqusShortname = "XXX"

Original Theme Credits

License

This theme is licensed under the Creative Commons Attribution 3.0 License.

Read More - LICENSE

hugo-html5up-alpha's People

Contributors

dewittn avatar fhirscher avatar

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.