Home

Awesome

Hugo Serif Theme

Serif is a modern business theme for Hugo. It contains multiple content types and pages. The theme is fully responsive, blazing fast and artfully illustrated.

Live Demo | Zerostatic Themes

Hugo Serif Theme screenshot

Features

Content Types

CSS

Speed

SEO

Menu

Content

Code

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-serif-theme

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

4. Copy the example content

Copy the entire contents of the mynewsite/themes/hugo-serif-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-serif-theme/exampleSite/. .

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

Deployment

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.

Localhost inside exampleSite

You can run this site without installing it as a hugo theme using the following command. I use this for theme development.

hugo server --source=exampleSite --theme=../..

Configuring Theme

Logo

You can edit the logo from the config.toml

# config.toml

  [params.logo]
    mobile = "images/logo/logo-mobile.svg"
    mobile_height = "36px"
    desktop = "images/logo/logo.svg"
    desktop_height = "36px"
    alt = "Serif - A Hugo Business Theme"

Favicon

You can edit the favicon from the config.toml

# config.toml

[params]
  google_analytics_id = "UA-XXX-1"
  google_tag_manager_id = ""
  favicon = "favicon-32x32.svg"

Fonts

This theme uses Google fonts. You can change the google font in the config.toml - These fonts are injected into the style.scss as SCSS variables.

# config.toml

  [params.fonts]
    # sets the google font link in layouts/partials/google-fonts.html
    google_fonts = 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Source+Sans+Pro:wght@400;700&display=swap'
    heading = "Playfair Display"
    base = "Source Sans Pro"

Colors

You can edit the themes main colors in the config.toml. These colors are injected into the style.scss as SCSS variables.

#config.toml

  [params.colors]
    primary = "#f24088"
    black = "#2f2f41"
    white = "#ffffff"
    white_offset = "#f6f7ff"
    grey = "#5C5A5A"

Intro Image

List pages such as the homepage, services and team can have a Intro image.

# content/_index.md
---
intro_image: "https://source.unsplash.com/wOGhHamMqLc"
intro_image_absolute: false
intro_image_hide_on_mobile: true
---

While this themes default content uses illustrations, its easy to change the image to a photo and it will still look great.

the front-matter field intro_image_absolute: true let's illustrations "break out" (in CSS terms, it uses position: absolute) of the grid and is an intended stylistic effect. When using photos or normal images it's recommended to set this field to false and the photo will align with the grid. See content/team/_index.md for an example.

Google Analytics

Put your Google Analytics ID in the google_analytics_id field in the config.toml - Also supports Google Tag Manager. When your site is running locally using hugo server the GA tag is not injected. This prevents polluting your real data.

# config.toml

[params]
  google_analytics_id = "UA-XXX-1"
  google_tag_manager_id = ""

You can also set the Google Analytics ID using a Netlify environment variable HUGO_GOOGLE_ANALYTICS_ID

Meta tags

A pages <title> is generated from the front-matter meta_title else it will use the title property. This allows you to have a different heading on the page to what is shown in the SEO title. See content/_index.md for an example.

The meta description field is generated from the front-matter description

OG meta data for Facebook and Twitter is also generated on a per page basis. The image field is used for the og:image for Twitter and Facebook.

You can configure og meta data global settings in the config.

# config.toml

  [params.seo]
    meta_twitter_site = "@zerostaticio"
    meta_twitter_creator = "@zerostaticio"
    meta_og_image = "https://www.zerostatic.io/theme/hugo-serif/hugo-serif-screenshot.png"

License

Credits

More Hugo Themes by Zerostatic

Find hundreds more Hugo themes on Built At Lightspeed

<img alt="Built At Lightspeed Hugo themes directory screenshot" width="400px" src="https://www.zerostatic.io/images/builtatlightspeed-hugo-themes.jpg" />