1. 程式人生 > >Deploy vue-cli 3 project to github pages

Deploy vue-cli 3 project to github pages

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

Note that GitHub Pages is a static site hosting service and doesn’t support server-side code such as, PHP, Ruby, or Python.

To learn more about the different types of GitHub Pages sites, take a look

here.

That’s the theory! Let’s start:

Say you have a github project and you want to host it on netlify. I’ am just kidding. You are here because you want to host it using github pages.Please follow carefully the following steps:

  1. Create a new local brunch in your project and name it ‘gh-pages’.
  2. Go to github and copy the name of the repository. Let’s assume the repository name is ‘my-first-project’
  3. Create a new file in root directory of your project and name it ‘vue.config.js’. Why this name? Check out here why.
  4. In ‘vue.config.js’ file paste the following code: // vue.config.jsmodule.exports = { baseUrl: ‘/my-first-project/’} NOTE: in baseUrl inside the // chars you have to put the name of your project. Specifically read
    here
    why.
  5. Find and open the file .gitignore located in root directory of your project.Next, find and comment the line which has the text ‘/dist’.NOTE: this folder it’s ignored by default that’s why we have to comment it.
  6. Run the command: git add dist && git commit -m "Initial dist subtree commit" IMPORTANT: Make sure you don’t commited the vue.config.js and .gitignore files
  7. Run the command: git subtree push --prefix dist origin gh-pages
  8. Navigate to github on your browser and open your repository. Next click ‘Settings’ just like it is displayed below.

9. Scroll and find the section GitHub Pages. Select the ‘gh-pages’ brunch and click Save.

10. You might have to wait a while, but if everything goes well you will see the following alert message. Generally you have to wait 8–10 minutes until this process is done.

That’s it! You are done!If something goes wrong feel free to contact me in my email ‘[email protected]’ and I will help you, or you can add a comment.

Feel free to give any feedback and if you want to follow me!

Vue-cli 3 docs can help you as well, to deploy your project to github pages. Read more here

Thanks for reading and for your time!!