Code Monkey home page Code Monkey logo

hyde-y's Introduction

Hyde-Y

Forked from Hyde-X

You can find a live site using this theme here and the corresponding source code here.

Screenshot

preview

Installation

$ cd your_site_repo/
$ mkdir themes
$ cd themes
$ git clone https://github.com/enten/hyde-y

See the official Hugo themes documentation for more info.

Usage

This theme expects a relatively standard Hugo blog/personal site layout:

.
└── content
    ├── post
    |   ├── post1.md
    |   └── post2.md
    ├── code
    |   ├── project1.md
    |   ├── project2.md
    ├── license.md        // this is used in the sidebar footer link
    └── other_page.md

Just run hugo --theme=hyde-y to generate your site!

Configuration

Hugo

An example of what your site's config.toml could look like. All theme-specific parameters are under [params] and standard Hugo parameters are used where possible.

# hostname (and path) to the root eg. http://spf13.com/
baseurl = "http://www.example.com"

# Site title
title = "sitename"

# Copyright
copyright = "(c) 2015 yourname."

# Language
languageCode = "en-EN"

# Metadata format
# "yaml", "toml", "json"
metaDataFormat = "yaml"

# Theme to use (located in /themes/THEMENAME/)
theme = "hyde-y"

# Pagination
paginate = 10
paginatePath = "page"

# Enable Disqus integration
disqusShortname = "your_disqus_shortname"

[permalinks]
    post = "/:year/:month/:day/:slug/"
    code = "/:slug/"

[taxonomies]
    tag = "tags"
    topic = "topics"

[author]
    name = "yourname"
    email = "[email protected]"

#
# All parameters below here are optional and can be mixed and matched.
#
[params]
    # You can use markdown here.
    brand = "foobar"
    topline = "few words about your site"
    footline = "code with <i class='fa fa-heart'></i>"

    # Sidebar position
    # false, true, "left", "right"
    sidebar = "left"

    # Text for the top menu link, which goes the root URL for the site.
    # Default (if omitted) is "Home".
    home = "home"

    # Select a syntax highight for highlight.js
    # Check the static/css/highlight directory for options.
    # Leave unset to fall back to default hugo highlighter instead of highlight.js
    highlight = "default"

    # Google Analytics.
    googleAnalytics = "Your Google Analytics tracking code"

    # Sidebar social links.
    github = "enten/hugo-boilerplate" # Your Github profile ID
    bitbucket = "" # Your Bitbucket profile ID
    linkedin = "" # Your LinkedIn profile ID (from public URL)
    googleplus = "" # Your Google+ profile ID
    facebook = "" # Your Facebook profile ID
    twitter = "" # Your Twitter profile ID
    youtube = ""  # Your Youtube channel ID
    flattr = ""  # populate with your flattr uid
    flickr = "" # Your Flickr profile ID
    vimeo = "" # Your Vimeo profile ID

    # Sidebar RSS link: will only show up if there is a RSS feed
    # associated with the current page
    rss = true

[blackfriday]
    angledQuotes = true
    fractions = false
    hrefTargetBlank = false
    latexDashes = true
    plainIdAnchors = true
    extensions = []
    extensionmask = []

Menu

Create data/Menu.toml to configure the sidebar navigation links. Example below.

[about]
    Name = "About"
    URL = "/about"

[posts]
    Name = "Posts"
    Title = "Show list of posts"
    URL = "/post"

[tags]
    Name = "Tags"
    Title = "Show list of tags"
    URL = "/tags"

Foot menu

Create data/FootMenu.toml to configure the footer navigation links. Example below.

[license]
    Name = "license"
    URL = "/license"

Built-in colour themes

You can rebuild the stylesheet. To do it you need npm and run the task build:css.

$ vi scss/_00-config.less
# edit configuration

$ npm install
$ npm run build:css

> [email protected] build:css /home/steven/code/hyde-y
> grunt build:css

Running "less:development" (less) task
File static/css/style.css created

Running "cssmin:target" (cssmin) task
>> 1 file created. 27.04 kB → 14.38 kB

Done, without errors.

The task watch allows to rebuild the stylesheet when a change is spotted on scss/*.less files.

Tips

  • If you've added theme = "hyde-y" to your config.toml, you don't need to keep using the --theme=hyde-y flag!
  • Although all of the syntax highlight CSS files under the theme's static/css/highlight are bundled with the site, only the one you choose will be included in the page and delivered to the browser.
  • Change the favicon by providing your own as static/favicon.png (and static/touch-icon-144-precomposed.png for Apple devices) in your site directory.
  • Hugo makes it easy to override theme layout and behaviour, read about it here.
  • Pagination is set to 10 items by default, change it by updating paginate = 10 in your config.toml.

Changes and enhancements from the original theme

  • Highly customizable: every layout blocks are pieces of HTML code individually stored.
  • Consistent hierarchy for the partials and templates files to assist the overrides of any layout block.
  • Adjustable sidebar in config file.
  • Project layout (badges, github ribbon) for posts stored in content/code/ folder.
  • CSS built with KNACSS micro-framework.
  • Client-side syntax highlighting through highlight.js, sane fallback if disabled or no JS - infinitely more flexible than the standard Hugo highlighting.
  • Disqus integration: comment counts listed under blog entry names in post list, comments displayed at the bottom of each post.
  • Google Analytics integration.
  • Google Authorship metadata.
  • Paginated blog listing.
  • FontAwesome social links.
  • ...many other small layout tweaks!

Attribution

Obviously largely a port of the awesome Hyde and Hyde-X themes.

Questions, ideas, bugs, pull requests?

All feedback is welcome! Head over to the issue tracker.

License

Open sourced under the MIT license.

hyde-y's People

Contributors

avi-d-coder avatar bep avatar blakelivingston avatar dch avatar enten avatar harkx avatar jadunham1 avatar jeffman78 avatar jonas-koeritz avatar krishicks avatar ksubedi avatar marvelousblack avatar melo avatar mhariri avatar mthmulders avatar mwpher avatar nyebo avatar rdtr avatar rgl avatar shantanugoel avatar tommorris avatar tryp avatar tuukkao avatar zyro avatar

Watchers

 avatar  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.