Requirements:
The first requirement is to have a VUE project already coded.
The second requirement is that the code is hosted on a github repository.
Create the github action:
Inside your repository create the folder .github/workflows
mkdir -p ./github/workflows
touch ./github/workflows/publish.yml
Shell
Code the publish.yml file:
You need to know some values:
Your custom DOMAIN_NAME if you are using one. (if you are not using a custom domain, just remove the line)
Your GITHUB_USER
Your GITHUB_ORGANIZATION/GITHUB_USER where the repository is hosted.
Your REPOSITORY_NAME (usually the name of your project)
Your EMAIL and NAME, this values are used for the commit message.
name: CI
on:
branch
push:
branches: [ master ]
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Build and Push
run: |
npm install
npm run build
cd dist
echo "DOMAIN_NAME" > CNAME
git init
git config --global user.email "EMAIL"
git config --global user.name "NAME"
git add -A
git commit -m "Build"
git push -f https://GITHUB_USER:${{ secrets.GITHUB_TOKEN }}@github.com/GITHUB_ORGANIZATION/REPOSITORY_NAME.git master:gh-pages
YAML
./github/workflows/publish.yml
NOTE: this configuration will build your files on every commit to master and will upload the built code to the branch gh-pages.
Example: workflow link.
Configure your github page:
Go to your Repository -> Settings -> Pages
Set your Source branch to gh-pages.
Make sure that you have your domain also set (If needed) in this page.