Pickles is an open-source Hugo theme for building modern, simple, and beautiful static blogs, with a gulp/webpack/Sass build pipeline and Medium-style image zoom.
What is Pickles?
Pickles is a Hugo theme that transforms Markdown content into a fully styled static website, emphasizing a clean, modern look. It runs on the Hugo static site generator and is distributed under the MIT license by GitHub user mismith0227. The theme includes an exampleSite configuration to help you start quickly, and it supports a range of features such as related content, tags, social links, and Google Analytics.
Key Features
- Medium-style image zoom — integrates the zooming library and adds a custom Hugo shortcode (
{{< zoom-img src="/images/default.jpg" >}}) for creating click-to-zoom images. - Social links — displays links to 16 platforms: Twitter, Facebook, Instagram, Google+, GitHub, GitLab, npm, Codepen, Dribbble, 500px, Flickr, Pinterest, Tumblr, Vimeo, YouTube, and LinkedIn.
- Related content — automatically lists related posts based on shared tags or taxonomy, keeping readers engaged.
- Tag support — includes a tag taxonomy for organizing posts and generating tag pages.
- Google Analytics — built-in support via Hugo's template configuration.
- Responsive design — uses a fluid layout that adapts to desktop and mobile screen sizes.
- SVG sprite icons — icons are delivered as an SVG sprite, reducing HTTP requests.
- Custom tooling — the theme's front-end assets are built with gulp, webpack, Sass, and Babel, and the JavaScript follows the Standard style guide.
Who is it for?
- Bloggers who want a no-frills, readable theme for a personal or professional blog with minimal setup.
- Technical writers who prefer to write in Markdown and publish static documentation or knowledge bases with Hugo.
- Front-end developers who want to customize a theme using Sass variables, gulp tasks, and webpack configs rather than fighting a monolithic framework.
- Photographers and visual artists who want to present image-heavy portfolios with an elegant zoom interaction.
What can you do with Pickles?
- Bloggers: write posts in Markdown, assign tags, and toggle the display of date, word count, and reading time per post using front matter settings like hideDate, hideWordCount, and hideReadingTime.
- Photographers: embed zoomable images throughout a page or gallery using the zoom-img shortcode so visitors can inspect details.
- Site owners: connect Google Analytics and add social profile links so visitors can follow you across the web.
- Personal brands: publish a simple homepage with a blog feed, an about section, and related-post recommendations to increase session depth.
How does Pickles work?
To install Pickles, clone the release branch into your Hugo themes directory: git clone -b release https://github.com/mismith0227/hugo_theme_pickles. For configuration, copy the exampleSite's config.toml into your site root. The development workflow uses yarn: run yarn run dev to compile assets with gulp and yarn run hugo to serve the site; for a production build, use yarn run prod and yarn run build to generate optimized static assets.
