Code Monkey home page Code Monkey logo

hugo-scroll's Introduction

Hugo Scroll Test Pay me Sponsor me

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

Screenshot Hugo Scroll Theme

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).

GitHub Stats

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 🎁

License

MIT License © Jan Raasch

hugo-scroll's People

Contributors

coreyk avatar damonlynch avatar dependabot[bot] avatar janraasch avatar metbril avatar sdelquin avatar sta7e avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.