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.,
mainormaster).Choose the root folder for your GitHub Pages site (e.g.,
/rootor/docs).Click Save.
GitHub Pages will now be enabled for your repository, and your website will be published at https://your-username.github.io/your-repository/.
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: JamesIves/github-pages-deploy-action@3.7.1
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 gh-pages branch.
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:
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
align-items: center;
padding: 20px;
}
header img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
section {
padding: 20px;
}
h1,h2 {
color: #333;
}
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
footer a {
margin-right: 10px;
}
</style>
<body>
<header>
<img src="https://github.com/ashutosh7i.png" alt="Profile Picture">
<h1>Aashutosh Soni</h1>
</header>
<section>
<h2>About Me</h2>
<p>I'm a passionate web developer with experience in HTML, CSS, and JavaScript. I love creating beautiful and interactive web applications.</p>
</section>
<section>
<h2>Projects</h2>
<ul>
<li>
<a href="https://github.com/ashutosh7i">Project 1</a>
</li>
</ul>
</section>
<footer>
<a href="https://github.com/ashutosh7i">GitHub</a>
<a href="https://linkedin.com/in/ashutosh7i">LinkedIn</a>
</footer>
</body>
</html>
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!
Conclusion
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! 🚀💻🌐
Top comments (0)