Preview, Build, and Publish

To preview your site or get it ready to launch, open your command line, navigate to your site folder, [^unix_navigate] then refer to one of the instructions below.

[^unix_navigate]: cd /yourSiteFolder. If you're on a Mac, you can also drag your site folder into Terminal after typing cd .

Previewing your site

Out of the box, Surfgreen comes with a local development server you can use to view your site before you publish it. When you open the site in your browser, pages will auto-update as you edit your site's files.

Type npm start. When you launch, you'll see a message:

Surf's up! Your site is ready for local preview:

[Preview URL]

Open that preview url in your web browser. As you edit your site, it will automatically update with your latest changes.

Building your site

Type npm run build to generate a build [^build] of your site.

[^build]: A build is the public-ready website that Surfgreen generates when you run this command. Many websites require no build steps at all; other websites have extremely complex build steps. Surfgreen's is designed to be quick and unfussy.

Assuming it's successful, you'll see the following message:

Hang ten! Your site has completed building, and can be found in your site's /build folder.

If you're deploying this site from a hosting service, make sure the public root is also set to /build.

Happy surfing!

Publishing your site

Once you've built your site, you'll have to publish it to make it viewable to the world. Surfgreen has no server back-end, which means you can publish it to just about any web server in the world. This is called a static site.

Many services exist that let you publish a static site hosted in a Git repository for free. Our favorite platform is Netlify.

First, make sure your Surfgreen site is hosted in a publicly accessible Git repository. (You can find instructions for setting up GitHub in Getting Started.) Then:

  1. Make sure your site is up to date and published in your repo.
  2. Sign up for a free Netlify account.
  3. Follow Netlify's instructions for deploying (publishing) your site.
    • Be sure to set the publish directory to /build.