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

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

How to build and share a static site from scratch in 5 minutes. Create and publish a Nuxt.js powered website on Github pages with Nuxt.js powered by vue-cli. Use Nuxt to add a base URL (replace my-project by your project name) Then commit and push your code to your repository (replace me by your name) and enjoy the result. 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.
image
Raphaël HUCHET Hacker Noon profile picture

Raphaël HUCHET

https://raph.site

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

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

Join Hacker Noon

Create your free account to unlock your custom reading experience.