Forestry.io Website

Forestry.io Website is an open-source Hugo + Gulp boilerplate that was used to build the Forestry.io documentation, blog, and marketing site. It combines the Hugo static site generator with a Gulp asset pipeline, giving you a production-ready foundation for building fast content sites.

What is the Forestry.io Website?

The Forestry.io Website is a starter repository that wraps Hugo with Gulp as an asset pipeline, compiling CSS, SCSS, JavaScript, and images into a deployable static site. It takes Markdown content from the hugo/content/ directory and source files from src/, then outputs a production build to dist/. The project runs on Node (with NPM) and was originally developed by the Forestry.io team for their own website.

Key Features

This boilerplate bundles the following build tools and integration points directly into the template:

• Hugo static site generation — Hugo builds the site from content, data, layouts, and shortcodes stored under hugo/, with site-wide settings in config.toml.
• Gulp asset pipeline — Automates CSS and JS compilation, image optimization, SVG sprite generation, and local development tasks through gulpfile.babel.js.
• PostCSS + Webpack + Babel — PostCSS processes CSS from src/css/ and src/scss/, while Webpack with Babel compiles ES6 JavaScript from src/js/; configuration lives in postcss.config.js and webpack.config.js.
• ImageMin image optimization — Images in src/img/ are optimized and compressed into hugo/static/img/ for use in layouts and content.
• SVG Sprite generation — SVGs in src/img/ are combined into a single sprite at hugo/static/svg/sprite.symbol.svg, referenced via a Hugo partial.
• BrowserSync local development — npm start launches a development server at http://localhost:3000/ with live CSS/JS injection and automatic page reloads; npm run preview serves the production build.
• Algolia search integration — Custom Hugo output formats generate an Algolia index (list.algolia.json) and an OpenSearch definition (list.opensearch.xml) for any section configured in front matter.
• Code quality tooling — ESLint, StyleLint, and Prettier configurations are included, with npm run eslint and npm run stylelint commands plus :fix variants.

Who should use the Forestry.io Website?

Three groups get the most out of this repository:

• Hugo developers — Use this as a reference or starter for building documentation sites, blogs, or marketing pages that need a modern asset pipeline without a heavy front-end framework.
• Forestry/CMS users — Understand how the Forestry.io website is structured and how to keep compiled CSS/JS committed so the site works with content management systems.
• Static site beginners — Learn how Hugo, Gulp, PostCSS, Webpack, and BrowserSync fit together in a working production codebase.

Use cases

You can repurpose this template for several concrete workflows:

• Documentation maintainers: Add Algolia-powered search to any Hugo section by putting outputs: algolia and outputs: opensearch in front matter; the included layouts generate the search index and browser-discoverable search definition.
• S3 deployers: Generate a valid S3 redirects configuration by adding outputs: redirects to a section's front matter, using Hugo aliases plus the custom Redirects output format.
• Front-end developers: Write JS with require()/import in src/js/, use SCSS or plain CSS imports, and let the build optimize images and produce an SVG sprite automatically.

How does it work?

After cloning the repository, run npm install to install Hugo and all Node dependencies. Use npm start for local development with BrowserSync at http://localhost:3000/, npm run preview to view the production build locally, and npm run build to generate the production site into dist/. The build is self-cleaning, removing dist/ and .tmp/ on each run to keep output current.

FAQ

Here are quick answers to common questions about this template:

Is the Forestry.io Website free to use?

The repository is publicly available on GitHub, so you can clone it, modify it, and use it as a starting point for your own static site without license fees.

What static site generator does the template use?

It uses Hugo, with Gulp acting as the asset pipeline. Hugo builds the HTML from Markdown content and layouts, while Gulp processes CSS, JavaScript, and images.

How do I start the development server?

Run npm install once, then npm start. This launches a BrowserSync server at http://localhost:3000/ with automatic CSS/JS injection and page reloads when content changes.

Can I add search to my site with this template?

Yes. The template ships with custom Hugo output formats for Algolia and OpenSearch. Adding the relevant outputs values to a section's front matter generates a searchable JSON index and an OpenSearch definition.

Does the template support environment variables?

Yes. Environment variables can be placed in .env.js (use .env.js.stub as a reference). The HUGO_ENV variable is exposed to templates, with values development, production, or staging for Forestry previews.