↓Skip to main content
Milav
  1. PaperMod/

Install / Update PaperMod

5 mins· ·
PaperMod Docs
Milav Dabgar
Author
Milav Dabgar
Experienced lecturer in the electrical and electronic manufacturing industry. Skilled in Embedded Systems, Image Processing, Data Science, MATLAB, Python, STM32. Strong education professional with a Master’s degree in Communication Systems Engineering from L.D. College of Engineering - Ahmedabad.
Table of Contents
PaperMod - This article is part of a series.
Part : This Article
  • We’ll be using yml/yaml format for all examples down below, it is recommend to use yaml over toml as it is easier to read.
  • You can find any YML to TOML converters if needed.

Getting Started ๐Ÿš€
#

  1. Follow Hugo Docs’s - Quick Start guide to install .
    (Make sure you install Hugo >= v0.112.4)

  2. Create a new site

    hugo new site MyFreshWebsite --format yaml
# replace MyFreshWebsite with name of your website

    Note:

After you have created a new site, follow the below steps to add PaperMod

Installing/Updating PaperMod
#

  • Themes reside in MyFreshWebsite/themes directory.
  • PaperMod will be installed in MyFreshWebsite/themes/PaperMod

Expand Method 1 - Git Clone

INSTALL : Inside the folder of your Hugo site MyFreshWebsite, run:

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

You may use --branch v7.0 to end of above command if you want to stick to specific release.

UPDATE: Inside the folder of your Hugo site MyFreshWebsite, run:

cd themes/PaperMod
git pull

Expand Method 2 - Git Submodule (recomended)

INSTALL : Inside the folder of your Hugo site MyFreshWebsite, run:

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

You may use --branch v7.0 to end of above command if you want to stick to specific release. Read more about git submodules here .

UPDATE: Inside the folder of your Hugo site MyFreshWebsite, run:

git submodule update --remote --merge

Expand Method 3 - Download an unzip

Download PaperMod source as Zip from Github Releases and extract in your themes directory at MyFreshWebsite/themes/PaperMod

Direct Links:

Expand Method 4 - Hugo module

INSTALL :

hugo mod init YOUR_OWN_GIT_REPOSITORY
  • Add PaperMod in your config.yml file
1
2
3

module:
  imports:
  - path: github.com/adityatelange/hugo-PaperMod

UPDATE:

hugo mod get -u

Read more : Hugo Docs’s - HUGO MODULES

Finally set theme as PaperMod in your site config
#

In config.yml add:

1

theme: ["PaperMod"]

Next up - Customizing PaperMod to suit your preferences.
#

  • Your site will be blank after you set up for the very first time.
  • You may go through this website’s source code - PaperMod’s exampleSite’s source
  • Scroll below this page where you will find more specific details about each section.
  • Kindly go through all of the pages below to know how to configure PaperMod.

Support ๐Ÿซถ
#

  • Star ๐ŸŒŸ PaperMod’s Github repository.
  • Help spread the word about PaperMod by sharing it on social media and recommending it to your friends. ๐Ÿ—ฃ๏ธ
  • You can also sponsor ๐Ÿ… on Github Sponsors / Ko-Fi .

Videos featuring PaperMod
#

You can go through few videos which are available on YouTube for getting to know the creator’s thoughts as well as the setup process.

โ–ถ๏ธ https://youtube.com/playlist?list=PLeiDFxcsdhUrzkK5Jg9IZyiTsIMvXxKZP

Quick Links#

Sample config.yml
#

Example Site Structure is present here: exampleSite

Use appropriately

baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

googleAnalytics: UA-123-45

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ExampleSite
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  author: Me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "<link / abs url>"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: Welcome to my blog

  socialIcons:
    - name: x
      url: "https://x.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: categories
      name: categories
      url: /categories/
      weight: 10
    - identifier: tags
      name: tags
      url: /tags/
      weight: 20
    - identifier: example
      name: example.org
      url: https://example.org
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai

Sample Page.md
#

---
title: "My 1st post"
date: 2020-09-15T11:30:03+00:00
# weight: 1
# aliases: ["/first"]
tags: ["first"]
author: "Me"
# author: ["Me", "You"] # multiple authors
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: false
description: "Desc Text."
canonicalURL: "https://canonical.url/to/page"
disableHLJS: true # to disable highlightjs
disableShare: false
disableHLJS: false
hideSummary: false
searchHidden: true
ShowReadingTime: true
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
cover:
    image: "<image path/url>" # image path/url
    alt: "<alt text>" # alt text
    caption: "<text>" # display caption under cover
    relative: false # when using page bundles set this to true
    hidden: true # only hide on current single page
editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link
---

You can use it by creating archetypes/post.md

hugo new --kind post <name>
PaperMod - This article is part of a series.
Part : This Article

Related

Features / Mods
7 mins
PaperMod Docs