Skip to content

Latest commit

 

History

History
48 lines (36 loc) · 3.56 KB

README.md

File metadata and controls

48 lines (36 loc) · 3.56 KB
Raw

hugo-future-imperfect

A modern theme for the Hugo static site generator.

This is a heavily modified version of Julio Pescador's Future Imperfect, which itself is a port of HTML5 UP's theme by the same name. The latest version can be seen at my personal website reillywood.com.

Dark mode screenshot

What's new since @jpescador's version?

This is a very large rewrite focused on styling, performance, and developer tooling. I've done the following:

  1. Rewrote the CSS using Tailwind CSS
    1. The original Hugo theme worked well, but it had 3000 lines of CSS in a single file - it was very difficult to make styling changes
    2. Tailwind's generated CSS is automatically pruned using PurgeCSS as part of a PostCSS workflow to keep file sizes down
    3. The layout looks roughly the same as before, but I've made a lot of small tweaks and rewritten how categories look
  2. Added a dark mode using the new prefers-color-scheme media query and the Solarized colour scheme
  3. Rewrote the JavaScript to remove the dependency on JQuery
  4. The full FontAwesome icon set has been replaced with a custom font from IcoMoon that only contains the icons used in the website
    • Yes, I went a bit overboard with performance
  5. Replaced the Fancybox lightbox with a customized Flickity implementation
    • This allows for nicer fullscreen interactions, image carousels, and best of all – no JQuery
  6. Replaced the highlight.js client-side code syntax highlighting with Hugo's compile-time highlighting.
  7. The theme now uses Hugo's built-in bundling and minification for CSS and JS files.
  8. Generated HTML is automatically formatted using Prettier
  9. CSS is automatically linted using Stylelint
  10. There are new shortcodes for images, email obfuscation, card elements...
  11. Site search is now done with DuckDuckGo instead of Google
  12. Social sharing functionality has been removed

Basic Setup

  1. Edit config.toml. This is where most configuration occurs.
  2. Replace the /static/img/main/headshot.jpg file with a photo of yourself (unless you look a lot like me)
  3. Create a new post with hugo new blog/post-name.md
  4. npm run serve-dev and enjoy!

OK, what's the catch?

This is still a work in progress, and it's heavily customized for my own needs. There are some places where I've hardcoded values that are only relevant to me – but they should be pretty easy to swap out.

Some parts that I think are especially in need of attention:

  1. The CSS for my custom Flickity implementation is a bit hacky, it should be rewritten
  2. srcset for responsive images in Flickity is disabled for now, it kept loading the responsive image and the non-responsive fallback image. Spend some time figuring this out
  3. I have not implemented error code pages (404 etc.) in the same style as the rest of the site
  4. Need to spend a couple hours tidying this up for public use – move hardcoded functionality into Hugo variables, remove all obsolete functionality from the old theme