Hey everyone. For this post, I’m going to quickly run through how to host a page for your GitHub repo project in less than 10 minutes.
Scroll down for the video.
GitHub Pages is a static site hosting system that’s designed to host your project, personal or organization pages. The best part of it all is it’s totally free!
Now for the disclaimer. GitHub pages can only host your STATIC sites. So that means no server-side stuff. If you need this, I suggest using a cloud solution such as MongoDB Atlas, Heroku, or Firebase.
Enough of the introduction. Let’s get down to what you came here for.
Let’s start by creating a new vue project. Type vue create anotherwebsite
Create a new branch and name it gh-pages. So type git checkout -b gh-pages. (You should now be working in this new branch)
Go to Github and create a new repo. Let’s call this repo ‘anotherwebsite’
Go back to your project and create a new file in the root directory. Name this file vue.config.js
Paste the following code in your vue.config.js file:
module.exports = { publicPath: 'anotherwebsite' }
Find and comment the line /dist in your .gitignore file
Run the command npm run build to build your project
Once your project has completed its build step, run the following command to add your files (your .gitignore and vue.config.js should not be included in your git add) git add dist && git commit -m “Initial dist subtree commit”
Next, run the following command to push your changes git subtree push --prefix dist origin gh-pages
Go back to Github and click “Settings” for your repo
Next, scroll down until you’ve reached the section called “GitHub Pages” and select the “gh-pages” branch as the source (if not already selected) and click “Save”
If everything went well, your GitHub hosted repository website should be published (this process could take up to 8-10 minutes, so patience is a virtue) and available on the web.
Congratulations! You just published your first GitHub pages project site.
Need more help? Head on over to read the docs.
I once got a 404 error after publishing your site. I opened up the console and saw the following error.
To fix this, I updated my meta tag in the index.html file. I hope that fixes your issue if you encountered this. Big shout out to IconBurger from Stack Overflow thread for the tip. 👍