Skip to content

A Simple and Minimalist theme for Hugo with a focus on typography and content.

License

Notifications You must be signed in to change notification settings

cheesysam/hugo-theme-sam

 
 

Repository files navigation

Main page screenshot

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.

Index page iterations.

Features:

  • Showcase content
    • Content-focused page templates for list pages, single pages, and posts
    • A responsive CSS grid gallery page that renders from a folder of images
  • Customize
    • Custom navigation menu set via config.toml
    • Custom footer text
  • Developer-approved
    • Syntax highlighting
    • Share-ready metadata set via config.toml (OpenGraph and Twitter Cards integration)
    • Easy-to-navigate pug and Sass files included

Quick start

1. Get the theme

From the root of your Hugo site:

$ cd themes
$ git clone https://github.com/vickylai/hugo-theme-sam.git 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

Run:

$ hugo new page.md

Where 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

In 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

Visit localhost:1313 in your browser to see a live preview of your site.

Posts

To create a new post, run:

$ hugo new posts/your-post-title.md

Editing the theme

All the theme's pug and sass files are included. You can compile these to HTML and CSS respectively using the npm scripts included in package.json.

Prerequisites:

To install all dependencies:

$ npm install

Available commands are:

  • npm run build:pug compiles pug files to HTML
  • npm run build:sass compiles Sass files to compressed CSS
  • npm run autoprefixer autoprefixes the compiled CSS
  • npm run build does all the above
  • npm watch watches Sass files for changes and automatically recompiles and autoprefixes the CSS

Contributing

Pull requests for bug fixes and enhancements are welcome.

About

A Simple and Minimalist theme for Hugo with a focus on typography and content.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 71.1%
  • CSS 28.9%