Giter Site home page Giter Site logo

1bl4z3r / hermit-v2 Goto Github PK

View Code? Open in Web Editor NEW
68.0 1.0 30.0 4.5 MB

Continuing Hermit's legacy to be minimal and fast theme

Home Page: https://1bl4z3r.github.io/hermit-V2/

License: MIT License

JavaScript 4.87% SCSS 27.15% HTML 67.98%
hugo hugo-theme minimal blog-theme theme

hermit-v2's Introduction

hermit-V2 -: The Minimal Hugo Theme

hermit-V2 is a minimal and fast theme for Hugo, built for bloggers who want a simple and focused website. This is a maintained fork of Hermit, which iterates over the original work to have production-ready experience with bug fixes and new features.

History

When I had switched from Jekyll to Hugo, I was in a need of a theme. I was enthralled by this very theme, and I am using it since in my own personal blog. However, it looks like OP has stopped maintaining this theme and as a result, it is riddled with bugs and code breaks. Hence, I have taken upon myself to maintain this theme.The intention of this project is to keep the essence of the theme as-it-is and only add minor updates and squash bugs which may arise.

GoHugo Theme Page : https://themes.gohugo.io/themes/hermit-v2/

Demo

Demo page https://1bl4z3r.github.io/hermit-V2, which is both demo and documentation for the theme, is located in Staging Branch

Configuration Guide

Configuration Guide is present in Explaining Configs

Installation

Run this command from the root of your Hugo directory:

git clone https://github.com/1bl4z3r/hermit-V2 themes/hermit-v2

Or, if your Hugo site is already in git, you can include this repository as a git submodule. This makes it easier to update this theme. For this, you need to run:

git submodule add -b main https://github.com/1bl4z3r/hermit-V2 themes/hermit-v2

To update submodule and to have the latest version of the theme with your project, run

git submodule update --remote

Sites using hermit-V2

Sites using hermit-V2 is a user contributed list of all the blogs/pages that is using hermit-V2 in some capacity. It could be any component of the theme from landing page or a partial to full fledged use of the theme. The objective of this section is to :

  • Help new and aspiring bloggers/webmasters to get inspiration from
  • Create a sense of community

You can find currently listed sites from Sites-using-hermit‐V2 and you can add your site by raising an issue for the same.

First Use Knowledge

Features Inherited from Original Theme

  • A single-column layout and carefully crafted typography offers a great reading experience.
  • Navigation and functions are placed in the bottom-bar which will hide when you scroll down.
  • Featured image is supported. It will be displayed as a dimmed background of the page.
  • Displays all of your posts on a single page, with one section per year, simple and compact.
  • Extremely lightweight and load fast. No third party framework, no unnecessary code.
  • All code fields feature syntax highlighting and a code-copy function
  • Responsive & Retina Ready. Scales gracefully from a big screen all the way down to the smallest mobile phone. Assets in vector format ensures that it looks sharp on high-resolution screens.

Configuration

Site Configuration is done through hugo.toml or hugo.yaml file in root directory of your Hugo Site. To aid you, there is a hugo.toml.example file located in theme folder. See this configuration in action here. See what each configuration does here.

Custom CSS and JS

I have found that there are some requirements where custom CSS and JS should be supplied to a page to make it work. This custom files are not required for the whole of the site, but is restricted to a page or few particular pages. E.g. If you make contact form.

To make use of custom CSS and JS, add the below section to page frontmatter. If there is any folder structure, that should be mentioned as well.

custom_css = ["custom_css/foo.css","custom_css/bar.css"]
custom_js = ["custom_js/custom-about.js"]

The files itself will reside in assets directory. Refer to Staging Branch to have a feel on how this is implemented.

Favicon

Use RealFaviconGenerator to generate these files, put them into your site's static folder:

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • mstile-150x150.png
  • safari-pinned-tab.svg
  • site.webmanifest

SVG Favicons

If your favicon is in SVG format, there are two ways to implement the same in this theme.

  • If you are looking for a clean directory structure, place your favicon as favicon.svg in static directory. In this mode, favicon will not be minified by Hugo
  • If you want your generated site to be as light as possible, place your favicon as favicon.svg in assets/images. In this mode, favicon will be minified by Hugo

Social icons

The following icons are supported, please make sure the name field is exactly one of these:

name
email codepen facebook github
gitlab instagram linkedin slack
stackoverflow telegram twitter youtube
shutterstock freepik adobestock 123rf
dreamstime dribbble behance paypal
twitch qq mastodon discord
etsy tiktok imgur bluesky
medium medium old

If that's not enough, you can see Overriding templates section.

Manage content

  • Keep your regular pages in the content folder. To create a new page, run hugo new page-title.md
  • Keep your blog posts in the content/posts folder. To create a new post, run hugo new posts/post-title.md

Overriding templates

In Hugo, layouts can live in either the project’s (root) or the themes’ layout folders, any template inside the root layout folder will override theme's layout that relative to it, for example: layouts/_default/baseof.html will override themes/hermit/layouts/_default/baseof.html. So, you can easily customize the theme without edit it directly, which makes updating the theme easier. Here are some common customizations:

Customize social icons

You can modify or add any SVG icons in site's layouts/partials/svg.html.

Customize comment system

We only have built-in support for Disqus at the moment, if that doesn't fit your needs, you can just add HTML to site's layouts/partials/comments.html.

Add custom analytics

If you prefer to use different analytics system other than Google Analytics, then add them inside layouts/partials/analytics.html.

Customize CSS

  1. Change predefined colors/effects - If you'd like to customize theme color or fonts, you can simply override assets/scss/_predefined.scss, by simply copy it to site's root (keep the same relative path) then edit those variables.
  2. Change CSS effects limited to single page or few pages - Add following to your page FrontMatter custom_css = ["custom_css/foo.css","custom_css/bar.css"], and add the relevant SCSS files in assets directory. You may find additional help in Custom CSS and JS.
  3. Change css styling sitewide - If you are unhappy with how the theme looks and feels and want to change some (or all) of it to make it truly your own, you can do so by adding assets/scss/userstyles.scss to your site's root and modify Stylesheets to your liking.

You'll need Hugo extended version, which has the ability to rebuild SCSS. You don't have to use extended version in production, but in this case it's necessary to make sure the resources folder is committed and "up to date" (by running hugo or hugo server locally using the extended version). But anyway, always use the extended version if you can.

Code injection

You can inject any HTML code to every page's document head or right above the closing body tag. This makes it easier to add any HTML metadata, custom css/js, DNS-prefetch etc. To do this you simply need to create a file at site's layouts/partials/extra-head.html or layouts/partials/extra-foot.html, code inside will be injected to every page.

LaTeX in Markdown

LaTeX is supported by this theme through Mathjax. Please check explaining-configs to learn more.

Acknowledgments

hermit-v2's People

Contributors

1bl4z3r avatar abhinav1107 avatar actions-user avatar adamhsparks avatar agausmann avatar aliavni avatar antsanchez avatar arongergely avatar astropenguin avatar baa14453 avatar ceriath avatar chiefmatestarbuck avatar cristiandonosoc avatar davidfeng88 avatar detunized avatar dlespiau avatar fastbyte01 avatar guitarpawat avatar hervyqa avatar igaryhe avatar jh220 avatar kevinm416 avatar maikelchan avatar moorara avatar pin3da avatar ruddra avatar semanticdata avatar sieboldianus avatar track3 avatar xuhdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

hermit-v2's Issues

themeColor in hugo.toml does not appear to function as expected

Hi!

Maybe I'm misunderstanding the purpose of the themeColor option in hugo.toml, but I can't get it to work as it should.

In the example, this is set to '#494f5c'

themeColor = "#494f5c"

And this does match the background colour I get when I use this value in my hugo.toml. But if I change this value, I can't see what changes.

From what I can tell, most of the theme colour values are hard-coded in _predefined.scss:

$theme: #018574;
$text: #e8eef2;
$light-grey: #494f5c;
$dark-grey: #3B3E48;
$highlight-grey: #7d828a;
$midnightblue: #2c3e50;

And I can't really see where themeColor actually gets used, apart from here:

{{ with .Site.Params.themeColor -}}

But I'm not sure it's working correctly. Any ideas?

Request: ability to disable "Made with Hugo" in `footer.html`

When migrating from Hermit to Hermit-V2, looking at footer.html, it seems there is a change where it add "Made with Hugo" and "Theme Hermit-V2":

image

Any chance you'd be willing to add a config flag to disable those additions? I prefer to have a smaller footer.


Trying to copy layouts/partials/footer.html into my own project dir, and modify it myself for now, I get the below error when running hugo server -D:

Error: error building site: TOCSS: failed to transform "css/style.css" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

So maybe if you don't want to add new config flags, how can I override the layouts/partials/footer.html myself?

Request: code block limiting width with scroll bar

As of version 1.0.0, looking at the example site's MathJax post: https://1bl4z3r.github.io/hermit-V2/posts/mathjax-support/

The left/right scrolling is huge due to the first code block in the configuration section.

Any thoughts on having the scrolling limited to within the code block (and not the entire page)?

As an example, check out the code blocks here work (left/right scrolling is scoped to the code block): https://blowfish.page/docs/shortcodes/#alert

File to import not found or unreadable: userstyles.scss.

I keep getting the following error when trying to use a userstyles.scss file.

Error: error building site: TOCSS: failed to transform "css/style.css" (text/x-scss): "/home/uzair/Documents/git/test/themes/hermit-v2/assets/scss/style.scss:10:1": File to import not found or unreadable: userstyles.scss.

I have my userstyles.scss file under assets/scss/ as per the README but I see that userstyles.scss is being checked at assets/scss/userstyles.scss and then it tries to import userstyles.scss from the project root.

{{ if (fileExists "assets/scss/userstyles.scss") }}
@import "userstyles.scss";
{{ end }}

If I create an empty userstyles.scss in assets/scss/ folder and have the actual one at the project root then things work fine.

Request: `shareSocial` option to copy link to clipboard

Here is what my current share menu looks like (as of 3eabdaf), and it looks great. 🥳

screenshot of share menu

For many share features on other website, a sharing option is supported that copies the page's hyperlink to the clipboard. On Google Chrome's mobile app, this sharing option is called "Copy link".

My request here: add a share option for just copying the page's link to the clipboard

Update README

Update README so that new users can install your repo as a git submodule instead of still using the original repo.

[BUG] If RSS is disabled (Add "RSS" to disableKinds), the footer RSS icon is still visible and leads to a 404 page

Describe the bug
After disabling RSS in hugo.toml via disableKinds = ["RSS"], the footer RSS icon is still visible, and it links to a 404 page.

To Reproduce
Steps to reproduce the behavior:

  1. Add disableKinds = ["RSS"] to hugo.toml.
  2. Build the site.
  3. Note that the RSS icon is visible and clicking on it leads to a 404 page.

Expected behavior
RSS icon should become invisible.

Hugo (please complete the following information):

  • Hugo: v0.124.1
  • Extended? yes
  • Latest hermit-V2 theme package? yes

LinkedIn Share button not working

When turning on shareSocial in my config, I observed the LinkedIn share isn't working for me. When I click the link, here's what I get:

screenshot of LinkedIn share failure

When running hugo server -D, here is the URL behind the LinkedIn icon that leads to this error page: https://www.linkedin.com/shareArticle?mini=true&url=http%3a%2f%2flocalhost%3a1313%2ftags%2f&title=Tags&summary=Tags%2c%20by%201248%0a%3cnil%3e%0a%0ahttp%3a%2f%2flocalhost%3a1313%2ftags%2f%0a&source=http%3a%2f%2flocalhost%3a1313%2f

Unintended side effect of `[params.author]`

The fix in 556699f has a side effect, which is my site starts using the hermit-V2's about option from the repo's hugo.toml:

about = "about-hugo"

It leads to this error:

> hugo server -D
...
hugo v0.120.3-a4892a07b41b7b3f1f143140ee4ec0a9a5cf3970+extended darwin/arm64 BuildDate=2023-11-01T17:57:00Z VendorInfo=gohugoio

ERROR [en] REF_NOT_FOUND: Ref "about-hugo" from page "posts/post-title.md": page not found

The issue arises because my About post in content/ is not named about-hugo, it's just named about.

Fix option 1 (falls onto users): when migrating to [params.author], one has to override both name and about:

[params.author]
name = "James Braza"
about = "about"

Fix option 2 (falls onto hermit-v2): removing the [params.author] section from the main branch's hugo.toml

What do you think? I am not sure which is the better route.

Release v1.0.12 breaks builds unless blank assets/scss directory exists in project root

Hi! Thanks for the great theme 😄

The latest v1.0.12 build causes an error to be thrown when the theme is cloned as a submodule of a repository which does not have an assets/scss directory due to the addition of this code:

{{ if (where (readDir "assets/scss") "Name" "userstyles.scss") }}
@import "userstyles.scss";
{{ end }}

$ hugo serve
Start building sites … 
hugo v0.111.3+extended linux/amd64 BuildDate=2023-03-16T08:41:31Z VendorInfo=debian:0.111.3-1
Error: Error building site: EXECUTE-AS-TEMPLATE: failed to transform "scss/style.scss" (text/x-scss): template: scss/style.scss:9:14: executing "scss/style.scss" at <readDir "assets/scss">: error calling readDir: failed to read directory "assets/scss": open /home/path/to/repo/assets/scss: no such file or directory
Built in 18 ms

I'm guessing this is down to the fact that although an if is being used, the readDir tries to read the contents of assets/scss before the if is invoked. Maybe there's another if statement that could be nested in here to avoid failing out if the directory doesn't exist.

It's not a showstopping issue, because creating an empty assets/scss directory is enough to make this work as it did before, but it might be one to call out in the README for new users that this directory needs to exist. I only noticed this so easily because the theme previously worked and I was able to see quite quickly from the recent commits what the cause was. I think a user who is newer to the theme might just be puzzled by this one.

Can not build on hugo v0.120.x

hugo v0.120.1 was rolled out yesterday and my Ubuntu snap package force-updated from v0.119.x.

Now I get the following errors when trying hugo serve:

ERROR render of "taxonomy" failed: "/home/aron/dev/rasterra/hermit-V2/layouts/_default/baseof.html:13:4": execute of template failed: template: _default/list.html:13:4: executing "_default/list.html" at <partial "structured-data.html" .>: error calling partial: execute of template failed: template: _internal/opengraph.html:47:9: executing "_internal/opengraph.html" at <site>: can't evaluate field facebook_admin in type []interface {}
Error: error building site: render: failed to render pages: render of "home" failed: "/home/aron/dev/rasterra/hermit-V2/layouts/_default/baseof.html:13:4": execute of template failed: template: index.html:13:4: executing "index.html" at <partial "structured-data.html" .>: error calling partial: execute of template failed: template: _internal/opengraph.html:47:9: executing "_internal/opengraph.html" at <site>: can't evaluate field facebook_admin in type []interface {}

The problem

in v0.120.0 they deprecated site.Social in favor of site.Params.social.
Internal templates like _internal/opengraph.html are now looking for parameters there. (see gohugoio/hugo@4910312)
This collides with the definition in theme's hugo.toml. (array of social media links)

Internal templates do not expect an array, so we get the error above.

Proposed solution

Probably to change [[params.social]] entries in hugo.toml to something else e.g. [[params.socialLinks]].
The site builds fine when I change or remove said entries.

Request: `index.html` using `footer.html` partial

In #28 I was able to override my footer.html partial.

However, I discovered index.html doesn't use the footer.html partial. Can we move index.html to either:

  • Move home-footer.html to a partial that can be overridden
  • Have index.html use the footer.html partial

Thank you in advance for your consideration

[feature request] A wechat icon (or actually, an icon tutorial?)

Hi.

I'm using hermit previously and found hermit-v2 last weekend. Thank you @1bl4z3r for releasing this, and there are a lot of new exciting features.

There are a lot of social icon available, but it's always not enough, as people in different area / country may use different social media. I customized a WeChat icon in my hermit blog. Since hermit-v2 imports "share" feature, it's not working well in main page and share button (at the same time).

So I would like to know how a suitable social icon could be created, and what's the guideline I should follow with, so that we don't have to do "feature request" but just submit a pull request to add support for hermit-v2.

Here I have some svg examples of WeChat. (codes here and here ). I would like to ask what size (height & weight) / color / etc... should I use

微信wechat-line
微信

[BUG] - Error: error building site: render: failed to render pages

Describe the bug

I've upgraded hermit-V2 theme in my blog from v1.0.5 to the latest - v1.1.4
and the build had failure (detailed output in Terminal Output section),
as my understanding the problem is here:

https://github.com/1bl4z3r/hermit-V2/blob/main/layouts/_default/baseof.html#L19

{{ $c_css := resources.Get . | resources.ExecuteAsTemplate "css/style.css" $rootCtx | toCSS | minify | fingerprint -}}

I'm surprised because as I see empty css/style.css exists in theme,
maybe this is misconfiguration of hugo (my fault) or blog configuration conflict to theme, but all works find before (on v.1.0.5).

Could you please check it?

hermit changes

To Reproduce
Have no idea, it seems the fastest way to reproduce the bug its just clone the blog and run hugo build:

  1. Clone https://github.com/1buran/blog (it is not large - 1 post and little bit of css)
  2. Run hugo build

Terminal Output

$ hugo -Dw --logLevel debug server
Watching for changes in /home/buran/projects/blog/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /home/buran/projects/blog/hugo.toml
Start building sites … 
hugo v0.123.7+extended linux/amd64 BuildDate=unknown

INFO  build:  step process substep collect files 3 files_total 3 duration 2.11206ms
INFO  build:  step process duration 2.368108ms
INFO  build:  step assemble duration 3.116779ms
INFO  static: syncing static files to / duration 15.526749ms
INFO  deprecated: .Site.DisqusShortname was deprecated in Hugo v0.120.0 and will be removed in a future release. Use .Site.Config.Services.Disqus.Shortname instead.
INFO  build:  step render pages 13 content 10 duration 108.256449ms
INFO  build:  step postProcess duration 8.529µs
INFO  build:  duration 114.262578ms
Built in 115 ms
Error: error building site: render: failed to render pages: render of "page" failed: "/home/buran/projects/blog/themes/hermit-v2/layouts/_default/baseof.html:19:40": execute of template failed: template: _default/single.html:19:40: executing "_default/single.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations

Expected behavior
Missed css/style.css should not be cause build failure.

Hugo (please complete the following information):

  • Hugo: v0.123.7+extended
  • Extended? yes (Im not sure what does this mean, answered based on hugo version suffix)
  • Latest hermit-V2 theme package? yes

Additional context
Archlinux

Few icons don't render.

Discord, Twitter and few other icons don't render properly for me.

How it looks on my website.
image

Code snippet from the Elements:
image

Recent code changes to `main` branch?

The recent changes have been awesome, I am looking to use them now.

Either:

  • I can set my git submodule to use the staging branch
  • hermit-V2's main branch can be updated

Do you mind updating the main branch? I think having the example site diverge from the main branch can be confusing to new users

Very happy to see this!!

I am a fan of Hugo's Hermit theme, and use it for my blog onetwofoureight.com.

I was going to change theme to one with a page sharing feature, however, I came across this today. And coincidentally, the v1 release was this morning, haha wow!

Very excited to transition to this, cheers!

Request: ability to disable last modified timestamp

screenshot of last modified

I see this is part of single.html in v1.0.2, where it has an if .Lastmod conditional.

Any chance we can expose a new config parameter to turn off this behavior? I like the default "creation only" timestamp. Alternately, maybe a post front matter parameter could be useful too

Request: repositioning `post-end` when `legacyLayout = true`

When legacyLayout = true, I find the post-end bar seems to be in the wrong place. See the below screenshot:

screenshot of post-end

I think a few options for when legacyLayout = true:

  • Disable post-end in favor of art-end
  • Disable art-end and move post-end above the metadata (what hermit v1 has)

What do you think? Thanks in advance

[BUG] - 404 page should include a `noindex` meta

Describe the bug

404 page should not be indexed by the search engine. Per https://developers.google.com/search/docs/crawling-indexing/block-indexing, this can be done by adding a noindex meta to the page.

Even though this page does not appear in sitemap.xml and search engine won't discover it in the first place, but if someone posts a misspelled link to the site somewhere else, search engines would inadvertently indexed the page through the link.

Placing post metadata on bottom of post

The original hermit theme placed post metadata like tags, Git commit, and word count on the bottom of the post.

It seems hermit-V2 is placing that metadata on the top of a post. Is there any way to control if metadata goes at the top or bottom or the page?

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.