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.
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.
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.
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.
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;
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.
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/setup-node@v2.1.4
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.
