Semantic Release Automation - Part 3 - deploy to github pages

In part 2 of Semantic Release Automation series, we configured our Continues Integration part in our workflow using semantic release package along with Github Actions and GitHub Packages. Now lets go live and configure the deployment workflow using Github pages.

Table of contents

1. Prerequisites
2. Configure repository settings
3. Update Github Action

Prerequisites

• Basic knowledge of CI/CD workflow, you can refer to my 2 mins article about this topic.
• Create Github token, this will be used by Github pages action ( you can skip this part if you have already created it in the previous series).

Configure repository settings

• In your Github repository, Create a new branch from your main branch with name gh-pages.
• Navigate to settings option.
• Go to GitHub Page section.
• Make sure that your are selecting the source branch to gh-pages which you created before.

• Now copy your site URL and open your package.json file add homepage key with your site URL as a value.

Update Github Action

To simply things for us we are going to use a ready action to deploy to github pages. You can find a full example in the following gist below:

	# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
	# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
	name: CI
	on:
	push:
	branches: [ master ]
	jobs:
	build-and-deploy:
	if: "!contains(github.event.head_commit.message, 'skip ci')"
	runs-on: ubuntu-18.04
	steps:
	- uses: actions/checkout@v2
	- name: Use Node.js (12.16.2)
	uses: actions/setup-node@v1
	with:
	node-version: '12.16.2'
	- name: Install Pacakges
	run: npm ci
	- name: Build Step
	env:
	CI: ""
	run: npm run build
	- name: Run Semantic Release
	run: npx semantic-release
	env:
	GH_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GH_TOKEN }}
	NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
	- name: Deploy
	uses: peaceiris/actions-gh-pages@v3
	with:
	personal_token: ${{ secrets.SEMANTIC_RELEASE_GH_TOKEN }}
	publish_dir: ./build

view raw ci.yml hosted with ❤ by GitHub

Now push a new commit and watch your pipeline in action, in a successful scenario you should find the build results in gh-pages and your code is deployed to your site URL.

Thanks for reading, waiting your feedback.

Cover Design Credit: Infographic vector created by studiogstock - www.freepik.com