Blogpaper

A graphical newspaper like blog theme for Hugo.

View demo View Github

Blogpaper

A graphical newspaper like blog theme for Hugo.

Example of a homepage

Example of a post page

Install

  1. Make sure you're using the Hugo extended version.

  2. If you're using Hugo for the first time, follow the
    Hugo's quick start tutorial first.

  3. Copy the theme in your site:

    git submodule add https://github.com/NormandErwan/Blogpaper themes/Blogpaper

  4. Edit your config.yml:

    theme: Blogpaper

  5. Generate your site!

    hugo server -D

You should now a have a working site, but with a flat grey background instead of banner images on top your pages. See
the next section to configure your site and add banner images on your pages.

After intall homepage After intall post page
Example of a homepage after install Example of a post page after install

Configure

  1. Edit your config.yml:

    theme: Blogpaper
title: # Your site title
author:
  name: # Your name
baseURL: # Hostname (and path) to the root, e.g. https://bep.is/
copyright: # Optional, will be displayed on site's footer, if this line is removed an default copyright will be generated
languageCode: en # The language code of your site, by default "en"
menu:
  main: # Optional, the menu to display on top-right of your site, see https://gohugo.io/templates/menu-templates/#site-config-menus
    - name: About
      url: /about
params:
  description: # The description of your site (used on a <meta> tag)
  subtitleLength: 25 # The number of words on the subtitle of a page

    See https://gohugo.io/getting-started/configuration/ for more configuration settings (such as datetimeFormat,
    mainSections or paginate).
    See also how to configure post summaries on the homepage.

    Every page can have a subtitle, displayed bellow the title on the header of the page.
    It's generated by default from the first subtitleLength words of the page's content.
    It works the same as a summary.

  2. Add banner images on your pages, you can either:

    • Add a banner.jpg image next to a index.md or _index.md page.

    • Add a <page-filename>.jpg image next to a <page-filename>.md page.

    • Add no image to use the banner of the parent page.

    • Use a custom image by adding to the front matter of the page:

      banner:
  src: <banner-filename>.jpg # Optional, the filename of the banner, by default <page-filename>.md or banner.jpg

    • Set no banner by adding to the front matter of the page:

      banner: false

    For example, see the Blogpaper's example site:

    .
└── content
    ├── posts
    |   ├── rich-content
    |   |   ├── banner.jpg
    |   |   └── index.md # Use banner.jpg
    |   ├── _index.md # No banner.jpg, use the parent banner: ../banner.jpg
    |   ├── emoji-support.md # Use emoji-support.jpg
    |   ├── emoji-support.jpg
    |   └── ...
    ├── _index.md # Use banner.jpg
    ├── about.md # Use about.jpg
    ├── about.jpg
    └── banner.jpg

    You can download free images on sites like Lorem Picsum or
    other.

  3. Add to the front matter of your pages:

    subtitle: # Optional, will be displayed bellow the title of the page; remove this line to generate an automatic subtitle
banner:
  src: <banner-filename>.jpg # Optional, the filename of the banner, by default <page-filename>.jpg or banner.jpg
  caption: # Optional, the caption of the banner
  href: # Optional, a link on the caption

Troubleshooting / FAQ

  • I can't generate the site.

    • Problem: I have the error: Problem: Building sites … ERROR Transformation failed: TOCSS: failed to transform "blogpaper.scss" (text/x-scss).
    • Solution: Reinstall Hugo, the extended version not the standard one.

  • I want to customize the CSS.

    • Use your own CSS or SCSS files. Simply add the files in your /assets/ folder.

      .
└── assets
    └── css
        ├── custom1.css
        ├── custom2.scss
        └── ...

Contribute

For any question or comment, please open a new issue.
I'm not a web designer so I'm open to any design suggestions! :-)

If you'd like to contribute, please fork the repository and use a
feature branch. Pull requests are warmly welcome!

Upgrade

From your site folder, execute:

git submodule update --remote themes/Blogpaper

Build the example site

Clone this repository, then execute:

cd exampleSite
hugo server --themesDir ../..

Content is adapted from https://github.com/gohugoio/hugoBasicExample.
Images are credited on the page where they are used.

GitHub