YAMLException: end of the stream or a document separator is expected at line 8, column 15: - Run Terminal: ^

title: Nextjs deploy on github-pages
tags: App Hosting

Nextjs deploy on github-pages

There have two approaches on below

Run Terminal:
Just run npm run deploy, setup in pakage.json.
Github Action:
Add <action-name>.yml, when github detected specificed branch updated will deploy automictically.

Run Terminal

Setup

Add those file under your project root
setting <your-repo-name>

<project-root>/.env-config.js

  const prod = process.env.NODE_ENV === 'production';

  module.exports = {
    'process.env.BACKEND_URL': prod ? '<your-repo-name>' : ''
  };

next.config.js

  const debug = process.env.NODE_ENV !== 'production';

  module.exports = {
    assetPrefix: !debug ? '<your-repo-name>' : ''
  };

.babelrc.js

  const env = require('./env-config');

  module.exports = {
    presets: ['next/babel'],
    plugins: [['transform-define', env]]
  };

Add script in package.json

package.json

"scripts": {
  "export": "next export",
  "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
},

If you don't want to custom your commit can update your script "deploy"

Run

    npm run deploy

Github Action

setup

Same as Run Terminal approac. here
THIS IS NECESSARY when you want deploy your nextjs project on github-pages

Add <action-name>.yml

<project-root>/.github/workflows/.<action-name>.yml

  name: <Your-action-name>

  on:
    push:
      branches: <The branch>    # <The branch> you want to dected

  jobs:
    deploy:
      runs-on: ubuntu-latest

      steps:
        - name: Checkout 🛎️
          uses: actions/checkout@v2

        - name: Cache  💾
          uses: actions/cache@v2
          with:
            path: ${{ github.workspace }}/.next/cache
            key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}

        - run: rm -rf node_modules/.cache
        - run: npm ci
        - run: npm run build
        - run: npm run export
        - run: touch out/.nojekyll

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

Push <The branch>

git push origin <The branch>

! Route link in Nextjs

set Link href as={process.env.BACKEND_URL + '/<page-name>'}

  import Link from 'next/link';
  ...
  
  return(
     <> 
      <Link href="/about" as={process.env.BACKEND_URL + '/about'}>
        <a className="btn-primary">
          <p>About</p>
        </a>
      </Link>
      <Link href="/note" as={process.env.BACKEND_URL + '/note'}>
        <a className="btn-primary btn-primary--2">
          <p>Note</p>
        </a>
      </Link>
     </> 
  )

My code: https://github.com/barrystone/barrystone.github.io
example: https://github.com/vercel/next.js/tree/canary/examples/gh-pages

Reference:

Github action Pakages:

peaceiris/actions-gh-pages@v3: https://github.com/peaceiris/actions-gh-pages

title: Nextjs deploy on github-pages tags: App Hosting

Nextjs deploy on github-pages

Run Terminal

Setup

Add script in package.json

Run

Github Action

setup

Add <action-name>.yml

Push <The branch>

! Route link in Nextjs

Read more

hackMD_public-notes

Barry Shi(barrystone)'s Tech skill

git cmd

VS code Snippets

title: Nextjs deploy on github-pages
tags: App Hosting