|
| 1 | +<h1 align=center>Hugo Scroll 📜 <a href="https://zjedi.github.io/hugo-scroll/" rel="nofollow">Demo</a></h1> |
| 2 | + |
| 3 | +Clean, responsive, single-page [Hugo](https://gohugo.io/) website theme. |
| 4 | + |
| 5 | +[](https://themes.gohugo.io/themes/hugo-scroll/) |
| 6 | + |
| 7 | +[](https://app.netlify.com/sites/hugo-scroll/deploys) |
| 8 | +[](https://github.com/zjedi/hugo-scroll/blob/master/LICENSE) |
| 9 | + |
| 10 | + |
| 11 | +Promo image which may be a bit outdated:<br/> |
| 12 | + |
| 13 | + |
| 14 | +## ⭐ Feature highlights |
| 15 | + |
| 16 | +- Responsive to screen size/shape |
| 17 | +- SEO friendly |
| 18 | +- Customizable |
| 19 | +- Video cover |
| 20 | +- [Font Awesome v6.6.0 Icons][font-awesome-icons] out of the box |
| 21 | +- Header logo |
| 22 | +- Visual guards to guarantee readability |
| 23 | +- External links |
| 24 | +- JS/CSS Assets optimized (Minification, Fingerprinting, pipeline-processed |
| 25 | +into single file) |
| 26 | +- git info in footer (opt-in) |
| 27 | + |
| 28 | +## 🔑 Installation |
| 29 | + |
| 30 | +You need to install Hugo extended version. |
| 31 | +If you already have a Hugo site on your machine, you can simply add this theme via |
| 32 | + |
| 33 | +```cli |
| 34 | +git submodule add https://github.com/zjedi/hugo-scroll.git themes/hugo-scroll |
| 35 | +``` |
| 36 | + |
| 37 | +Then, adjust the `hugo.toml` as detailed below & in the file comments. |
| 38 | + |
| 39 | +### Playing around with our example site |
| 40 | + |
| 41 | +If you simply want to check out the `exampleSite`, you can run |
| 42 | + |
| 43 | +```cli |
| 44 | +git clone https://github.com/zjedi/hugo-scroll.git hugo-scroll |
| 45 | +cd hugo-scroll |
| 46 | +hugo server --source=exampleSite --themesDir=../.. |
| 47 | +``` |
| 48 | + |
| 49 | +For more information, read the official [Hugo setup guide][hugo-setup-guide]. |
| 50 | + |
| 51 | +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. |
| 52 | + |
| 53 | +Please check out the [hugo.toml](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/hugo.toml) included in the [exampleSite](https://github.com/zjedi/hugo-scroll/tree/master/exampleSite) of this theme. |
| 54 | + |
| 55 | +You can add **a new section to the homepage** by running `hugo new homepage/my-new-content.md` (or craft the file manually) |
| 56 | + |
| 57 | +To create **a page separate from the homepage**, run `hugo new my-new-page.md` |
| 58 | + |
| 59 | +## 🔧 Feature details 🔨 |
| 60 | + |
| 61 | +### Customizing CSS |
| 62 | + |
| 63 | +Add a [`custom_head.html`](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html) file to your `layouts/partials` directory. |
| 64 | + |
| 65 | +- You can use `<style>` tag to embed the overrides (better performance-wise) |
| 66 | +- Alternatively you can `<link>` your own `custom.css` |
| 67 | + |
| 68 | +`CSS` variables `var(--some-var-name)` from `assets\css\variables.scss` can be overridden by adding |
| 69 | + |
| 70 | +```scss |
| 71 | +:root { |
| 72 | + --some-var-name: blue!important; |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +### Icons |
| 77 | + |
| 78 | +This theme includes the full set of [Font Awesome v6.6.0 icons][font-awesome-icons]. Use the `{{< icon >}}` [shortcode][hugo-shortcodes] with the respective `name` to use an icon directly in your `.md` files. For example: |
| 79 | + |
| 80 | +```html |
| 81 | +{{< icon name="envelope" >}} |
| 82 | +``` |
| 83 | + |
| 84 | +If you want to use one of Font Awesome's brand icons—the ones that have a trademark warning and the `fa-brands` class—add `brand=true`. For example: |
| 85 | + |
| 86 | +```html |
| 87 | +{{< icon name="github" brand=true >}} |
| 88 | +``` |
| 89 | + |
| 90 | +If you want to use these branded icons in your contact list, use the full class names in your `hugo.toml`: |
| 91 | + |
| 92 | +```toml |
| 93 | +[[params.contacts]] |
| 94 | + label = "GitHub" |
| 95 | + value = "github.com/zjedi/hugo-scroll" |
| 96 | + url = "https://github.com/zjedi/hugo-scroll" |
| 97 | + icon = "fa-brands fa-github" |
| 98 | +``` |
| 99 | + |
| 100 | +### Header logo |
| 101 | + |
| 102 | +Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"` |
| 103 | + |
| 104 | +### Video cover |
| 105 | + |
| 106 | +Set `header_use_video: true` in `/exampleSite/content/_index.md` and define video source via custom partial, such as `exampleSite/layouts/partials/custom_header_video.html`. |
| 107 | + |
| 108 | +### Footer version information |
| 109 | + |
| 110 | +In order to see technical version information (extracted from Hugo's [GitInfo](https://gohugo.io/variables/git/))) set the following general option in your hugo.toml: `enableGitInfo = true` |
| 111 | + |
| 112 | +### External links |
| 113 | + |
| 114 | +You can add an external link in the menu, see `external.md` in the `exampleSite`. |
| 115 | + |
| 116 | +You can also use `extlink` shortcode to create a link opening in a new tab: |
| 117 | + |
| 118 | +```markdown |
| 119 | +Visit us at {{<extlink text="Instagram" href="https://www.instagram.com/yourInstagramName/">}} |
| 120 | +``` |
| 121 | + |
| 122 | +Referencing and showing icons in front of the link text is possible with a new parameter `icon`: |
| 123 | + |
| 124 | +```markdown |
| 125 | +Visit us at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}} |
| 126 | +``` |
| 127 | + |
| 128 | +## 🐛 Issues / 💡 Feedback / 👑 Contributing |
| 129 | + |
| 130 | +[Discussion](https://github.com/zjedi/hugo-scroll/discussions) for Q&A (when unsure), |
| 131 | +[Issues](https://github.com/zjedi/hugo-scroll/issues) for tracking, |
| 132 | +[Pull Requests](https://github.com/zjedi/hugo-scroll/pulls) for contributions. |
| 133 | + |
| 134 | +See [contributing guideline](https://github.com/zjedi/hugo-scroll/blob/master/contributing.md) for more. |
| 135 | + |
| 136 | +## 👏 Special Thanks |
| 137 | + |
| 138 | +- [Jan Raasch](https://www.janraasch.com), original author of theme |
| 139 | +- [Yonatan Wolowelsky](https://github.com/grmmph), author of [GhostScroll](https://github.com/grmmph/GhostScroll) theme, which formed the basis of this [Hugo](https://gohugo.io/) theme. |
| 140 | +- [Pexels](https://www.pexels.com), for supplying _free_ stock photos. |
| 141 | + |
| 142 | +[hugo-setup-guide]: https://gohugo.io/getting-started/installing |
| 143 | +[font-awesome-icons]: https://fontawesome.com/icons |
| 144 | +[hugo-shortcodes]: https://gohugo.io/content-management/shortcodes/ |
0 commit comments