Marco Maisel

In this example we are using a Nuxt.js application which renders components filled with data from Storyblok. We will use Nuxt in static mode, which will pre-render all our pages to HTML. Afterwards we're setting up Github Actions to automatically deploy the generated files to a FTP server.

We don't go into code details in this article. Storyblok has multiple tutorials on how to integrate Storyblok into your application, e.g. https://www.storyblok.com/tp/headless-cms-nuxtjs

Configuring Nuxt.js to use static mode

First of all, we need to make sure that we're using Nuxt with the target option static. To enable it we need to set it in the nuxt.config.js:

export default {

  target: 'static'

  [...]
}

In many examples Storyblok is connected to a Nuxt project by registering its module in the nuxt.config.js and by setting its access token in there like:

[
  'storyblok-nuxt',
  {
    accessToken: '[ACCESS-TOKEN]',
    cacheProvider: 'memory'
  }
],

Because we should'nt commit our access token in our Github repository, we create a .env file in the root of our repository to use environment variables in our local environment. This file should normally be in .gitignore so we don't commit it by accident. Paste the following content in there:

ACCESS_TOKEN_SB= //TODO insert your access token here

After that we need to update the nuxt.config.js to get the token from the environment variables:

[
  'storyblok-nuxt',
  {
    accessToken: process.env.ACCESS_TOKEN_SB,
    cacheProvider: 'memory'
  }
],

When everything is set up correctly we can generate our static web application with

yarn generate
//or npm run generate

This will create a dist folder with all the files we need to deploy our site. We could now manually push them to a FTP server but with the help of Github Actions we are able to automate that.

Github Actions

Github Actions allow us to automate, customize, and execute our development workflow inside of our repository. Different tasks (so called Actions) can be run automatically on certain events or be triggered manually. This enables us to include Continues Integration (CI) and Continuous Deployment (CD) directly in our repository.

Because we need the Storyblok access token in Github as well, we should first create it in Github. We can do this in the Settings tab of the repository with the list option Secrets. Create a "new repository secret" with the name ACCESS_TOKEN_SB and paste your password in there. Afterwards we can create another secret for our FTP password with the name FTP_PASSWORD.

To setup our Action we need to got to the repository we want to add the action to and select the Actions tab. In there is the option to "Set up a workflow yourself" which opens up a file called main.yml. To set everything up we can paste the example below into the yaml file and save:

on:
  push:
  workflow_dispatch:
  
name: Deploy website on push

jobs:
  web-deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
    - name: Get latest code
      uses: actions/checkout@v2

    - name: Use Node.js 14
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    
    - name: create env file
      run: |
        touch .env
        echo ACCESS_TOKEN_SB =${{ secrets.ACCESS_TOKEN_SB }} >> .env
        
    - name: Build Project
      run: |
        yarn install
        yarn generate
    
    - name: Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.2.0
      with:
        server: // TODO insert your ftp server name
        username: // TODO insert yor ftp user name
        password: ${{ secrets.ftp_password }}
        local-dir: ./dist/
        server-dir: // TODO insert the server directory you want your files to be deployed
        dangerous-clean-slate: true

The action in the example is triggered by every push to the repository and gives us the option to trigger it manually (by setting workflow_dispatch). It runs an ubuntu server with Node.js 14 and checks out our code in the repository. Afterwards it creates an .env file similar to the local environment to store the Storyblok access token we set up in the Github secrets. Then it installs all dependencies the projects needs and generates the static code. In the end it takes the code and pushes it to our FTP server.

The FTP Deploy Action has multiple options like excluding specific files. If you need more settings check out the official Github Repo and documentation: https://github.com/SamKirkland/FTP-Deploy-Action

That's it. We configured a Nuxt.js application which renders components filled with data from Storyblok to use static mode and set up a Github Action to automatically deploy the generated files to a FTP server on push. We can also manually trigger the deployment every time we update our content in Storyblok, so the Nuxt application is updated to show everything we changed in Storyblok.

The header image is from James Harrison on Unsplash

Configuring Nuxt.js to use static mode

Github Actions

SOCIAL MEDIA