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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
# Stip
[](https://travis-ci.com/EmielH/stip-hugo)
Stip is a single-page Hugo theme to introduce yourself. Add a portrait, an introduction, several links, and you're set. The theme was inspired by Material Design's tap target design pattern. [An implementation of this design pattern](https://sjwall.github.io/MaterialTapTargetPrompt/).
## Installation
### 1. Install the theme
If your site is also under version control using git, the easiest way to install this theme is to add it as a submodule. If you have not created a git repo for your project yet, you need to run `git init` beforehand. Inside the folder of your Hugo site, run the following command.
```
git submodule add https://github.com/EmielH/stip-hugo.git themes/stip
```
Alternatively, you can clone the theme into your project.
```
git clone https://github.com/EmielH/stip-hugo.git themes/stip
```
### 2. Configure Hugo
Add the following line to `config.toml` to tell Hugo to use the theme.
```
theme = "stip"
```
Alternatively, you can tell Hugo to use the theme with the `server` command.
```
hugo server -t stip
```
_[Hugo setup guide](https//gohugo.io/overview/installing/)_
### Update the theme
If you have installed the theme as a git submodule, you can update the theme by issuing the following command inside your project folder.
```
git submodule update --remote --rebase
```
If you have cloned the theme, you can run `git pull` inside the theme folder.
## Configuration
### Images
Put your own portrait in `/static/images/portrait.jpg` of your own site, and/or put your own background in `/static/images/background.jpg` of your own site and Hugo wil automatically use those images instead of the standard one. It's not necessary to alter the theme.
### Introduction
Put your own introduction text in `/layouts/partials/introduction.html` of your own site and Hugo wil automatically use that introduction instead of the standard one. It's not necessary to alter the theme.
### Name and bio
Stip will use the name and bio of the author that has been configured in the `Author` section of your site's `config.toml`. Add the lines below to your `config.toml` to configure these.
```
[Author]
name = "Jane Doe"
bio = "Professional coffee drinker"
```
### Links
You can put your own links below the introduction text, for example to link to your social media accounts or to include your e-mail address. These links use icons from FontAwesome. The links can be configured in the `params` section of your site's `config.toml`. This is an example configuration for a link to Github:
```
[params]
[[params.links]]
icon = "github"
title = "Github"
url = "https://github.com/"
```
Stip by default allows you to choose an icon from [the brands set](https://fontawesome.com/icons?d=gallery&s=brands&m=free). Put the name of the icon in the `icon` parameter. This set is the default set because these links will mostly be used for links to social media.
It is possible to use an icon from [the solid set](https://fontawesome.com/icons?d=gallery&s=solid&m=free). To do this, specify the icon set, like this:
```
[[params.links]]
iconset = "fas"
icon = "envelope"
title = "E-mail"
url = "mailto:mail@example.org"
```
### Internationalisation (i18n)
Stip supports using other languages than English. Language files for the texts Stip uses are provided in the `i18n` directory. The default language is English. To switch languages, add the key `defaultContentLanguage` to your `config.toml` file. For example:
```
defaultContentLanguage = "nl"
```
To translate texts your site uses, add an `i18n` folder to your site.
Feel free to submit pull requests for other translations of Stip's texts.
_[Hugo documentation for multilingual sites](//gohugo.io/content-management/multilingual/)_
### Colors
You can alter the colors of your website using configuration options. Add the following to the `[params]` section of your `config.toml` for an alternate color scheme:
```
[params.colors]
background = "#000000"
circle = "#3942ba"
foreground = "#c7d0fc"
hover = "#cd6cf7"
```
* `background`: Th background color of the site. Note that this color usually will not be visible because of the background image.
* `circle`: The background color of the large circle.
* `foreground`: The color of the text and the border of the portrait.
* `hover`: The color of the hover of links.
> **Warning: When using Hugo Basic, you need to perform additional steps to make custom colors work.**
>
> If you get the following error message while building your site, you're using Hugo Basic:
>
> `error: failed to transform resource: TOCSS: failed to transform "style.stip.scss" (text/x-scss): this feature is not available in your current Hugo version`
>
> The SCSS needs to be transpiled for your custom colours, which is something Hugo Basic cannot do. For the standard colours, the transpiled SCSS comes with the theme.
>
> If you're stuck with Hugo Basic, e.g. because your Hugo site is generated on a server that only has Hugo Basic installed, you can get custom colours to work by performing the following steps.
>
> 1. Install Hugo Extended on your local machine.
> 2. Generate your site locally by running `hugo` on your local machine.
> 3. Commit the generated `resources` folder to the root folder of your site. This folder can be found inside the `public` folder after running `hugo`.
>
> Hugo Basic will then use this `resources` folder to find the transpiled SCSS.
## Acknowledgments
Stock portrait photo obtained [here](https://www.pexels.com/photo/woman-holding-disposable-cup-712513/).
Stock background photo obtained [here](https://www.pexels.com/photo/trees-grass-lawn-park-2336/).
## License
See [LICENSE](https://github.com/EmielH/stip-hugo/blob/master/LICENSE).
|
