Enhanced port of the Ghost "ghostwriter" theme to the Hugo site generator.
I have changed the font of all the body text from Open Sans to Merriweather (a serif font), mainly for better readability (I must say I was inspired by the look of renkun.me).
To make the post TOC visually distinct, I have set it to sans font with italic style. I'm not sure I'm completely happy with the TOC (it still takes too much space, I think). Ideally, the TOC would be floating in the sidebar, or else collapsible by the user. But those changes require fiddling with blogdown and/or Javascript, so later, I suppose.
Inside the folder of your Hugo site run:
$ mkdir themes
$ cd themes
$ git clone https://github.com/jbub/ghostwriterFor more information read the official setup guide of Hugo.
After installing the theme you need to install javascript dependencies. You can use
npm or yarn to install them from package.json. We are using webpack to build
and package styles. In order to develop with realtime reloading in the browser you can
use this powerful combo:
hugo server
yarn run watchTo update theme styles edit the styles/style.scss file. You can then either use the watch command
or run build to compile the styles:
yarn run buildTo customize your theme you can use following params:
baseurl = "https://example.com/"
title = "mytitle"
theme = "ghostwriter"
languageCode = "en-us"
copyright = "My Name"
googleAnalytics = "XXX"
disqusShortname = "XXX"
[Privacy]
[Privacy.disqus]
disable = true
[Privacy.googleAnalytics]
anonymizeIP = true
respectDoNotTrack = true
useSessionStorage = false
[Author]
name = "My Name"
profile = "https://google.com/+XXX"
[Taxonomies]
tag = "tags"
[Params]
mainSections = ["post"]
intro = true
headline = "My headline"
description = "My description"
github = "https://github.com/XXX"
gitlab = "https://gitlab.com/XXX"
linkedin = "https://linkedin.com/in/XXX/"
gplus = "https://google.com/+XXX"
twitter = "https://twitter.com/XXX"
stackoverflow = "https://stackoverflow.com/users/XXX/YYY"
facebook = "https://www.facebook.com/username"
email = "XXX@example.com"
opengraph = true
shareTwitter = true
shareFacebook = true
shareGooglePlus = true
shareLinkedIn = false
dateFormat = "Mon, Jan 2, 2006"
highlightJsUrl = ""
highlightJsLocalUrl = ""
exponeaJsUrl = ""
exponeaTarget = ""
exponeaToken = ""
exponeaTrackVisits = false
readingTime = true
readingTimeText = "Estimated reading time:"
fathomUrl = ""
fathomSiteId = ""
[Permalinks]
post = "/:year/:month/:day/:filename/"
[[menu.main]]
name = "Blog"
url = "/"
weight = 1
[[menu.main]]
name = "Projects"
url = "/project/"
weight = 2
[[menu.main]]
name = "Contact"
url = "/page/contact/"
weight = 3
[[menu.main]]
name = "About"
url = "/page/about/"
weight = 4You can also inject arbitrary HTML into <head> simply by overriding the extra-in-head.html
partial, which is meant for that purpose.