Hackernoon logoCreate and publish a Nuxt.js powered website on Github pages by@rap2h

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

Author profile picture

@rap2hRaphaël HUCHET

https://raph.site

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à. 🤗

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!