|
||
---|---|---|
.. | ||
.github | ||
archetypes | ||
exampleSite | ||
images | ||
layouts | ||
static | ||
.gitignore | ||
.prettierignore | ||
.prettierrc.json | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md | ||
theme.toml |
Hugo Scroll
📜 A Hugo-theme for pretty, quick and simple single-page websites.
Demo
For a current & working demo of this theme please check out https://janraasch.github.io/hugo-scroll/ 🎯.
Sponsor 💟
Support my work on this theme via GitHub Sponsors (recurring) or PayPal (one-time).
Installation
If you already have a hugo site on your machine, you can simply add this theme via
git submodule add https://github.com/janraasch/hugo-scroll.git themes/hugo-scroll
Then, adjust the config.toml
as detailed below.
If you simply want to check out the exampleSite
, you can run
git clone https://github.com/janraasch/hugo-scroll.git hugo-scroll
cd hugo-scroll
hugo server --source=exampleSite --themesDir=../..
For more information read the official setup guide of Hugo.
Adjust configuration / config.toml
Please check out the config.toml included on the exampleSite of this theme.
Content & structure
Starting fresh
If you are starting fresh, simply copy over the contents of the exampleSite
-directory included in this theme to your source directory. That should give you a good idea about how things work, and then you can go on from there to make the site your own.
Adding content
You can add a new section to the homepage via running
hugo new homepage/my-new-content.md
To create a page separate from the homepage, run
hugo new my-new-page.md
Using icons
This theme includes the full set of Fork Awesome 1.1.7 Icons. Use the {{<icon>}}
-shortcode with the respective "fa fa-ICONNAME"-class
to use an icon directly in your .markdown
files à la
Look at this nice »envelope«-icon: {{<icon class="fa fa-envelope">}}. I took this from https://forkaweso.me/Fork-Awesome/icon/envelope/ :-)
For the full list of icons, see Fork Awesome 1.1.7 Icons.
Adding your branding / colors / css
Add a custom_head.html
-file to your layouts/partials
-directory. In there you may add a <style>
-tag or you may add a <link>
-tag referencing your own custom.css
(in case you prefer to have a separate .css
-file). Checkout the custom_head.html
-file from the exampleSite
-directory to get started and to find more detailed instructions.
Issues / Feedback / Contributing
Please use GitHub issues and Pull Requests.
If you do not have a GitHub-account, feel free to hit me up via e-mail (see janraasch.com).
Special Thanks 🎁
- Go to Yonatan Wolowelsky, for the great GhostScroll-theme which formed the basis of this Hugo-theme.
- Go to Pexels, for supplying those wonderful free stock photos on the exampleSite.