├── layouts ├── 404.html ├── partials │ ├── header.html │ ├── footer.html │ ├── introduction.html │ └── head.html ├── _default │ └── baseof.html └── index.html ├── exampleSite ├── content │ └── .gitkeep └── config.toml ├── archetypes └── default.md ├── .gitattributes ├── images ├── tn.png └── screenshot.png ├── static ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── images │ └── portrait.jpg ├── android-chrome-192x192.png ├── android-chrome-512x512.png └── site.webmanifest ├── resources └── _gen │ └── assets │ └── scss │ └── scss │ ├── hallo.scss_11dec6d354e63d78237f08052de7276c.json │ ├── hallo.scss_d4f8b6498aaf27d34862c7e8a62b88f3.json │ ├── hallo.scss_d4f8b6498aaf27d34862c7e8a62b88f3.content │ └── hallo.scss_11dec6d354e63d78237f08052de7276c.content ├── i18n ├── nl.toml ├── en.toml ├── de.toml └── fr.toml ├── assets └── scss │ ├── hallo.scss │ └── hallo │ ├── _variables.scss │ ├── _base.scss │ └── _layout.scss ├── theme.toml ├── .travis.yml ├── LICENSE └── README.md /layouts/404.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /exampleSite/content/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | +++ 2 | +++ 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | resources/** -diff -merge 2 | resources/** linguist-generated=true -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/images/tn.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/apple-touch-icon.png -------------------------------------------------------------------------------- /static/images/portrait.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/images/portrait.jpg -------------------------------------------------------------------------------- /static/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmielH/hallo-hugo/HEAD/static/android-chrome-512x512.png -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/hallo.scss_11dec6d354e63d78237f08052de7276c.json: -------------------------------------------------------------------------------- 1 | {"Target":"css/style.css","MediaType":"text/css","Data":{}} -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/hallo.scss_d4f8b6498aaf27d34862c7e8a62b88f3.json: -------------------------------------------------------------------------------- 1 | {"Target":"css/style.css","MediaType":"text/css","Data":{}} -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /i18n/nl.toml: -------------------------------------------------------------------------------- 1 | [hello] 2 | other = "Hallo" 3 | 4 | [i-am] 5 | other = "Ik ben" 6 | 7 | [generator] 8 | other = "Gemaakt met Hugo en thema Hallo." -------------------------------------------------------------------------------- /i18n/en.toml: -------------------------------------------------------------------------------- 1 | [hello] 2 | other = "Hello" 3 | 4 | [i-am] 5 | other = "I am" 6 | 7 | [generator] 8 | other = "Made with Hugo using the Hallo theme." 9 | -------------------------------------------------------------------------------- /i18n/de.toml: -------------------------------------------------------------------------------- 1 | [hello] 2 | other = "Hallo" 3 | 4 | [i-am] 5 | other = "Ich bin" 6 | 7 | [generator] 8 | other = "Gemacht mit Hugo mit dem Thema Hallo." 9 | -------------------------------------------------------------------------------- /i18n/fr.toml: -------------------------------------------------------------------------------- 1 | [hello] 2 | other = "Bonjour" 3 | 4 | [i-am] 5 | other = "Je suis" 6 | 7 | [generator] 8 | other = "Fabriqué avec Hugo en utilisant le thème Hallo." 9 | -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{- partial "head.html" . -}} 4 | 5 | {{- partial "header.html" . -}} 6 | {{- block "main" . }}{{- end }} 7 | {{- partial "footer.html" . -}} 8 | 9 | 10 | -------------------------------------------------------------------------------- /layouts/partials/introduction.html: -------------------------------------------------------------------------------- 1 | Hallo is a single-page Hugo theme to introduce yourself. Add a portrait, an introduction, several links, and you're set. Create a partial called introduction.html on your own site to replace this standard introduction. Create a file called portrait.jpg in static/images to replace the standard portrait. -------------------------------------------------------------------------------- /assets/scss/hallo.scss: -------------------------------------------------------------------------------- 1 | // Colours 2 | $color-background: {{ .Site.Params.colors.background | default "#6fcdbd" }}; 3 | $color-foreground: {{ .Site.Params.colors.foreground | default "#fff" }}; 4 | $color-hover: {{ .Site.Params.colors.hover | default "#333" }}; 5 | 6 | @import 'hallo/variables'; 7 | @import 'hallo/base'; 8 | @import 'hallo/layout'; 9 | -------------------------------------------------------------------------------- /assets/scss/hallo/_variables.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; 3 | 4 | // Responsive breaks 5 | $break-extra-small: 575px; 6 | $break-small: 576px; 7 | $break-medium: 768px; 8 | $break-large: 992px; 9 | $break-extra-large: 1200px; 10 | 11 | @mixin transition($args...) { 12 | -webkit-transition: $args; 13 | -moz-transition: $args; 14 | transition: $args; 15 | } 16 | -------------------------------------------------------------------------------- /static/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | # theme.toml template for a Hugo theme 2 | # See https://github.com/gohugoio/hugoThemes#themetoml for an example 3 | 4 | name = "Hallo" 5 | license = "MIT" 6 | licenselink = "https://github.com/EmielH/hallo-hugo/blob/master/LICENSE" 7 | description = "Hallo is a single-page Hugo theme to introduce yourself." 8 | homepage = "https://github.com/EmielH/hallo-hugo" 9 | tags = ["minimal", "clean", "responsive", "simple", "personal", "starter", "single page", "onepage", "Font Awesome", "landing page"] 10 | features = [] 11 | min_version = "0.43" 12 | 13 | [author] 14 | name = "Emiel Hollander" 15 | homepage = "https://www.emielhollander.nl" 16 | -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "https://example.com/" 2 | languageCode = "en" 3 | defaultContentLanguage = "en" 4 | title = "Hallo" 5 | theme = "hallo" 6 | disableKinds = ["page", "section", "taxonomy", "taxonomyTerm"] 7 | 8 | [params.author] 9 | name = "Hallo" 10 | 11 | [params] 12 | 13 | [[params.links]] 14 | iconset = "fas" 15 | icon = "envelope" 16 | title = "E-mail" 17 | url = "mailto:mail@example.org" 18 | 19 | [[params.links]] 20 | icon = "github" 21 | title = "Github" 22 | url = "https://github.com/" 23 | 24 | [[params.links]] 25 | icon = "twitter" 26 | title = "Twitter" 27 | url = "https://twitter.com/" 28 | 29 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | env: 2 | - HUGO_VERSION="0.50" 3 | - HUGO_VERSION="0.51" 4 | - HUGO_VERSION="0.52" 5 | - HUGO_VERSION="0.53" 6 | - HUGO_VERSION="0.54.0" 7 | - HUGO_VERSION="0.55.6" 8 | - HUGO_VERSION="0.56.3" 9 | - HUGO_VERSION="0.57.2" 10 | - HUGO_VERSION="0.58.3" 11 | - HUGO_VERSION="0.59.1" 12 | - HUGO_VERSION="0.60.1" 13 | - HUGO_VERSION="0.61.0" 14 | 15 | install: 16 | - wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz 17 | - tar xf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz 18 | - mv hugo ~/bin/ 19 | - hugo version 20 | - gem install html-proofer 21 | 22 | script: 23 | - cd exampleSite 24 | - hugo -t hallo-hugo --themesDir ../.. 25 | - htmlproofer public --check-html --disable-external 26 | -------------------------------------------------------------------------------- /assets/scss/hallo/_base.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | color: $color-foreground; 4 | margin: 1rem; 5 | padding: 0; 6 | } 7 | 8 | html { 9 | font-family: $sans-serif; 10 | font-size: 16px; 11 | overflow-y: auto; 12 | } 13 | 14 | body { 15 | background-color: $color-background; 16 | } 17 | 18 | a { 19 | @include transition(color .2s ease-out); 20 | color: $color-foreground; 21 | 22 | &:hover { 23 | color: $color-hover; 24 | } 25 | } 26 | 27 | h1 { 28 | font-size: 9rem; 29 | } 30 | 31 | h2 { 32 | font-size: 3rem; 33 | font-weight: normal; 34 | } 35 | 36 | h3 { 37 | font-size: 2rem; 38 | font-weight: normal; 39 | } 40 | 41 | @media screen and (max-width: $break-large) { 42 | h1 { 43 | font-size: 15vw; 44 | } 45 | 46 | h2 { 47 | font-size: 2.5rem; 48 | } 49 | } 50 | 51 | img.portrait { 52 | box-sizing: border-box; 53 | border-radius: 50%; 54 | border: 10px solid $color-foreground; 55 | margin: 2em 3em; 56 | width: 100%; 57 | height: auto; 58 | max-width: 300px; 59 | max-height: 300px; 60 | } 61 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-2019 Emiel Hollander 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/hallo.scss_d4f8b6498aaf27d34862c7e8a62b88f3.content: -------------------------------------------------------------------------------- 1 | html,body{color:#fcfdf3;margin:1rem;padding:0}html{font-family:Montserrat,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto}body{background-color:#acbb21}a{-webkit-transition:color 0.2s ease-out;-moz-transition:color 0.2s ease-out;transition:color 0.2s ease-out;color:#fcfdf3}a:hover{color:#6b7515}h1{font-size:9rem}h2{font-size:3rem;font-weight:normal}h3{font-size:2rem;font-weight:normal}@media screen and (max-width: 992px){h1{font-size:15vw}h2{font-size:2.5rem}}img.portrait{box-sizing:border-box;border-radius:50%;border:10px solid #fcfdf3;margin:2em 3em;width:100%;height:auto;max-width:300px;max-height:300px}.column{flex:1}main .block{display:flex}main .block.introduction{margin-top:20vh;min-height:calc(100vh - 20vh)}main .column.left{text-align:end}main .column.right h1{margin-left:-10px;margin-bottom:0.4em}main .column.right h2{margin-left:-4px;margin-top:0}main .column.right .links{margin-top:2.5rem;font-size:1.5rem}main .column.right .links a{margin-right:0.5rem;text-decoration:none}@media screen and (max-width: 992px){main .block{flex-direction:column}main .block.introduction{margin-top:0}main .column.left{text-align:center}main .column.right h1{margin-top:0}main img.portrait{margin:0}}footer{display:flex;margin-top:3rem;font-size:0.75rem}@media screen and (max-width: 992px){footer{flex-direction:column}} 2 | -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | 3 |
4 |
5 |
6 | Portrait 7 |
8 |
9 | {{- with .Param "greeting" -}} 10 |

{{ . }}

11 | {{- else -}} 12 |

{{ i18n "hello" }}.

13 | {{- end -}} 14 |

{{ i18n "i-am" }} {{ .Site.Params.Author.name | default "Hallo" }}.

15 |

{{- partial "introduction.html" . -}}

16 | 17 |
18 | {{- range .Site.Params.links -}} 19 | 20 | 21 | 22 | {{- end -}} 23 |
24 |
25 |
26 | 27 | {{- if (fileExists "layouts/partials/content.html") -}} 28 |
29 |
30 |
31 | {{- partial "content.html" . -}} 32 |
33 |
34 | {{- end -}} 35 |
36 | 37 | {{ end }} 38 | -------------------------------------------------------------------------------- /assets/scss/hallo/_layout.scss: -------------------------------------------------------------------------------- 1 | .column { 2 | flex: 1; 3 | } 4 | 5 | main { 6 | .block { 7 | display: flex; 8 | } 9 | 10 | .block.introduction { 11 | margin-top: 20vh; 12 | min-height: calc(100vh - 20vh); 13 | } 14 | 15 | .column.left { 16 | text-align: end; 17 | } 18 | 19 | .column.right { 20 | h1 { 21 | margin-left: -10px; /* Correction for margin of leftmost character. */ 22 | margin-bottom: 0.4em; 23 | } 24 | 25 | h2 { 26 | margin-left: -4px; /* Correction for margin of leftmost character. */ 27 | margin-top: 0; 28 | } 29 | 30 | .links { 31 | margin-top: 2.5rem; 32 | font-size: 1.5rem; 33 | 34 | a { 35 | margin-right: 0.5rem; 36 | text-decoration: none; 37 | } 38 | } 39 | 40 | } 41 | 42 | @media screen and (max-width: $break-large) { 43 | .block { 44 | flex-direction: column; 45 | } 46 | 47 | .block.introduction { 48 | margin-top: 0; 49 | } 50 | 51 | .column.left { 52 | text-align: center; 53 | } 54 | 55 | .column.right h1 { 56 | margin-top: 0; 57 | } 58 | 59 | img.portrait { 60 | margin: 0; 61 | } 62 | } 63 | } 64 | 65 | footer { 66 | display: flex; 67 | margin-top: 3rem; 68 | font-size: 0.75rem; 69 | 70 | @media screen and (max-width: $break-large) { 71 | flex-direction: column; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{- if .IsHome }} 5 | 6 | {{- else if .Description }} 7 | 8 | {{- end }} 9 | 10 | 11 | {{- if .IsHome }} 12 | {{ .Site.Title }} 13 | {{- else }} 14 | {{ .Title }} · {{ .Site.Title }} 15 | {{- end }} 16 | 17 | 18 | 19 | {{- $inServerMode := hugo.IsServer }} 20 | {{- $cssTarget := "css/style.css" }} 21 | {{- $cssOptions := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }} 22 | {{- $style := resources.Get "scss/hallo.scss" | resources.ExecuteAsTemplate "style.hallo.scss" . | toCSS $cssOptions }} 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {{ if hugo.Environment | eq "production" }} 39 | {{ template "_internal/google_analytics.html" . }} 40 | {{ end }} 41 | 42 | -------------------------------------------------------------------------------- /resources/_gen/assets/scss/scss/hallo.scss_11dec6d354e63d78237f08052de7276c.content: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | color: #fcfdf3; 4 | margin: 1rem; 5 | padding: 0; } 6 | 7 | html { 8 | font-family: Montserrat, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; 9 | font-size: 16px; 10 | overflow-y: auto; } 11 | 12 | body { 13 | background-color: #acbb21; } 14 | 15 | a { 16 | -webkit-transition: color 0.2s ease-out; 17 | -moz-transition: color 0.2s ease-out; 18 | transition: color 0.2s ease-out; 19 | color: #fcfdf3; } 20 | a:hover { 21 | color: #6b7515; } 22 | 23 | h1 { 24 | font-size: 9rem; } 25 | 26 | h2 { 27 | font-size: 3rem; 28 | font-weight: normal; } 29 | 30 | h3 { 31 | font-size: 2rem; 32 | font-weight: normal; } 33 | 34 | @media screen and (max-width: 992px) { 35 | h1 { 36 | font-size: 15vw; } 37 | h2 { 38 | font-size: 2.5rem; } } 39 | 40 | img.portrait { 41 | box-sizing: border-box; 42 | border-radius: 50%; 43 | border: 10px solid #fcfdf3; 44 | margin: 2em 3em; 45 | width: 100%; 46 | height: auto; 47 | max-width: 300px; 48 | max-height: 300px; } 49 | 50 | .column { 51 | flex: 1; } 52 | 53 | main .block { 54 | display: flex; } 55 | 56 | main .block.introduction { 57 | margin-top: 20vh; 58 | min-height: calc(100vh - 20vh); } 59 | 60 | main .column.left { 61 | text-align: end; } 62 | 63 | main .column.right h1 { 64 | margin-left: -10px; 65 | /* Correction for margin of leftmost character. */ 66 | margin-bottom: 0.4em; } 67 | 68 | main .column.right h2 { 69 | margin-left: -4px; 70 | /* Correction for margin of leftmost character. */ 71 | margin-top: 0; } 72 | 73 | main .column.right .links { 74 | margin-top: 2.5rem; 75 | font-size: 1.5rem; } 76 | main .column.right .links a { 77 | margin-right: 0.5rem; 78 | text-decoration: none; } 79 | 80 | @media screen and (max-width: 992px) { 81 | main .block { 82 | flex-direction: column; } 83 | main .block.introduction { 84 | margin-top: 0; } 85 | main .column.left { 86 | text-align: center; } 87 | main .column.right h1 { 88 | margin-top: 0; } 89 | main img.portrait { 90 | margin: 0; } } 91 | 92 | footer { 93 | display: flex; 94 | margin-top: 3rem; 95 | font-size: 0.75rem; } 96 | @media screen and (max-width: 992px) { 97 | footer { 98 | flex-direction: column; } } 99 | 100 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hallo 2 | 3 | [![Build Status](https://travis-ci.com/EmielH/hallo-hugo.svg?branch=master)](https://travis-ci.com/EmielH/hallo-hugo) 4 | 5 | Hallo is a single-page Hugo theme to introduce yourself. Add a portrait, an introduction, several links, and you're set. 6 | 7 | ![Hallo screenshot](https://raw.githubusercontent.com/EmielH/hallo-hugo/master/images/screenshot.png) 8 | 9 | ## Installation 10 | 11 | ### 1. Install the theme 12 | 13 | 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. 14 | 15 | ``` 16 | git submodule add https://github.com/EmielH/hallo-hugo.git themes/hallo 17 | ``` 18 | 19 | Alternatively, you can clone the theme into your project. 20 | 21 | ``` 22 | git clone https://github.com/EmielH/hallo-hugo.git themes/hallo 23 | ``` 24 | 25 | ### 2. Configure Hugo 26 | 27 | Add the following line to `config.toml` to tell Hugo to use the theme. 28 | 29 | ``` 30 | theme = "hallo" 31 | ``` 32 | 33 | Alternatively, you can tell Hugo to use the theme with the `server` command. 34 | 35 | ``` 36 | hugo server -t hallo 37 | ``` 38 | 39 | _[Hugo setup guide](https://gohugo.io/overview/installing/)_ 40 | 41 | ### Update the theme 42 | 43 | If you have installed the theme as a git submodule, you can update the theme by issuing the following command inside your project folder. 44 | 45 | ``` 46 | git submodule update --remote --rebase 47 | ``` 48 | 49 | If you have cloned the theme, you can run `git pull` inside the theme folder. 50 | 51 | ## Configuration 52 | 53 | ### Portrait 54 | 55 | Put your own portrait in `/static/images/portrait.jpg` of your own site and Hugo wil automatically use that portraid instead of the standard one. It's not necessary to alter the theme. 56 | 57 | ### Introduction 58 | 59 | 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. 60 | 61 | ### Name 62 | 63 | Hallo will use the name of the author that has been configured in the `params.author` section of your site's `config.toml`. Add the lines below to your `config.toml` to configure the name. 64 | 65 | ``` 66 | [params.author] 67 | name = "Emiel" 68 | ``` 69 | 70 | ### Links 71 | 72 | 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: 73 | 74 | ``` 75 | [params] 76 | [[params.links]] 77 | icon = "github" 78 | title = "Github" 79 | url = "https://github.com/" 80 | ``` 81 | 82 | Hallo 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. 83 | 84 | 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: 85 | 86 | ``` 87 | [[params.links]] 88 | iconset = "fas" 89 | icon = "envelope" 90 | title = "E-mail" 91 | url = "mailto:mail@example.org" 92 | ``` 93 | 94 | It is also possible to use an icon from [the Academicon set](https://jpswalsh.github.io/academicons/). To do this, specify the icon set and icon origin. 95 | 96 | ``` 97 | [[params.links]] 98 | iconorigin = "ai" 99 | iconset = "ai" 100 | icon = "google-scholar" 101 | title = "Google Scholar" 102 | url = "https://scholar.google.com" 103 | ``` 104 | 105 | ### Additional content 106 | 107 | It's possible to add additional content to your site, for example a contact form. You can add this in `/layouts/partials/content.html`. Additional content will always be added "below the fold", ie. your introduction will always fill 100% of the height of the screen. 108 | 109 | To link to your additional information using one of the icon links, add an id to one of the tags in the content, like so: 110 | 111 | ``` 112 |

Additional information

113 | 114 |

Lorem ipsum

115 | ``` 116 | 117 | You can then add a link to this additional information in your site config, like so: 118 | 119 | ``` 120 | [params] 121 | [[params.links]] 122 | iconset = "fas" 123 | icon = "info-circle" 124 | title = "Additional information" 125 | url = "#info" 126 | ``` 127 | 128 | ### Internationalisation (i18n) 129 | 130 | Hallo supports using other languages than English. Language files for the texts Hallo 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: 131 | 132 | ``` 133 | defaultContentLanguage = "nl" 134 | ``` 135 | 136 | To translate texts your site uses, add an `i18n` folder to your site. 137 | 138 | Feel free to submit pull requests for other translations of Hallo's texts. 139 | 140 | _[Hugo documentation for multilingual sites](//gohugo.io/content-management/multilingual/)_ 141 | 142 | ### Colors 143 | 144 | 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: 145 | 146 | ``` 147 | [params.colors] 148 | background = "#81c6ff" 149 | foreground = "#edf7ff" 150 | hover = "#ffba82" 151 | ``` 152 | 153 | * `background`: Used as background color of the site. 154 | * `foreground`: Used for text and the border of the portrait. 155 | * `hover`: Used for hover of links. 156 | 157 | > **Warning: When using Hugo Basic, you need to perform additional steps to make custom colors work.** 158 | > 159 | > If you get the following error message while building your site, you're using Hugo Basic: 160 | > 161 | > `error: failed to transform resource: TOCSS: failed to transform "style.hallo.scss" (text/x-scss): this feature is not available in your current Hugo version` 162 | > 163 | > The SCSS needs to be transpiled for your custom colors, which is something Hugo Basic cannot do. For the standard colors, the transpiled SCSS comes with the theme. 164 | > 165 | > 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 colors to work by performing the following steps. 166 | > 167 | > 1. Install Hugo Extended on your local machine. 168 | > 2. Generate your site locally by running `hugo` on your local machine. 169 | > 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`. 170 | > 171 | > Hugo Basic will then use this `resources` folder to find the transpiled SCSS. 172 | 173 | ### Greeting text 174 | 175 | By default, the theme uses the translation of the word 'Hello' for the language of your site. You can also choose to alter this text completely. To do so, add the parameter `greeting` to your `config.toml`, like so: 176 | 177 | ``` 178 | [params] 179 | greeting = "Greetings!" 180 | ``` 181 | 182 | ### Google Analytics 183 | 184 | The theme supports Google Analytics. To use Google Analytics, specify the parameter `googleAnalytics` in your `config.toml`. This will add the code for Google Analytics when you generate your site for production. It will not be included for any environment other than production (e.g. when using `hugo serve`). 185 | 186 | ## Acknowledgments 187 | 188 | Stock portrait photo obtained [here](https://www.pexels.com/photo/adult-beautiful-blonde-blur-324658/). 189 | 190 | ## License 191 | See [LICENSE](https://github.com/EmielH/hallo-hugo/blob/master/LICENSE). 192 | --------------------------------------------------------------------------------