Build your first static site with Publican

(updated )

385 words, 2-minute read

Build your site to the project’s build/ directory with the command:

terminal

node ./publican.config.js

Production mode #

By default, Publican builds a final production site for live deployment. It omits all pages where the front matter has:

  1. a date set in the future, or
  2. a pubish value set to false, draft, or a future time.

Development mode #

You will want to build and view draft pages during development. This can be achieved by setting the NODE_ENV environment variable to development before running Publican:

Linux / Mac OS / Windows WSL terminal

export NODE_ENV=development
node ./publican.config.js

Windows cmd

set NODE_ENV=development
node ./publican.config.js

Windows Powershell

$env:NODE_ENV="development"
node ./publican.config.js

Refer to the Configuration file for better ways of managing development and production builds.

Local web server #

Publican does not provide a development web server to test your built site. You can launch a server such as LiveLocalhost immediately after a successful build:

terminal

node ./publican.config.js
npx livelocalhost -d ./build/

and test your site by opening localhost:8000 in your browser.

Other server options #

Other server options include:

  1. Use a file server module

    Node.js packages such as LiveLocalhost (shown above) and Browsersync can serve files from any directory.

    This site uses LiveLocalhost as part of its configuration.

  2. Install an editor server plugin

    Plugins such as Live Server for VS Code can launch a development server.

  3. Install a dedicated development server

    Software such as Caddy can launch development sites with custom localhost domains and HTTPS certificates.

  4. Use your existing development server

    You can add your project’s build directory as a web root to a development server running on your device, such as NGINX or Apache.

  5. Add esbuild to your configuration

    esbuild bundles CSS and JavaScript but also includes a local server that can hot reload CSS files.