Nuxt.js and User Github Pages

With GitHub Pages you can create a static website for your portfolio and yes, you can use Nuxt.js.

Nuxt.js and User GitHub Pages

With GitHub Pages you have 2 kinds of pages:

• for user (or organization);
• for projects.

The first one is useful for your portfolio or your personal website.

The second one is useful for creating website for your projects (1 website for each project).

In this post I will focus on User GitHub Pages.

With User GitHub Pages you will have a URL like username.github.io, where username is your username (or organization name) on GitHub.

Nuxt.js for static web site generation

To deploy on GitHub Pages, you need to generate your static web application. If you setup correctly Nuxt.js, you can execute:

npm run generate

It will create a dist folder with everything inside ready to be deployed on GitHub Pages hosting.

The deploy strategy

My deploy strategy is to have:

• a directory with your sources (src). This directory can be pushed on your GitHub repository with your sources;
• a directory with your built files (deploy). This directory can be pushed on your username.github.io repository.

So, you have 2 github repositories, the first one for the sources and the second one for the built files.

The directory layout

1. “deploy” directory: directory related with “username.github.io” repository.
2. “src” directory: directory with Nuxt.js project. You can create this directory with the command: “vue init nuxt/starter src”
3. “src/dist”, this “dist” directory is stored under “src” dir. This directory is create by “generate” command.

Initialize your directories

To create your “deploy” directory, you need to clone your “username.github.io” repository:

git clone https://github.com/username/username.github.io deploy

To create your “src” directory, you need to create a new Nuxt.js project (with vue-cli command):

vue init nuxt/starter src

Both previous commands need to be executed in the same directory.

Deploy your website on Github pages

If you enter in “src” directory you can develop your site in classic Nuxt.js development. Once you are ready to deploy your website you must:

• generate your static files using nuxt command “generate”;
• sync your dist directroy (generated by the previous command) with your “deploy” directory”;
• push your “deploy” directory on the “username.github.io” repository

Don’t worry, I wrote a Makefile to exetude this command. So place this Makefile under your Nuxtjs root diredctory (src).

The Make file is:

Makefile

You need to create exclude-list.txt file which contain a single line with:

exclude-list.txt file used by rsync command (with — exclude-from option)

And you can execute this simply:

make deploy

And voilà, your Website is ready!!!