Code Monkey home page Code Monkey logo

hugo-whisper-theme's Introduction

Hugo Whisper Theme

Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal.

Live Demo | Zerostatic Themes

Hugo Whisper Theme screenshot

Theme features

Content Types

  • Docs (Markdown)
  • Homepage

Content Management

  • This theme generates documentation from markdown files located in content/docs
  • The "Home" page is not documentation, it can be used to introduce your project etc.

SCSS

  • SCSS (Hugo Pipelines)
  • Responsive design
  • Bootstrap 5.3

Speed

  • 100/100 Google Lighthouse speed score
  • 21KB without images ⚡
  • Vanilla JS only

Menu

  • Responsive mobile menu managed in config.toml

Installation

1. Install Hugo

To use this theme you will first need to have Hugo installed. Please follow the official installation guide

⚠️ Note: Check your Hugo version - Hugo Extended is required!

This theme uses Hugo Pipes to compile SCSS and minify assets which means if you not using the Hugo extended version this theme will not work. To check your version of Hugo, run hugo version. Make sure you see /extended after the version number, for example Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown You do not need to use version v0.51 specifically, it just needs to have the /extended part.

2. Create a new Hugo site

This will create a fresh Hugo site in the folder mynewsite.

hugo new site mynewsite

3. Install the theme

Download or git clone this theme into the sites themes folder mynewsite/themes. You should end up with the following folder structure mynewsite/themes/hugo-whisper-theme

cd mynewsite
git clone https://github.com/zerostaticthemes/hugo-whisper-theme.git themes/hugo-whisper-theme

4. Copy the example content

Copy the entire contents of the mynewsite/themes/hugo-whisper-theme/exampleSite/ folder to root folder of your Hugo site, ie mynewsite/. To copy the files using terminal, make sure you are still in the projects root, ie the mynewsite folder.

cp -a themes/hugo-whisper-theme/exampleSite/. .

6. Run Hugo

After installing the theme for the first time, generate the Hugo site.

You run this command from the root folder of your Hugo site ie mynewsite/

hugo

For local development run Hugo's built-in local server.

hugo server

Now enter localhost:1313 in the address bar of your browser.

Deploying to Netlify

Deploy to Netlify

This theme includes a netlify.toml which is configured to deploy to Netlify from the exampleSite folder. If you have installed this theme into a new Hugo site and the exampleSite folder was copied or removed, you should delete the netlify.toml file.

Credits

More Hugo Themes by Zerostatic

Find hundreds more Hugo themes on Built At Lightspeed

Built At Lightspeed Hugo themes directory screenshot

hugo-whisper-theme's People

Contributors

jugglerx avatar damacus avatar remeika avatar fujiharuka avatar eisenherzz avatar khfayzullaev avatar andiputraw avatar finferflu avatar skanoodle avatar snom3ad 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.