1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
# min_night
Blogs are for reading and sharing. This theme tries to make both of those better.
`min_night` is built on top of [Minimal](https://github.com/calintat/minimal), and keeps a lot of the cool original features:
- Bootstrap
- GoogleFonts
- FontAwesome
- HighlightJS
It also gets a bunch of new add-ons:
- A night-mode toggle, with HTML5 storage to remember view preferences
- OpenGraph and TwitterCard meta tags for upgrading your social sharing
- Favicon support via the [RealFaviconGenerator](https://realfavicongenerator.net/)
- A site logo for index.html (headshot, hexsticker...its up to you)
- A tags/categories list page template from [Xmin](https://github.com/yihui/hugo-xmin)
- Updated tag labels to hyperlinks (categories too)
- Tweaked list templates for posts and projects
A live demo is available [here](https://natedayta.com).
## Installation
Installing Hugo themes as submodules is best.
This is how you can get starting with `min_night` using the [QuickStart tutorial](https://gohugo.io/getting-started/quick-start/). Run each line individually.
```bash
hugo new site quick
cd quick
git init
git submodule add https://github.com/nathancday/min_night.git themes/min_night
cp -r themes/min_night/exampleSite/ .
hugo server -D
```
Now your brand new site is being served locally at `localhost:1313`.
Submodules are better because it makes updating the theme easier for future you.
```
$ git submodule update --remote themes/min_night
```
Personally I use this theme via the `R` package `blogdown`, and you can too like this:
```
library(blogdown)
new_site(theme = "nathancday/min_night")
```
## Configuration
To configure most of the customizations in this theme all you need to do is edit the parameters in `quick/config.toml`.
### Colors
- The accent colour can be changed by using the `accent` field in `config.toml`. This is the color of the navbar and footer in day-mode and this is also the color of the body background of your site in night-mode. Dark colors work best.
- You can also change the background color of the main page by using `backgroundColor`. Default is light grey for easy eye reading. The navbar and footer are always light and dark in the their respective modes.
Example:
```toml
[params]
accent = "#006264"
backgroundColor = "#f5f5f5"
```
You should always use hex codes.
### Fonts
The theme uses [Google Fonts](https://fonts.google.com) to load its font. To change the font:
```toml
[params]
font = "Mina" # should match the name on Google Fonts!
```
### Syntax highlighting
The theme supports syntax highlighting thanks to [highlight.js](https://highlightjs.org). You can change the color scheme via the `highlightStyle` param. Checkout out the options [here](https://highlightjs.org/static/demo/), make sure your main languages render well. You control the languages that are highlighted with the `highlightLanguages` param.
For best aesthetics with dark-mode, I reccommend choosing a light background style that matches your `accent` color.
```toml
[params]
highlight = true
highlightStyle = "solarized-dark"
highlightLanguages = ["r", "go"]
```
The style and languages should be written in hyphen-separated lowercase.
### Favicons
This theme comes equipped with stock favicons modeled as hex stickers.
To update those, pick out an image of your choosing head over to [RealFaviconGenerator](https://realfavicongenerator.net/) and go through their process. Be sure to append the path `/img/favicon/` at the last step or be prepared to edit the `header.html` file by hand. Download, unzip and place your new files in `quick/static/`. Now you have favicons for everything, branding!
The site logo defaults to using the 192x192 Android favicon but you can change the path for `logo` param in `config.toml`
### Social Sharing
The current set up has two TwitterCard/OpenGraph options depending on the params you specify in your post's front matter. If you add the param `twitter_img` to a post, with the valid image path, then a summary card with large image will be shown. If you don't provide `twitter_img` then a summary card with the site logo will be shown instead. For best scaling large image summary wants a 2:1 ratio image and regular summary wants 1:1. The post `exampleSite/creating-a-new-theme.md` has been tweaked to include these new params, so you can template and test off of that.
The summary description will use the one provided in a post's front matter if it exists or use the generic site description from `config.toml`. You should also adjust the `twitterAuthor` and `twitterSite` params in `config.toml` to point to your account. You can check how your cards are rendering once your website is being publish with the [TwitterCard Validator](https://cards-dev.twitter.com/validator).
## Going forward
This theme is something I have been working on for the last 6-months and feel like it is finally ready (enough) to share with the world. I'm sure there a wrinkles in some of it that I have yet to find, so if you get unexpected behavior post an issue and try to keep it as minimal as possible. Ideally bug reports would be reproducible using the [QuickStart tutorial](https://gohugo.io/getting-started/quick-start/) plus whatever changes cause the problem.
Pull requests are literally the best thing since ever, so if you have the idea (and the time) to add something to `min_night` do it! I promise I will respond quickly.
Happy blogging!
|
