• Stars
    star
    188
  • Rank 205,618 (Top 5 %)
  • Language Less
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

📜 A Hugo theme for pretty, quick and simple single-page websites.

Hugo Scroll 📜 Demo

Clean, responsive, single-page Hugo website theme.

hugo-scroll Test Netlify Status GitHub code-size

Promo image which may be a bit outdated:
Screenshot Hugo Scroll Theme

⭐ Feature highlights

  • Responsive to screen size/shape
  • SEO friendly
  • Customizable
  • Video cover
  • Fork Awesome Icons out of the box
  • Header logo
  • Visual guards to guarantee readability
  • External links
  • JS/CSS Assets optimized (Minification, Fingerpriting, pipeline-processed into single file)
  • git info in footer (opt-in)

🔑 Installation

If you already have a Hugo site on your machine, you can simply add this theme via

git submodule add https://github.com/zjedi/hugo-scroll.git themes/hugo-scroll

Then, adjust the config.toml as detailed below & in the file comments.

Playing around with our example site

If you simply want to check out the exampleSite, you can run

git clone https://github.com/zjedi/hugo-scroll.git hugo-scroll
cd hugo-scroll
hugo server --source=exampleSite --themesDir=../..

For more information, read the official Hugo setup guide.

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.

Please check out the config.toml included in the exampleSite of this theme.

You can add a new section to the homepage by running hugo new homepage/my-new-content.md (or craft the file manually)

To create a page separate from the homepage, run hugo new my-new-page.md

🔧 Feature details 🔨

Customizing CSS

Add a custom_head.html file to your layouts/partials directory.

  • You can use <style> tag to embed the overrides (better performance-wise)
  • Alternatively you can <link> your own custom.css

CSS variables var(--some-var-name) from assets\css\variables.scss can be overridden by adding

:root {
  --some-var-name: blue!important;
}

Icons

This theme includes the full set of Fork Awesome 1.2.0 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/ :-)

Header logo

Configured in _index.md, see exampleSite: header_logo: "images/chef-hat.png"

Video cover

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.

Footer version information

In order to see technical version information (extracted from Hugo's GitInfo)) set the following general option in your config.toml: enableGitInfo = true

External links

You can add an external link in the menu, see external.md in the exampleSite.

You can also use extlink shortcode to create a link opening in a new tab:

Visit as at {{<extlink text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}

Referencing and showing icons in front of the link text is possible with a new parameter icon:

Visit as at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}

🐛 Issues / 💡 Feedback / 👑 Contributing

Discussion for Q&A (when unsure), Issues for tracking, Pull Requests for contributions.

See contributing guideline for more.

👏 Special Thanks

More Repositories

1

hugo-bearblog

🧸 A Hugo theme based on »Bear Blog«. Free, no-nonsense, super-fast blogging. This theme now includes a dark color scheme to support dark mode 🦉 ⬛️!
HTML
858
star
2

tab-ahead

Web Browser Extension that helps you to quickly find open tabs by title and URL.
CoffeeScript
109
star
3

hugo-product-launch

🚀 A Hugo theme for young start-ups, product launches, and »coming soon«-websites. Includes contact form & newsletter sign up via Netlify. Deploy with one click!
HTML
63
star
4

gulp-coffeelint

CoffeeLint plugin for gulp.
CoffeeScript
54
star
5

coffeelint-stylish

Stylish reporter for CoffeeLint
CoffeeScript
13
star
6

hugo-product-launch-kickstart

Deploy »🚀 Hugo Product Launch« to Netlify with one click!
JavaScript
7
star
7

generator-gulpplugin-coffee

A Yeoman generator for CoffeeScript gulp plugins
CoffeeScript
4
star
8

guestbook

Following along with the instructions of chapters 1-5 of »Web Development with Clojure, 2nd Edition«
Clojure
3
star
9

javascript-commitment

A commit message generator for JavaScript.
JavaScript
3
star
10

fastmail-markdown

A bookmarklet for rendering plain text notes and e-mails on FastMail with Markdown
HTML
2
star
11

picture-gallery

Following along with the instructions of chapters 8 and 9 of »Web Development with Clojure, 2nd Edition«
Clojure
2
star
12

gulp-twitter

Twitter plugin for gulp.
CoffeeScript
1
star
13

coffeelint-use-strict

A CoffeeLint rule that enforces usage of strict mode
CoffeeScript
1
star
14

employeezies

Following along with the instructions of the 2nd part of chapter 7 of »Web Development with Clojure, 2nd Edition«
Clojure
1
star
15

mittagstisch

🍴Find out »What's for lunch today« at your favorite local lunch spots.
JavaScript
1
star
16

sublimetext-commitment

A commit message generator for Sublime Text.
Python
1
star
17

clojure-db-examples

Following along with the instructions of the 1st part of chapter 7 of »Web Development with Clojure, 2nd Edition«
Clojure
1
star
18

later-dude

URI remembering dropbox on Mac OS X's Dashboard.
JavaScript
1
star
19

catpics

Following along with the instructions of chapter 6 of »Web Development with Clojure, 2nd Edition«
Clojure
1
star