Hello Everyone! Thank you for visiting this blog.
In this article, we will look into how we can easily create and deploy our website(static)/webpage in Github and quickly automate it through native Github actions (CICD server).
Pre-Requisites
- A sample webpage (a basic html page will work)
- Github Account
And that is pretty much it.
Background
Think of traditional CICD (Continous Integration and Continous Deployment) pipeline. Whenever you made a code-checkin into the code repository, a pipeline triggers, run through series of tasks like - Build, test, scan and deploy.
We are going to achieve the same process through Github Actions (CI server for Github). However, we are not going to deploy a full-fledged web-application, but the steps will be same just we need to more tasks as per our requirement in the yaml defination for Github action.
Summary of whats going to happen
- Developer made a changes to the code.
- Developer pushes the code to Github Repository.
- Github action worflow runs on the push event trigger.
- Workflow defination file starts to run(this file contains series of steps the Github action will perform).
- Finally, the code is deployed to Github Pages.
- The changes are reflected on the website
Note: We have taken Github Pages as our deployment server, but it can also be any webserver on cloud or data center.
Steps to deploy to Github Pages
- Under repsitory goto setting
- Click on Pages from the left navigation bar
- Select source as Github Pages from dropdown under Build and Deploy
- [Optional] You can select the pre-populated static HTML configure tile that appears, but this is not required since we will create our own deploy.yml file
Setting up deployment files
Creating sample webpage and prepare all the files
Lets prepare all our files first
- Create a repository in Github Steps to create Github Repo
- Open a text editor and create the folder/files as below
- An index.html file at the root
- Add a folder named .github
- Add a subfolder inside .github named workflow
- Add a file called deploy.yml inside workflow folder
This will be the folder structure -
index.html (a sample webpage)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Page</title>
</head>
<body>
<h1>This is my webpage - Ashif</h1>
</body>
</html>
.github/workflow/deploy.yml
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
push:
branches: ["main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload entire repository
path: './'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
If you want to read more about Github Action Workflow you can read the reference page - Worflow
Now that all our files are ready, we will checkin(upload) this to our Github Repository created -
Run the below Git commands :
git remote add origin <YOUR_GITHUB_REPOSITORY_URL>
git add .
git commit -m "Making code changes"
git push origin main
Now as soon as you perform git push, in the repository under the actions tab, you will see a workflow starts to run. This worklfow will execute all the steps defined under deploy.yml
This is completed here.
At the last step - Complete Job, you will find a pre-generated URL. Copy that URL to your browser you will see your website deployed.
Final Testing
Lets make another changes and test-
- Make any chnages in index.html
- Git commit and push it to repository
- Workflow runs
- Open the same URL or refresh
- You will notice the changes are deployed.
If you want to look into more crisp and quick summary of steps needed, you can visit the following link GitHub Pages Deployment
Thank You for reading my post. If you like this post you can add your reaction or comment.
You can find more about me: 👉 Github Profile
Top comments (0)