Build and deploy
Publish the static files generated by a minista build. You do not need to keep a minista or Node.js server running in production.
Using the minimal setup through Configuration, this page covers building the home page, checking output, and publishing it.
Table of Contents
- Check pages
- Generate production files
- Preview the build
- Publish to static hosting
- Public base path
- Relative base path
- Adjust output and delivery
Check pages
Check the page structure before publishing.
npx minista check --json
npx minista inspect --jsoncheck checks for page and route issues, while inspect displays the project configuration. Both also run page data fetching, so provide any required environment variables when using APIs. See Passing data to pages for how data fetching works.
Run TypeScript type checking separately if needed.
npx tsc --noEmitGenerate production files
npm run buildSet the build script to minista build. The default output directory is dist/. The minimal setup generates one HTML file for the home page.
dist/
└── index.htmlOutput depends on the pages and plugin settings. Files in public/ are also copied to the output directory, and pages with draft: true are excluded.
Data fetched from APIs or a CMS reflects its state at build time. If the source data changes after publishing, rebuild and update the output.
Preview the build
npm run previewSet the preview script to minista preview. Check the home page at the displayed URL. You can also verify images, links, and Islands here after adding them. Preview serves generated files for review; it does not automatically rebuild changes.
Publish to static hosting
Use the following build settings on your hosting service.
| Item | Example setting |
|---|---|
| Dependency installation | npm ci for npm projects with a maintained lockfile |
| Build command | npm run build |
| Publish directory | dist |
| Node.js | A version within the supported range |
For manual deployment, copy the contents of dist/ to your host. Configure extensionless URLs and 404 handling on the hosting side. For example, whether about.html is served at /about depends on the host's rules.
See 404 page for handling missing URLs.
Public base path
Set base when publishing under a URL such as https://example.com/site/.
import { defineConfig, pluginSsg } from "minista"
export default defineConfig({
base: "/site/",
plugins: [pluginSsg()],
})base is applied to assets processed by Vite and reference URLs to actual public files in SSG HTML. Also check the supported attributes and limitations for public references. Add the deployment path to regular page links yourself.
<a href={`${import.meta.env.BASE_URL}about`}>About us</a>import.meta.env.BASE_URL refers to Vite's base value. Here it is "/site/", making the link /site/about. Changing base for a different deployment location also changes the link prefix. Concatenate about without a leading /.
This link assumes the host serves about.html at /about. To link directly to the HTML file, change about to about.html.
base does not change where pages are placed. Deploy the contents of dist/ at the host's /site/ location.
Relative base path
Use base: "./" if the deployment directory is not fixed.
References to output assets become relative paths, letting you move the files to another directory while preserving the structure inside dist/.
import { defineConfig, pluginSsg } from "minista"
export default defineConfig({
base: "./",
plugins: [pluginSsg()],
})References to Vite-processed assets and public files in HTML are adjusted to the output depth. For example, a reference to public/logo.svg as /logo.svg becomes the following after building.
| Output HTML | Reference to logo.svg |
|---|---|
dist/index.html | logo.svg |
dist/news/index.html | ../logo.svg |
Regular page links are not adjusted automatically. Also, import.meta.env.BASE_URL is "./" and does not change to "../" according to page depth. Write links between pages relative to the URL of the page being displayed.
<a href="./about.html">About us</a><a href="../about.html">About us</a>Adjust output and delivery
Change the output directory with build.outDir.
import { defineConfig, pluginSsg } from "minista"
export default defineConfig({
plugins: [pluginSsg()],
build: { outDir: "output" },
})See Code formatting for delivery and Delivery archives to prepare HTML or ZIP files for delivery. The configuration reference covers file name hashes and minification.
Next, File-based routing adds about and news pages.