Building a Static Blog with Nuxt.js and Cockpit Headless CMS - Part 3: Deployment

In this post we'll look at adding a few finishing touches to the site and then at how we can go about deploying it. Including setting up automatic regeneration for the site when a post is updated, added or removed.

Note the hid property, if we are declaring the same meta tags as in our nuxt.config.js we need include this so that Nuxt does not duplicate the meta tags. Instead it overides those in nuxt.config.js with the ones we add here with the same hid value.

But what about in our dynamic post and category pages?

Open up your _title_slug.vue page and add the following beneath the asyncData method:

If you want to improve this further you can add meta tags for social media sites like Twitter, Google and Facebook.

Also using Real Favicon Generator you can create all the correct icons etc. Just add the files to your static directory and they will be copied over to the dist directory when you run npm run generate.

Displaying our Post Dates

So far we haven't displayed the creation date for any of our blog posts so let's look at how we can do this.

Deploying the Site

We can simply link our git repository on GitHub/GitLab/Bitbucket and it will automatically be updated and rebuilt on Netlify whenever we push changes. We can also easily add webhooks that allow us to tell Netlify to regenerate the site when we update one of our blog posts in Cockpit.

Just before we do this we need to add a little script to the root of our site that will allow Netlify to create a .env file at the time it builds our site.

The reason we need to do this is because we added our .env file to our .gitignore file so it won't be committed to git and Netlify won't have access to our Cockpit API key!

So create a new file called create-env.js and add the following to it:

When you've allowed Netlify access and selected the correct git repository you need to add the following under Deploy Settings as the Build command:

node ./create-env.js && npm run generate

Remember to set the Publish directory as dist.

This tells Netlify to run our create-env.js script above and write to a .env file so we can use our Cockpit API key etc.

Finally we need to tell Netlify what our Build environment variables are so click "new variable" until you have something like this.

Now with any luck you'll be able to push changes to GitHub etc and Netlify will automatically be notified of the changes and rebuild your site by running the npm run generate command we specified above!

Note: If you run into errors or issues during the build phase with Netlify try changing the Build image

Setting up Build Webhooks

So we've got automatic deploys set up for pushing changes to GitHub etc. but now we need to tell Netlify to rebuild of static site when we update, add or delete a post in Cockpit.

In Netlify under "Build & Deploy" Settings you should see an option to add a build hook.

Click on this and call it something like Regenerate Blog.

You should then see a URL like this https://api.netlify.com/build_hooks/xxxxxxxxxxxxxxxx copy this URL and then head over to your Cockpit backend - https://cms.yourdomain.com.

Once signed into Cockpit go to settings, webhooks and click "create a webhook". Call the webhook Regenerate Blog or anything like that and paste in your Netlify Build Hook URL.

Make sure to add events collections.save.after and collections.remove.after.

Click save and then go edit one of your posts to see if everything is working.

You should see after a minute or so that Netlify has automatically regenerated the static site for us!

You can now go on to add your own custom domain to your blog and also add an SSL certifcate with forced https redirection.

Deploying without using Netlify

We could also create a similar setup to the above on our own Digitalocean, Vultr etc. VPS using a small server to accept webhooks and run shell commands. I'll cover this in a future post!

Wrapping up

Hopefully you can see how easy it is to get up and running with a simple statically generate site using Nuxt and Cockpit. Paired with Netlify it really is a great developer experience and being served on Netlify's CDN makes it extremely fast!