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.
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
- “deploy” directory: directory related with “username.github.io” repository.
- “src” directory: directory with Nuxt.js project. You can create this directory with the command: “vue init nuxt/starter src”
- “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:
You need to create exclude-list.txt file which contain a single line with:
And you can execute this simply:
And voilà, your Website is ready!!!