Hugo Theme - Skye
Switch branches/tags
Nothing to show
Clone or download
pauby Merge pull request #55 from pauby/dev
Update to v0.61.1
Latest commit a8efa2d Apr 2, 2018

Theme For Hugo - Skye

(See changelog for latest version and changes)

A dark theme with blue accents for Hugo. Provides multiple configuration options and overrides.


You can find more details on certain features by scrolling down past this list

  • Disqus commenting (fixed for testing with localhost and can be disabled by content)
  • Big cover image (optional)
  • Custom cover by content (optional)
  • Google Analytics (optional and disabled when running on localhost)
  • Font Awesome support (local CSS and using embed code)
  • Site header with tagline
  • Responsive design using CSS flexbox
  • Configurable color scheme
  • Custom site wallpaper
  • Custom CSS that cleans the page up for printing only the page content (try visiting one of the example pages and viewing print preview)
  • Custom shortcodes that I find useful
  • Multiple sidebar widgets, including:
    • Categories list
    • Recent posts list
    • Post tags list (sorted by most common)
    • Twitter timeline
  • Optional authorbox on post pages
  • support for all list pages, including custom content and hiding the list
  • Pagination
  • Custom section landing pages
  • Dynamic site menu that works on desktop and mobile alike - supports seemingly infinite nesting (might look bad on mobile, though)
  • Comments can be enabled/disabled on a per-page basis as well as in the site config
  • Dynamic taxonomy pages that look good on all screen sizes
  • Social icons in the page footer
  • Custom "Error 404" page
  • Custom robots.txt that prevents taxonomy pages from being indexed (e.g. /tags/my_tag)
  • Check out the TODO list

Template config.toml

languageCode = "en-us"
title = "My Website"
baseurl = ""
theme = "BluestNight"
enableRobotsTXT = true # Use custom robots.txt
PygmentsCodeFences = true
PygmentsStyle = "monokai" # Use "igor" for light backgrounds

    tagline = "An example tagline for my Hugo site" # Subtitle of your site
    description = "Here is a description of my site that will appear in search engine results - W00t!" # Description of your site
    cover = "/images/cover.jpg"
    authorbox = true
    authorboxTop = true
    author = "Some Guy" # Name must exist in an entry in /data/members
    postNavigation = false
    RSSLink = ""
    rssDisableSummary = true

    cssAddHead = ["/css/powershellconsole.css" ]
    jsAddHead = [""]	# Javascript URL's to place inside <script src=> tags in the header
    jsAddFoot = [""] 	# Javascript URL's to place inside <script src=> tags in the footer

    fontawesome = true
    fontawesomeCdnEmbedcode = "1234567890"

    readingtimeHide = true

    copyright = "&copy; 2017. Powered by Hugo."

# Custom background for the site
    src = "/path/to/background.png"
    fit_width = true
    tile = false


    loadGoogleFont = [ "Lato", "Libre Franklin" ] 

    main = "Lato"
    postHeader = "Libre Franklin, Arial"
    postText = "Libre Franklin, Arial"
    code = "Courier New"

# These are the default colors used in the theme
# Change them to whatever you'd like
    backgroundPage = "#000000"
    backgroundWindow = "#050505"
    backgroundAlt = "#252525"
    textDefault = "#e2e2e2"
    textAlt = "#e2e2e2"
    accent = "#2c8cef"
    textHeader = "#e2e2e2"

    github = "username" # Your GitHub username
    facebook = "your_fb_id" # Your Facebook ID - the part that comes after on your profile page

    articleRecent = true # Enable "Recent arcticles" widget
    categories = true # Enable "Categories" widget
    tags = true # Enable "Tags" widget
    tagCount = true # Enable tag count on tag widgets
    upcoming_events = false
    my_twitterFeed = true

# This is required for CSS to work
    home = ["HTML", "CSS"]

See Configuration for a detailed explanation of each option.

Displaying Code On Your Site

See the Hugo documentation on this.


If you are going to use Pygments to highlight your code then see below for my suggested configuration within the root section of your config.toml:

PygmentsUseClasses = false
PygmentsCodeFences = true
PygmentsStyle = "monokai"

If you are happy with the default appearance of the the Pygment Styles then use PygmentsStyle variable to your preferred style. Otherwise remove the variable and include your preferred CSS in the page <head>. See cssAddHead.

PygmentsUseClasses = true
PygmentsCodeFences = true
cssAddHead = ["/css/myHighlighter.css"]