Skip to content

Commit

Permalink
Hermit-V2 Theme Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@actions-user
actions-user committed Jan 5, 2024
1 parent 2569706 commit 93f7434
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 21 deletions.
33 changes: 19 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

> OG : [Hermit Theme](https://github.com/Track3/hermit) by [Track3](https://github.com/Track3)
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](https://github.com/Track3/hermit), which iterates over the original work to have a almost-stable experience with bug fixes and new features.
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](https://github.com/Track3/hermit), which iterates over the original work to have production-ready experience with bug fixes and new features.

![](https://github.com/1bl4z3r/hermit-V2/blob/main/images/screenshot.png)

### 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]((https://github.com/Track3)) 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. 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.
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]((https://github.com/Track3)) 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/](https://themes.gohugo.io/themes/hermit-v2/)
## Demo

Demo page [https://1bl4z3r.github.io/hermit-V2](https://1bl4z3r.github.io/hermit-V2), which is both demo as well as documentation for the theme, is located in [Staging Branch](https://github.com/1bl4z3r/hermit-V2/tree/staging)
Demo page [https://1bl4z3r.github.io/hermit-V2](https://1bl4z3r.github.io/hermit-V2), which is both demo and documentation for the theme, is located in [Staging Branch](https://github.com/1bl4z3r/hermit-V2/tree/staging)

## Configuration Guide

Expand All @@ -28,13 +28,13 @@ 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](https://git-scm.com/book/en/v2/Git-Tools-Submodules). This makes it easier to update this theme. For this you need to run:
Or, if your Hugo site is already in git, you can include this repository as a [git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules). This makes it easier to update this theme. For this, you need to run:

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

To update submodule and to have latest version of the theme with your project, run
To update submodule and to have the latest version of the theme with your project, run
```bash
git submodule update --remote
```
Expand All @@ -44,7 +44,7 @@ git submodule update --remote
### Features Inherited from Original Theme

* A single-column layout and carefully crafted typography offers a great reading experience.
* Navigations and functions are placed in the bottom bar which will hide when you scroll down.
* 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.
Expand All @@ -59,7 +59,7 @@ Site Configuration is done through `hugo.toml` or `hugo.yaml` file in root direc

### Custom CSS and JS

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

Expand Down Expand Up @@ -96,7 +96,7 @@ The following icons are supported, please make sure the `name` filed is exactly
| `shutterstock` | `freepik` | `adobestock` | `123rf` |
| `dreamstime` | `dribbble` | `behance` | `paypal` |
| `twitch` | `qq` | `mastodon` | `discord` |
| `etsy` | `tiktok` | `imgur | `bluesky` |
| `etsy` | `tiktok` | `imgur` | `bluesky` |
| `medium` | `medium old`| | |

If that's not enough, you can see [Overriding templates](#overriding-templates) section.
Expand All @@ -108,24 +108,29 @@ If that's not enough, you can see [Overriding templates](#overriding-templates)

### 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's some common customizations:
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`.
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`.
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`.
If you prefer to use different analytics system other than Google Analytics, then add them inside `layouts/partials/analytics.html`.

### Customize CSS

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. But keep in mind, 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.
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](#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 meta data, 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.
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.

## Acknowledgments

Expand Down
10 changes: 3 additions & 7 deletions assets/scss/_predefined.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// Colors
//
$theme: #018574;
$text: #e8eef2;
$light-grey: #494f5c;
Expand All @@ -9,12 +8,10 @@ $midnightblue: #2c3e50;
$typewriter: hsl(172, 100%, 36%);

// Fonts
//
$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";

//Admonition
//
$admonition-background: (
'note': rgba(68, 138, 255, 0.1),
'info': rgba(0, 184, 212, 0.1),
Expand All @@ -24,7 +21,7 @@ $admonition-background: (
'failure': rgba(255, 82, 82, 0.1),
'danger': rgba(255, 23, 68, 0.1),
'bug': rgba(245, 0, 87, 0.1),
) !default;
) !default;

$admonition-color: (
'note': #448aff,
Expand All @@ -35,10 +32,9 @@ $admonition-color: (
'failure': #ff5252,
'danger': #ff1744,
'bug': #f50057,
) !default;
) !default;

// Mixins
//
@mixin dimmed {
opacity: .6;
}
Expand All @@ -55,4 +51,4 @@ $admonition-color: (
box-shadow: inset 0 -1em 0 $theme;
}
}
}
}
3 changes: 3 additions & 0 deletions assets/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
@import "_admonition.scss";
@import "_mathjax.scss";
@import "_socialshare.scss";
{{ if (where (readDir "assets/scss") "Name" "userstyles.scss") }}
@import "userstyles.scss";
{{ end }}

/* Webkit Scrollbar Customize */
::-webkit-scrollbar {
Expand Down

0 comments on commit 93f7434

Please sign in to comment.