Search code examples
vue.jsnuxt.jsgithub-pagesstatic-site

Why am I getting resource 404s on static nuxt.js app hosted on GitHub pages?

I have followed these steps:

  1. Made a vue project with Nuxt.js (tested and working with npm run dev)
  2. Used Nuxt.js static site generation to generate a static distribution under the dist directory of my master repository (also tested using VSCode's Live server plugin, works fine).
  3. Deployed the dist directory to the gh-pages branch using: gh-pages -d dist
  4. In the Options for my GitHub project, which is the GitHub Page for my user (augusto-moura.github.io/), I changed the Source to gh-pages.

GitHub pages options

The gh-pages branch seems to hold exactly what it's supposed to, but as I open the page, the scripts aren't loaded and each return a 404 eror.

gh-pages branch

Errors on Network tab

What am I doing wrong? GitHub seems to not be serving the JS files inside the _nuxt directory.

Solution

  • As indicated in the How to deploy on GitHub Pages? guide, in this tiny, easy-to-miss note...

    Branch gh-pages for project repository OR branch master for user or organization site

    In order to use Pages for your user account, you need

    push-dir --dir=dist --branch=master