Ghostwriter

Ghostwriter is a Hugo theme that ports the Ghost ghostwriter theme to the Hugo static site generator, giving bloggers a journal-like layout with configurable social links, analytics, and reading time.

What is Ghostwriter?

Ghostwriter is an enhanced port of the Ghost ghostwriter theme for Hugo. It takes Markdown content from a Hugo site and outputs a static blog with a journal-like design, wrapped in a theme that supports configurable author profiles, menus, and social sharing. The theme is developed by jbub, distributed on GitHub under the ghostwriter name, and has 182 stars at the time of writing.

Key Features

• Hugo port — Brings the Ghost ghostwriter visual design to static sites, so you get the same look without running the Ghost CMS.
• Webpack-based SCSS build — Styles live in styles/style.scss; use npm run build to compile them or npm run watch for realtime reloading during development.
• Configurable social and author profile — Set author name, profile, and links to GitHub, GitLab, LinkedIn, Twitter, Stack Overflow, Facebook, and email via the config file.
• Multiple analytics integrations — Enable Google Analytics, Fathom, Plausible, or Exponea through parameters such as fathomUrl, plausibleAnalytics.domain, and exponeaToken.
• Estimated reading time — Display a reading time estimate with a customizable label via readingTimeText.
• Social sharing buttons — Turn on sharing for Twitter, Facebook, and LinkedIn with the shareTwitter, shareFacebook, and shareLinkedIn flags.
• Open Graph metadata — Add Open Graph tags to your pages by setting opengraph: true.
• Customizable main menu — Define menu entries like Blog, Projects, Contact, and About in config.yml.
• Custom head injection — Override the extra-in-head.html partial to insert arbitrary HTML into the page <head>.

Who is it for?

Ghostwriter is for Hugo users who want a blog theme modeled after the Ghost ghostwriter design without leaving the Hugo static site generator. It is especially suited to developers who prefer to tweak styles using SCSS and webpack, and to writers who want a clean reading experience with social sharing and analytics built in.

What can you do with Ghostwriter?

• Hugo bloggers: launch a personal blog with an author bio, social icon links, and reading time—just configure the author and params sections of config.yml.
• Front-end developers: edit styles/style.scss and run npm run watch to see style changes live in the browser while hugo server serves the site.
• SEO-conscious site owners: activate Open Graph tags and privacy-friendly analytics like Fathom or Plausible, and optionally anonymize Google Analytics IPs with anonymizeIP: true.

How does Ghostwriter work?

After cloning the repository into your Hugo site's themes folder, you reference the theme as theme: ghostwriter in config.yml. To modify styling, install JavaScript dependencies with npm install, then run hugo server together with npm run watch for live-reload development. The theme reads your Markdown content and renders it using the parameters you set in config.yml.

FAQ

Is Ghostwriter free?

Yes. Ghostwriter is an open-source Hugo theme distributed on GitHub. You can clone and use it without cost, and you are free to modify it for your own projects.

How do I customize the theme's appearance?

Edit the SCSS source in styles/style.scss and run npm run build to recompile the CSS. Alternatively, run npm run watch to have changes applied automatically as you save files.

Which analytics services does Ghostwriter support?

The theme supports Google Analytics via googleAnalytics in the config, Fathom through fathomUrl and fathomSiteId, Plausible through the plausibleAnalytics block, and Exponea via parameters like exponeaToken and exponeaTarget.

How do I add social media links?

Set the corresponding parameters in config.yml: github, gitlab, linkedin, twitter, stackoverflow, facebook, and email are all supported. These appear as icons in the theme's layout.

Can I inject custom HTML into the head?

Yes. Override the extra-in-head.html partial in your site's layouts directory and add any HTML you need—scripts, meta tags, or other head content.