Hugo Starter Theme

Hugo Starter Theme is a blank starter theme for the Hugo static site generator that pairs Hugo templates with a Webpack 5 UI build workflow for Sass and JavaScript.

What is the Hugo Starter Theme?

It is a minimal Hugo theme that provides a starting directory structure and build tooling instead of pre-designed page styles. It takes Hugo content files (Markdown with front matter) and outputs a static website with compiled CSS and JavaScript. The theme is published on GitHub by developer Jim Frenette under the repository name hugo-starter, and it is listed with the topics hugo, hugo-blog-theme, hugo-theme, sass, and webpack.

Key Features

• Webpack 5 build workflow — Sass and JavaScript are processed through Webpack; npm run dev creates an unminified development build with sourcemaps, while npm run build outputs production-ready assets to the theme's dist folder.
• Git submodule installation — add the theme to a Hugo site with git submodule add https://github.com/jimfrenette/hugo-starter.git themes/starter, keeping the theme pinned to a specific commit alongside site content.
• Disqus comments — enable the comment system by placing disqusShortname = YOURSHORTNAME in the Hugo site configuration file.
• Google Analytics production toggle — analytics scripts appear only when HUGO_ENV=production is set before the hugo build command, so tracking stays off during local development.
• Node v12 (lts/erbium) requirement — the front-end build toolchain targets Node 12, as stated in the README, so the tooling is version-pinned.
• Live-reloading development server — hugo server -D serves the site at http://localhost:1313 and rebuilds when content or templates change.

Who is it for?

• Hugo developers — who want a blank, structured starting point for a custom theme without stripping demo content from an existing theme.
• Front-end developers — who want a preconfigured Webpack pipeline for Sass and JavaScript instead of assembling their own build tooling.
• Bloggers — who plan to start a Hugo blog and want optional Disqus comments and Google Analytics already considered in the theme's configuration.

What can you do with the Hugo Starter Theme?

• Launch a new Hugo site — add the starter as a git submodule, then build custom layouts, partials, and content while the Webpack workflow stays intact.
• Develop with asset sourcemaps — run hugo server -D and npm run dev together to preview unminified, source-mapped CSS and JavaScript.
• Prepare a production deploy — run npm run build then HUGO_ENV=production hugo to generate minified assets and enable Google Analytics.

How does the Hugo Starter Theme work?

The theme runs two parallel processes: Hugo renders the site from content and templates, while Webpack compiles the theme's Sass and JavaScript into the dist folder. After adding the theme as a submodule, you install Node dependencies with npm i inside themes/starter, then use npm run dev or npm run build to produce assets, and serve or build with Hugo.

FAQ

Is the Hugo Starter Theme free?

Yes, the theme is open source on GitHub and can be freely used, modified, and redistributed for personal or commercial projects.

Does it include a ready-made design?

No, it is a blank starter theme without prebuilt page styles or demo content. It gives you the file structure and build tooling so you can create the design yourself.

Do I need Node.js to use it?

Only if you plan to run the Webpack asset pipeline. The Hugo templates function without Node, but compiling the theme's Sass and JavaScript requires Node v12 (lts/erbium) as documented.

How do I turn on Disqus comments?

Set disqusShortname in your Hugo site configuration to your Disqus shortname, then rebuild the site. The theme will render the Disqus thread on comment-enabled content.