Workflow

This guide will walk you through every step of working with a Vermeer project.

Prerequisites#

• Node.js — v20.17.0 or higher (run node -v to check).
• Hugo extended — v0.134.2 or higher (run hugo version to check)
• Text editor — We recommend VS Code with these extensions.
• Terminal — Thulite is accessed through its command-line interface (CLI).

Start a new project#

Get your new Vermeer project up and running locally:

1. Create a new project

   Run the following command in your terminal to create a new Thulite + Vermeer project:

   npm create thulite@latest -- --template vermeer

   pnpm create thulite@latest --template vermeer

   yarn create thulite --template vermeer

   bun create thulite@latest --template vermeer

   Enter a project name — for example vermeer-project — when asked.

   This will create a new project directory with all the necessary files and configurations for your site.

2. Install the Vermeer theme

   Download the Vermeer ZIP file and extract all files. Copy the contents of the vermeer-<version>/vermeer-<version> directory — for example vermeer-1.1.0/vermeer-1.1.0 — to the themes/vermeer folder in your project.

3. Install dependencies

   cd into your new project directory and install the dependencies:

   npm install

   pnpm install

   yarn install

   bun install

4. Start the development server

   You can now start Hugo’s development server and see a live preview of your project while you build!

Edit your project#

To make changes to your project, open your project folder in your code editor. Working in development mode with the development server running allows you to see updates to your site as you edit the code.

1. Start the development server

   When working locally, Hugo’s development server lets you preview your work and automatically refreshes your browser when you make changes.

   Inside your project directory, run the following command to start the development server:

   npm run dev

   pnpm dev

   yarn dev

   bun dev

   This will log a message to your terminal with the URL of your local preview. Open this URL to start browsing your site.

Build your site#

To check the version of your site that will be created at build time, quit the development server (Ctrl + C) and run the appropriate build command for your package manager in your terminal.

1. Build your site for production:

   npm run build

   pnpm build

   yarn build

   bun run build

Hugo will build a deploy-ready version of your site in a separate folder (public/ by default) and you can watch its progress in the terminal. This will alert you to any build errors in your project before you deploy to production.

Preview your site#

To preview the built version of your site locally, run the appropriate preview command for your package manager in your terminal.

1. Preview your production build:

   npm run preview

   pnpm preview

   yarn preview

   bun preview

Note that, this previews your code as it existed when the build command was last run. This is meant to give you a preview of how your site will look when it is deployed to the web. Any later changes you make to your code after building will not be reflected while you preview your site until you run the build command again.

Use (Ctrl + C) to quit the preview and run another terminal command, such as restarting the development server to go back to working in development mode which does update as you edit to show a live preview of your code changes.

Deploy your site#

You may wish to deploy your new site right away, before you begin to add or change too much code. This is helpful to get a minimal, working version of your site published and can save you extra time and effort troubleshooting your deployment later.