Purehugo

Purehugo is a Hugo theme based on Yahoo's PureCSS framework, repurposing the official PureCSS blog layout into a responsive blogging theme with pagination, Disqus comments, Google Analytics, and a configurable social sidebar.

What is Purehugo?

Purehugo is a Hugo theme that uses the PureCSS CSS framework from Yahoo, specifically the blog layout example from purecss.io. It takes a Hugo site's content and renders it as a responsive blog with a sidebar, post pages, and listing pages. The theme is authored by Dragos Plesca (Twitter handle dragos_plesca) and is distributed on GitHub under the repository dplesca/purehugo. It includes a gulp-based mini asset pipeline for processing theme assets.

Key Features

• Responsive design — Based on the PureCSS blog layout, the theme adapts to mobile and desktop viewports without extra JavaScript.
• Pagination — Built-in support for paginated post listings, controlled by the Paginate setting in the Hugo config (e.g., 10 posts per page).
• Responsive image shortcode — A shortcode named img-responsive lets you insert images that scale responsively, called with the image URL as argument.
• Disqus comments — Enable comments per site by setting disqusShortname in the config file; no template edits needed.
• Google Analytics — Add your tracking ID via the google_analytics parameter in the [params] section.
• Social sidebar — The sidebar shows links to Twitter, GitHub, Stack Overflow, and LinkedIn, configured via twitterName, githubName, stackOverflowId, and linkedinName parameters.
• Hide share options — Set hideShareOptions = true in [params] to remove share buttons from single post views.
• Hide sidebar icon text — Set hideSidebarIconText = true to display only icons in the sidebar without accompanying text.

Who is it for?

Purehugo is aimed at Hugo users who want a clean, CSS-only blog theme without pulling in a heavy front-end framework. Bloggers who appreciate Yahoo's PureCSS design language can customize the theme through the Hugo config file rather than editing templates. Developers building a personal or project blog on Hugo can use the theme's built-in integrations to add comments, analytics, and social links quickly.

What can you do with Purehugo?

• Personal bloggers: Publish markdown posts and have them automatically listed with pagination, a shareable sidebar, and Disqus comment threads.
• Technical writers: Use the responsive image shortcode to embed diagrams and screenshots that scale on any device.
• Hugo developers: Customize the theme's gulp asset pipeline to compile and minify SCSS or CSS changes without manually rebuilding stylesheets.

How does Purehugo work?

The theme works as a standard Hugo theme: clone it into the themes directory, set theme = "purehugo" in your site config, and configure the sidebar and integration parameters. A demo config file in the repository shows all available options, including baseurl, languageCode, title, Paginate, disqusShortname, and the [params] block with social and analytics fields.

FAQ

Is Purehugo free?

The theme is distributed as an open-source Hugo theme on GitHub. The repository does not mention a price or license restrictions, and it is available for cloning via git clone https://github.com/dplesca/purehugo.git.

How do I enable Disqus comments?

Set disqusShortname = "your-shortname" in the site config file. The theme automatically adds the Disqus comment thread to single post pages when this value is present.

How do I use the responsive image shortcode?

Insert the shortcode with a URL as its only argument, for example: {{% img-responsive "http://example.com/image.jpg" %}}. The theme's shortcode renders an image that scales with the viewport.

Can I hide the share buttons or sidebar text?

Yes. Add hideShareOptions = true to the [params] section to hide share buttons, or hideSidebarIconText = true to remove the text next to sidebar icons.