The preview of your site in Stackbit is generated by the development server of your static-site-generator such as Gatsby or Jekyll. Because the preview is served by the SSG development server, any changes to site's content and code are immediately reflected in the preview. To show you the preview Stackbit runs the development server of your SSG and routes the site pages to your browser.
Stackbit runs the following steps to show you the preview of your site:
- It clones your site's repository
- It checks-out the
- It installs your site dependencies depending on your static site generator (e.g.,
npm installfor Node based SSGs such as Gatsby and Next.js, and
bundle installfor Jekyll)
- It runs your static site generator's development server (e.g.:
gatsby developfor Gatsby, and
bundle exec jekyll servefor Jekyll).
- It routes any page requests made from your browser to SSG's development server and returns responses back to your browser, as if you are developing your site locally on your local machine.
For example, suppose your site uses Gatsby. In that case, after cloning your repository, checking out the
preview branch, and installing dependencies, Stackbit executes
gatsby develop in its preview-server to start Gatsby's development server and then routes page requests from your browser to that development server running internally on
If your site uses Hugo, Stackbit executes
hugo server and routes page requests to Hugo's development server running internally on
You can see the logs of how Stackbit pulls your repository, installs dependencies, and runs your SSG's development server by clicking on the "Logs" button in the "Advanced Tools" bottom bar:
Because the preview is served by the SSG development server, any changes to site's content and code are immediately reflected in the preview.
Your SSG's development server should listen to content changes and respond to them by refreshing any opened browser sessions via live-reload or HMR. Most of the static-site-generators have these functionalities enabled by default, so you don’t have to do anything.
Due to the nature of static site generators and how their development server work, any changes made to the code, or the content are immediately picked up by the SSG and reflected in the browser.
Of course, in order for Stackbit to show you the preview of your site, your SSG's development server must work without crashing.