Deploy Nuxt JS on Github Pages
To deploy or push a Nuxt JS application to Github Pages, you need to change the base url of the project, the privacy of your repository to public, and install some dependencies to speed up the process.
Nuxt Configuration
First, we need to change the base url of our routes in the nuxt.config.js
.
export default {
router: {
base: '/repository-name'
},
...
}
Push-Dir Package
Now, we need to install the push-dir package, which will help us to deploy our dist folder into a github branch (gh-pages).
npm install push-dir
Additionally, we need to create a command in the package.json
to execute the deploy.
{
...
"scripts": {
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},
}
If you want to know more about this package, I recommend you follow this link.
Images
If your project is using images stored in the static
folder of the application root, you will need to update the path to these images in the src
of your html tag.
<img :src="'/repository-name/images/icon.png'" alt="">
To make it easier, you could save the route in the publicRuntimeConfig
inside the nuxt.config.js
configuration file and use this value from the global variable configuration $config
.
export default {
...
publicRuntimeConfig: {
BASE_URL: '/repository-name',
}
}
<img :src="`${$config.BASE_URL}/images/icon.png`" alt="">
Deploy
Finally, we need to generate the static files of the application and deploy the dist folder to github pages using the following commands.
npm run generate
npm run deploy
Github Configuration
Once you have finished the previous steps, in your github repository we are going to open the configuration and in the pages menu, we are going to select the gh-pages branch and save the configuration.
![Branch Configuration in Github Pages](/images/posts/6/1.jpg)
Finally, we are going to wait several minutes until the repository has been deployed.