Problems with deploy Nuxt.js project on GitHub Pages

Question

I have a project: https://github.com/merrymaker14/vuegl

I decided to upload to GitHub Pages: https://merrymaker14.github.io/vuegl

But he does not go through the pages normally, although he seems to have set everything up. Why? I did everything according to the official documentation.

nuxt.config.js:


/* nuxt.config.js */
// only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES`
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/vuegl/'
  }
} : {}

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  ...routerBase,

  router: {
     middleware: 'pages',
     //base: '/examples/vuegl/'
  },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}```

it dont seem that your router base is set. Did u set it during build time? — Aldarund
– Aldarund, Commented Apr 11, 2019 at 14:53
No. By the way, animation component (there's Three.js) also doesn't work. — Timur Musharapov
– Timur Musharapov, Commented Apr 11, 2019 at 15:14

Ben Winding · Accepted Answer · 2020-09-29 01:39:30Z

6

I was running into the same problem, here's what I did to solve it.

Add to nuxt.config.js:

  // Allows page refresh to work on github pages
  generate: {
    fallback: "404.html"
  },

Add a blank file .nojekyll to the static/ directory (prevents github building it as a Jekyll site)
When deploying you will need to do gh-pages -d dist -t true (as the default deployment ignores files starting with '.')

Why this works

There's several problems that the above solution solves.

adding fallback: "404.html", this allows SPA's (single page applications) to work on Github Pages.
1. Any route like example.github.io/my-nuxt-app/some/page will redirect to the custom 404.html file, which will keep the SPA loaded. more info here
.nojekyll prevents github building it as a Jekyll site, Github automatically thinks a gh-pages site is a Jekyll site if it has a /pages directory
gh-pages -d dist -t true is required so that the .nojekyll file is actually deployed to Github Pages, as by default the gh-pages command ignores files starting with .

edited Sep 29, 2020 at 1:39

answered Aug 3, 2020 at 11:54

Ben Winding

12k5 gold badges93 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

valentinmk Over a year ago

Hi, Ben! Thank you. Could you explain why it works? It helped me in the same situation. I don't think .nojekyll is the main problem?

Ben Winding Over a year ago

Added some more explanation, there's actually 3 problems that this solution solves...

Collectives™ on Stack Overflow

Problems with deploy Nuxt.js project on GitHub Pages

1 Answer 1

Why this works

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Why this works

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related