Automate NuxtJS static site generation

Question

I created a NuxtJS static blog with Cockpit CMS backend. Currently I need to npm run generate locally after I created a new blog post and upload the files from the dist folder to my server. How to automate this process?

(What I would like to archive: Create new blog entry -} trigger generate static sites -} update files on server)

Update: I have SSH access and installed NodeJS on my server.

Answer 1

As your computer is not always up, may not keep the same IP address and won't have a reverse proxy to handle multiple hooks, it's considered good practice not to do that on your own machine.

If you were using Netlify or Vercel or any other SAAS serverless hosting, they give access to endpoints that you can send a request to, that would trigger a new build of your website: it's called "build hooks" or "deploy hooks".

What you should do on your server is to upload the sources of your Nuxt project and provide it everything it needs to generate (node+npm, network access...) to the place it is then exposed online. You'll then need to develop your own build hook: a script to regenerate your website and an endpoint to trigger it.

On Cockpit's side, they give you access to Webhooks to send a HTTP request whenever somethings happens on your account.

If it is an option, you should really consider migrating to Netlify/Vercel/... that would simplify all that a lot :). They will georeplicate your site for it to load very quickly, won't break your site if the build fails and make sure it's always up with a proper SSL certificate.

Answer 2

I understand you're looking to maintain your blog with Cockpit CMS as a data source and automate the deployment process.

Theres plenty of options available to you.

Managed hosting

You can use services that build and host your content and react to WebHooks and Git commit hooks.
This method makes it really easy and quickly deploy your project minimal configuration.

• Vercel
• Heroku
• Netlify (Static generation only)
• GitHub Pages (Static generation only)

Self-hosted

Assuming you've configured your own server with SSH access and Node.js, and configured with a Web Server.

You can use a Continuous Delivery to deploy your project to your server.

Some useful articles that might help you;

• How to Deploy on Dokku (Digital Ocean)

GitHub has a great free course DevOps with GitHub Actions that would give you a good understanding of automating your deployment with GitHub actions and similar Continuous Delivery systems.

Github Actions

Here's a useful configuration for you taken from a Code Challenge I completed a while ago.

name: ci

on:
  push:
    branches:
      - main
      - master
  pull_request:
    branches:
      - main
      - master

jobs:
  ci:
    runs-on: ubuntu-20.04

    steps:
      - name: Checkout 
        uses: actions/checkout@master

      - name: Setup node env 
        uses: actions/[email protected]
        with:
          node-version: 14

      - name: Get yarn cache directory path 
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache node_modules 
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies ‍
        run: yarn

      - name: Build 
        run: yarn generate
        env:
          NODE_ENV: production
          BASE_URL: /<MY_REPOSITORY_NAME>
          DEV_TO_API_KEY: ${{ secrets.DEV_TO_API_KEY }}

      - name: Deploy 
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

With Github Pages, you may need to configure the BASE_URL in your nuxt.config.js

export default {
  router: {
    base: process.env.BASE_URL || '/'
  }
}

I really hope these resources helped you with your project.