Deploy and autodeploy a static site on Netlify

In this tutorial we'll go with Netlify, so sign up for an account if you haven't done already. I chose Netlify because it has such a seamless integration with Git providers and Nuxt as well, with little configuration.

So, after logging in, start by "Add new site" and choose to "Import an existing project". Then link your Git provider (I'm just assuming Git here) and find your repository. If you don't see it, simply follow the clear instructions on Netlify.

In the next step, it will have automatically retrieved some info, you just need to add two values:

Build command will be `npm run generate` and the publish directory is `dist`.

Under Advanced, you will need to add the Environment Variables that you also have locally in your `.env` file, to pass the variables to the build process.

Once you hit "Deploy site" you're done! 🙌

You can watch the output of your Netlify deployment from the web interface and it will show you the page once build is complete. It will also, in any event of errors not deploy anything, but log the error for you to review.

Now, by default, when you push a branch to your git provider, Netlify will automatically pick up the change and start deploying a preview for your environment. That's ideal for code changes.

It doesn't however, consider a change in the content of your static generated site. Fortunately, we can fix that rather easily using a webhook which gets triggered on an Contentful update (these two platforms have a nice integration).

Rebuilding on content change

From Contentful you can easily integrate the automatic build and generate process. From the Contentful interface, go to Settings and choose "Webhooks". On the panel you will already see a reference to Netlify to add. Click to add that webhook.

The dialog will now ask for a webhook URL, so let's pop over the Netlify to configure one.

Once in Netlify, go to Deploy settings. When you scroll down on the page, you'll see Build hooks. Click to add one there and give it a sensible name. It will probably already have the right branch selected (it should be the primary branch). Copy the result URL and paste it in Contentful in the webhook field.

That's it. You can further edit the settings of when the hook should be called. When you're setting up the content, you're probably constantly creating and publishing content, it then makes sense to temporarily disable to hook to prevent unnecessary queueing on the Netlify builds. Don't forget to toggle it on when you're done though!

Congrats!

That's it, you're done! You now have a (very basic) blog to publish online. At this point you should feel comfortable enough to modify it to your liking, by adding your own stylesheet (there are various options on this). Also, feel free to peek at the options that Netlify provides, such as adding a custom domain name, generate previews et cetera. Enjoy!