My client has expressed an interest in setting up the Netlify visual editor as a way of self-serving their own changes to the website (copy edits, adding new image assets etc.) Their site is built using Wintersmith, a node.js based SSG. Site content is written in markdown, assets stored in a specific folder structure as per the SSG’s specifications, and site builds are deployed via my own github repo.
The documentation does not particularly mention Wintersmith or any SSGs as being directly supported by the visual editor. Before I migrate the client’s setup over to the visual editor, please could someone verify whether Wintersmith is directly supported, or whether I’d need to install additional code as your documentation suggests.
@simon.h that is super helpful, thanks so much for taking the time to put that together!
Is it possible to use this approach to run Netlify Visual Editor through the Netlify UI (as described in this documentation?) rather than locally? I ask because it will be my client making the edits, and they will be more comfortable changing site content in the Netlify UI rather than using terminal to run a dev server locally, etc. each time they want to make adjustments to their site.
Yes, it is definitely possible to preview and edit this site within a Netlify Create remote project. The remote visual editor runs on the same foundation as local development, so whatever works locally will also work remotely. In fact, the recommended approach is to first configure and test your site locally, then create a remote project to allow others to edit your site.
The main difference between running the visual editor locally and remotely is that, locally, you run the website’s framework manually in a separate terminal window. In a remote project, however, Netlify Create manages running the web framework for you. Therefore, you’ll need to specify how to run Wintersmith’s dev server and configure the environment accordingly.
To do this, you’ll need to create a Netlify site using your Wintersmith repository and enable the visual editor. Additionally, you will need to update the stackbit.config.ts file to tell the visual editor how to install dependencies and run the Wintersmith dev server. This is primarily done using the devCommand and installCommand options. The example repository I shared in my previous message already includes the devCommand and works remotely if you start a new project from that repository. So, if your Wintersmith site doesn’t require any other environmental adjustments and is based on the official Wintersmith blog example, it may work out of the box.
If it doesn’t work remotely, there are several other configuration options you can tweak, such as the Node.js version and the install command. You can refer to the documentation for more details on configuring the stackbit.config.ts file here.