Create and publish a Nuxt.js powered website on Github pages by@rap2h
6,360 reads

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

Read on Terminal Reader

Too Long; Didn't Read


Company Mentioned

Mention Thumbnail
featured image - Create and publish a Nuxt.js powered website on Github pages
Raphaël HUCHET HackerNoon profile picture

@rap2h

Raphaël HUCHET

https://raph.site

About @rap2h
LEARN MORE ABOUT @RAP2H'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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-projectcd my-projectnpm 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.

image

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

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

Generate the site and publish it:

npm run generatenpm 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.

image

You can publish your changes by running this again:

npm run generatenpm run deploy

Voilà. 🤗

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa