In this blog post, we will explore how to automate the deployment of your web application using GitHub Actions and GitHub Pages. By setting up a GitHub Actions workflow, you can publish your application to GitHub Pages whenever you push changes to your repository. Let's get started! 💪🌐
What is GitHub Actions💡?
GitHub Actions is a powerful automation platform provided by GitHub. It allows you to define custom workflows that can be triggered based on events, such as pushing code changes, opening pull requests, or creating releases. With GitHub Actions, you can automate various tasks in your development workflow, including building, testing, and deploying your applications.
Setting up GitHub Pages📄
Before we dive into setting up the GitHub Actions workflow, let's make sure you have GitHub Pages enabled for your repository. Here's how you can enable it:
Go to your repository on GitHub.
Click on the Settings tab.
Scroll down to the GitHub Pages section.
Select the branch you want to use for GitHub Pages (e.g.,
Choose the root folder for your GitHub Pages site (e.g.,
GitHub Pages will now be enabled for your repository, and your website will be published at
Setting up GitHub Actions Workflow⚒️
Now that GitHub Pages is enabled, let's create a GitHub Actions workflow that automatically deploys your application whenever changes are pushed to the repository. Create a file named
.github/workflows/deploy.yml with the following content:
name: Deploy to GitHub Pages on: push: branches: - main # Replace with your branch name jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v2 - name: Build and deploy uses: JamesIvesemail@example.com with: branch: gh-pages folder: ./portfolio # Replace with the folder containing your built files
In the above workflow, we define a job named
deploy that runs on each push event to the specified branch (
main by default). It uses the
actions/checkout action to fetch the repository's code. Then, it uses the
JamesIves/github-pages-deploy-action action to build the application and deploy it to the
Make sure to replace the branch name and folder path in the workflow file with your actual branch name and the folder where your built files are located.
Commit and push the workflow file to your repository, and GitHub Actions will automatically kick in whenever you push changes.
Creating a Simple Portfolio🧑🏻💻
Now, let's create a simple portfolio webpage that we can deploy using GitHub Pages. Create an
index.html file with the following content:
Update the above page, Place a profile picture in the same directory as your HTML file and replace it with
"https://github.com/ashutosh7i.png" for your photo.
Commit and push these files to your repository.
More in out Getting started with Web Dev blog
Testing the Deployment🧪
To test the deployment, make some changes to your web application code and push the changes to your repository. GitHub Actions will run the workflow, build your application, and deploy it to GitHub Pages.
Once the workflow finishes running, visit
https://your-username.github.io/your-repository/ to see your deployed portfolio live!
By utilizing GitHub Actions and GitHub Pages, you can automate the deployment process for your web applications, making it easier to publish and share your work with the world. With this simple setup, your application will be automatically deployed to GitHub Pages whenever you push changes to your repository.
In addition to automating deployment, you can create a portfolio webpage to showcase your projects and skills. Customize the HTML and CSS code to reflect your own information and style.
Explore more possibilities with GitHub Actions and experiment with different workflows to streamline your development process. Happy coding, deploying, and showcasing your talent! 🚀💻🌐