Skip to content

Latest commit

 

History

History
210 lines (137 loc) · 5.71 KB

README.md

File metadata and controls

210 lines (137 loc) · 5.71 KB
Raw

Mood

A lightweight, JavaScript-free Hugo theme for moodboarding.

Mood

Live demo

Features

  • Clean and simple design
  • Page specific meta titles
  • Responsive layout
  • SCSS support for local development
  • Minimal inlined CSS for production
  • Cloudinary image hosting
  • Page specific keywords
  • Low quality Image placeholders (LQIP)
  • Next-gen image formats (WebP & AVIF)
  • Immutable image caching
  • Image proxying with Netlify Redirects
  • 100/100 score on Lighthouse
  • SEO optimized (Twitter cards, Facebook Open Graph)
  • Superlite (Only ~3kb of CSS)

Installation

Install Hugo, then create a new site.

hugo new your-site-name

Navigate to the root directory of your project and initialise Git:

git init

With Git initialised, install this repository in the themes/ directory:

git submodule add https://github.com/harrycresswell/mood.git themes/mood
git submodule update --init --recursive

You should now be able to navigate to themes/mood and see all of the theme files.

Updating your site to the latest version of the theme

To update your site to the current version of the theme, navigate to the root directory of your project and run the following:

git submodule update --remote --merge

Ensure you replace your existing assets folder with the one found in themes/mood.

Now commit and push your changes, as normal.

Choose a specific theme verison

Move to the theme directory and list all available versions:

cd themes/mood
git tag

Checkout a specific version:

git checkout tags/<version-name>

Configuration

First, move the config.toml and netlify.toml files from themes/mood/exampleSite to the root of your new project.

Now, make sure mood is set as your default theme at the top of your config.toml file:

theme = "mood"

Finally, move the assets folder including it’s contents from the themes/mood folder to the root of your project.

Hosting images with Cloudinary

If you would like to use Cloudinary to host image content, head to Cloudinary.com and set up a free account.

Now you have a Cloudinary account set up, open netlify.toml at the root of your project and located the to value, found under redirects. Replace harrycresswell found in the URL with your own Cloudinary Cloud Name.

[[redirects]]
from = "/images/:format/:quality/:width/*"
# Replace “your-cloud-name” in URL below to your actual cloud name
to = "https://res.cloudinary.com/your-cloud-name/image/upload/:format/:quality/:width/:splat"
status = 200

You will find your Cloud Name in your Cloudinary dashboard.

Inside config.toml, under the [params] section update cloudinary_url to include your Cloud Name.

Now your site is configured to use Cloudinary.

Self-host image content

To self-host image content, make sure you create a Left Bundle (See Page Bundles) when creating new content.

Now add your image as a Page Resource by placing it at the root of the folder.

content/
└── post/
    └── 2022-12-19-new-post/  <-- page bundle
        ├── index.md
        └── sunset.jpg    <-- page resource

You can can name your images anything you like. That’s it. Hugo will handle the rest, creating responsive images with Low Quality Image Placeholders (LQIP) for improved perceived performance.

Adding content

Use the hugo command to create new posts.

hugo new post/2022-12-19-new-post-title/index.md

Notice posts live within content/post.

You will find comments in the front matter that explain how to format the front matter data of your posts correctly.

Add pages in the same manner. Just make sure they are in the root of your content/ folder, rather than in content/post.

hugo new contact/index.md

If you prefer to start your project with demo content, then replace your entire /content folder with themes/mood/exampleSite/content.

Tagging content

When using the hugo command to create new post, the post archetype will populate the front matter of your new post with tag examples. Simply replace these tags with your own.

Managing menu items

Configure your menu items in the config.toml file.

[menu]
[[menu.main]]
  name = "About"
  url = "/about"
  weight = 5
[[menu.main]]
  name = "Contact"
  url = "/contact"
  weight = 10
[[menu.main]]
  name = "Some other page"
  url = "/some-other-page"
  weight = 10

Run a local development server

Run hugo server to start Hugo’s built-in web server.

hugo server

Then head to http://localhost:1313/ to view your site in the browser.

Deploying with Netlify

To take advantage of image proxying and image caching make sure you host your site using Netlify.

Steps to reproduce:

  1. Follow Installation and Configuration
  2. Create a new repository on GitHub, GitLab or Bitbucket
  3. Push your site to remote repository
  4. Creat new site with continuous deployment

Struggling to get set up? Follow the Host on Netlify tutorial in the Hugo Docs.

Author

Harry Cresswell

Problems?

Email me [email protected].

Licence

Copyright 2022 Harry Cresswell

This theme has been released under the MIT License. Check the original license for additional licensing information.