Create and publish a Nuxt.js powered website on Github pages

How to build and share a static site from scratch in 5 minutes.

Nuxt.js is a framework for creating Universal Vue.js Applications.

Install vue-cli:

npm install -g vue-cli

Create the project (replace my-project by your project name):

vue init nuxt/starter my-project
cd my-project
npm install

Update nuxt.config.js to add a base URL (replace my-project by your project name):

router: { base: '/my-project/' },

Install push-dir:

npm install push-dir --save-dev

Create a deploy command to publish to Github pages by editing package.json file and adding this line at the beginning of the script section:

"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",

Connect to your Github account and create an empty repository.

Then commit and push your code to your repository (replace me by your name and my-project by your project name):

git init
git add .
git commit -m "init"
git remote add origin https://github.com/me/my-project.git
git push -u origin master

Generate the site and publish it:

npm run generate
npm run deploy

Go to your site https://me.github.io/my-project (replace me by your name and my-project by your project name) and enjoy the result.

You can publish your changes by running this again:

npm run generate
npm run deploy

Voilà. 🤗

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!