A graphical newspaper like blog theme for Hugo.


A graphical newspaper like blog theme for Hugo.

Example of a homepage

Example of a post page


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


  1. Edit your config.yml:

    theme: Blogpaper
    title: # Your site title
      name: # Your name
    baseURL: # Hostname (and path) to the root, e.g.
    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"
      main: # Optional, the menu to display on top-right of your site, see
        - name: About
          url: /about
      description: # The description of your site (used on a <meta> tag)
      subtitleLength: 25 # The number of words on the subtitle of a page

    See 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 or 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:

        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
        |   |   └── # Use banner.jpg
        |   ├── # No banner.jpg, use the parent banner: ../banner.jpg
        |   ├── # Use emoji-support.jpg
        |   ├── emoji-support.jpg
        |   └── ...
        ├── # Use banner.jpg
        ├── # Use about.jpg
        ├── about.jpg
        └── banner.jpg

    You can download free images on sites like Lorem Picsum or

  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
      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
              └── ...


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!


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
Images are credited on the page where they are used.