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:

• https://ithelp.ithome.com.tw/articles/10192922
• https://javascript.plainenglish.io/deploy-your-next-js-app-on-github-pages-using-the-github-action-525271137409

Github action Pakages:

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