Sam is a Simple and Minimalist theme for Hugo. It lets you categorize and showcase your content the way you want to.
Focused on content and typography, the stylized index page is really just a list of navigation links that you can set in your
config.toml. This versatile design is limited only by your imagination, as you can make it say anything you like. Here are some ideas.
- Showcase content
- Content-focused page templates for list pages, single pages, and posts
- A responsive CSS grid gallery page that renders from images in your Page Bundle
- Custom navigation menu set via
- Custom footer text
- Custom background video via
- Custom navigation menu set via
- Extended version of Hugo (latest version recommended)
Error: Error building site: POSTCSS failed to transform "css/main.css"
You can install the required packages using
npm. You'll need
To temporarily address this issue, please pin
npm i -g postcss postcss-cli email@example.com
cd exampleSite/ npm i -g postcss postcss-cli autoprefixer
1. Get the theme
Run from the root of your Hugo site:
git clone https://github.com/victoriadrake/hugo-theme-sam.git themes/sam
Alternatively you can include this repository as a git submodule. This makes it easier to update this theme if you have your Hugo site in git as well. For this you need to run:
git submodule add https://github.com/victoriadrake/hugo-theme-sam.git themes/sam
2. Configure your site
From the exampleSite, copy
config.toml to the root folder of your Hugo site and change the fields as you like. There are helpful hints in the file.
3. Create pages
hugo new page.md
page can be anything you like. A contact page, a bio, dates for your upcoming world tour... Anything!
4. Design your main menu and index page
config.toml, customize the entries for
[[params.mainMenu]] however you like. You can have as many or as few entries as you like. You can even include external links.
This list comprises the index page and part of the navigation menu at the bottom of single content pages. Here's an example:
[[params.mainMenu]] link = "/photography" text = "photography" [[params.mainMenu]] link = "/posts" text = "writing" [[params.mainMenu]] link = "/about" text = "who dis?"
Preview your site locally
Use Hugo's built-in server to see your site in action as you make changes.
hugo serve -t sam
localhost:1313 in your browser to see a live preview of your site.
To create a new post, run:
hugo new posts/your-post-title.md
To create an image gallery, place all the files you want included in your Page Bundle. The directory structure might then look like this:
content/ └── gallery/ ├── _index.md ├── file_1.jpg ├── file_2.jpg └── file_3.jpg
To automagically generate a gallery from the images, set
type: "gallery" in the front-matter of
_index.md. You can also set other options for the gallery:
- The gallery
- The page link with
maxWidthof the resized images
- Whether you want the images to link to the full size files, with
- You can keep the orignal aspect ratio of the images in the grid with
Here is an example of a gallery's
--- title: "Portraits" type: "gallery" url: "/portrait-gallery" maxWidth: "800x" clickablePhotos: true keepAspectRatio: false ---
In order to create more than one gallery, create multiple Page Bundles with images and
type: "gallery" defined in the
_index.md front matter. For example:
content/ ├── gallery/ | ├── _index.md | ├── file_1.jpg | ├── file_2.jpg | └── file_3.jpg | └── portfolio/ ├── _index.md ├── file_1.jpg ├── file_2.jpg └── file_3.jpg
That's it! Sam's gallery layout template will automagically build the page from your images.
Custom video background
To change the default home page background to a looping video, you need to set a list of video sources and optionally an overlay color (default:
rgba(0, 0, 0, 0.4)).
Here is an example configuration of
[[params.videoBackground.sources]] source = "/background.mp4" # Your video file type = "video/mp4" poster = "/background.jpg" # The image to show when the video isn't playing [params.videoBackground] overlay = "rgba(0, 0, 0, 0.4)" # optional
And here is a screenshot of what that might look like:
Editing the theme
This theme uses Hugo Pipes to compile, autoprefix, and minify its CSS styles from the included Sass files.
To make changes to the CSS, edit the Sass files located in
assets/sass/, then build your site using extended Hugo, which you can obtain from Hugo Releases.
If when building you do not see the changes you have done, make sure to build your website with the
--ignoreCache flag, otherwise Hugo will
attempt to use its own cached Sass files.
You can run the built-in server to preview the site as you make changes to the Sass files!
If you have a question or get stuck, please open an issue for help and to help those who come after you. The more information you can provide, the better!
Pull requests for bug fixes and enhancements are welcome! Please ensure you first read about contributing to this project.
Open source themes like this one would not be possible without some amazing contributors. Thank you!
Copyright (C) 2018-2020 Victoria Drake
Licensed under Apache-2.0