How I Use GitHub Actions to Auto-deploy my Vue.js Site to GitHub Pages

#vue #github

I've been building a small weather forecast project as a way to learn Vue.js. I reached a point where I wanted to host this project using GitHub pages. I've used GitHub Actions in the past to deploy a few projects I created with Angular and wanted to do something similar with my Vue.js project. I searched for and found an amazing Action, appropriately titled Vue to Github Pages, in the GitHub Marketplace. It didn't take much to get this process implemented, but figured this post may be helpful to someone out there. Here's how I set up this action.

vue.config.js Setup

I had already created a vue.config.js file at the root of my project, I just had to this small snippet:

publicPath: '/weather-vue/',

The value weather-vue is the name of my GitHub repository. If you're following along, you'll want to replace weather-vue with the name of your repo.

GitHub Actions Workflow

After updating my vue.config.js file, I went my weather-vue repo and clicked on the Actions Tab. This is where you can create "workflows". I didn't choose one of the Workflow Templates, instead I clicked the 'set up a workflow yourself' link. I copied the yaml from the Vue to Github Pages actions page and pasted it in to the editor. I did have to add my username and my repo name. I also added a couple of environment variables that I have stored as GitHub Secrets. My entire yaml looks like this:

name: Build Vue
on: [push]
jobs:
  build_vue:
    runs-on: ubuntu-latest
    name: Build Vue
    steps:
    - uses: actions/checkout@v2
    - id: Build-Vue
      uses: xRealNeon/VuePagesAction@1.0.0
      with:
        username: 'jasonfritsche'
        reponame: 'weather-vue'
        token: ${{ secrets.GITHUB_TOKEN }}
      env:
        VUE_APP_KEY: ${{ secrets.VUE_APP_KEY }}
        VUE_APP_URL: ${{ secrets.VUE_APP_URL }}

I added the env key to use the two environment variables. Once I was finished with the yaml file I clicked the "start commit" button. This kicked off the workflow.

Turn on GitHub Pages

The last thing I needed to do was go to the Settings tab/section in my repo. In Settings I clicked on the Pages section. I found the source dropdown and changed that to gh-pages. It took a little over twenty minutes for my page to be available at the url.

Conclusion

This process was made super simple by the developer/s behind the Vue to Github Pages action. I had no trouble getting my Vue.js project deployed to GitHub Pages. Now, my page is deployed on every push I make, of course that could easily be changed to be on every merge or some other action instead.

Thanks for reading this post.