Skip to content

This is a sample Nuxt 3 project deployed on GitHub Pages

Notifications You must be signed in to change notification settings

lucpotage/nuxt-github-pages

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Here is how to deploy a Nuxt 3 project on GitHub Pages:

How to

  1. Install dev dependency gh-pages
  2. Add the script "deploy": "gh-pages -d dist" in package.json file
  3. Specifiy app baseURL in nuxt.config.ts
  4. Specifiy buildAssetsDir in nuxt.config.ts that doesn't start with an underscore _. See the router config example below
  5. Create an empty file .nojekyll at the root of the project
  6. Generate with npm run generate
  7. Deploy with npm run deploy

Router config:

export default defineNuxtConfig({
  app: {
    baseURL: '/nuxt-github-pages/', // baseURL: '/<repository>/'
    buildAssetsDir: 'assets', // don't use "_" at the begining of the folder name to avoids nojkill conflict
  }
}

What it does

The dependency will copy your dist content to a specific gh-pages branch that will be served by GitHub Pages. If you go to your Settings/Pages, you’ll see the active branch for your site.

The site is accessible on https://<username>.github.io/<repository>/. For this repository, the site is https://lucpotage.github.io/nuxt-github-pages/.

You can rely on GitHub Actions too. More info here: https://medium.com/front-end-weekly/ci-cd-with-github-actions-to-deploy-on-github-pages-73e225f8f131

More information about buildAssetsDir config: https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

About

This is a sample Nuxt 3 project deployed on GitHub Pages

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published