CODEWITHSUNDEEP
nuxt.js
Timur Musharapov
Timur Musharapov

Reputation: 163

Problems with deploy Nuxt.js project on GitHub Pages

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) {
    }
  }
}```

Upvotes: 1

Views: 1350

Answers (1)

Ben Winding
Ben Winding

Reputation: 11837

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

  1. Add to nuxt.config.js:
  // Allows page refresh to work on github pages
  generate: {
    fallback: "404.html"
  },

  1. Add a blank file .nojekyll to the static/ directory (prevents github building it as a Jekyll site)

  2. 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.

  1. 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

  2. .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

  3. 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 .

Upvotes: 6

Related Questions