ToC
- We'll be using
yml/yamlformat for all examples down below, it is recommend to useyamlovertomlas it is easier to read.- You can find any YML to TOML converters if needed.
Getting Started 🚀
-
Follow Hugo Docs's - Quick Start guide to install Hugo.
(Make sure you install Hugo >= v0.146.0) -
Create a new Hugo site
hugo new site MyFreshWebsite --format yaml # replace MyFreshWebsite with name of your websiteNote:
- Older versions of Hugo may not support
--format yaml - Read more here about Hugo Docs's - hugo new site command
- Older versions of Hugo may not support
After you have created a new site, follow the below steps to add PaperMod
Installing/Updating PaperMod
- Themes reside in
MyFreshWebsite/themesdirectory. - 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=1You may use
--branch v7.0to 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.0to 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 4 - Hugo module
INSTALL :
Install Go programming language in your operating system.
Intialize your own hugo mod
hugo mod init YOUR_OWN_GIT_REPOSITORY
- Add PaperMod in your
hugo.ymlfilemodule: imports: - path: github.com/adityatelange/hugo-PaperModUPDATE:
hugo mod get -uRead more : Hugo Docs's - HUGO MODULES
Finally set theme as PaperMod in your site config
In hugo.yml add:
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 souce
- 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 hugo.yml
(Previously config.yml)
Example Site Structure is present here: exampleSite
Default hugo.yml file is present in the root of your Hugo site. You can customize it as per your needs. Below is a sample hugo.yml file with all the available options and their default values.
For Site Varabiles from Hugo, you can refer to Hugo Docs's - Configuration page. These variables are not specific to PaperMod but are used by Hugo itself. These may update in future versions of Hugo, so it is recommended to refer to Hugo's documentation for the latest information.
baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod
enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false
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>