Deploying Static Sites On Netlify With Continuous Integration
Last Updated :
08 Apr, 2024
when we are talking about DevOps In today's fast-paced digital world. deploying the website is one of the most crucial tasks. we need to focus on different parameters to make a website production-ready. The website updates from time to time according to the requirements, and whenever we make changes in the code, we need to push the changes in the central codebase again and again. This is a time-consuming process, so here is the solution, which is called continuous integration. In this article, we are going to discuss how to use Netlify with continuous integration to deploy static sites.
What is Netlify?
Netlify is a cloud-based platform where you can host and deploy your website. It provides a variety of features that will ease your tasks. for example, it will enhance security by providing an SSL certificate and You can connect your Git repository to Netlify, which automatically detects changes in the code and deploys the changes to the server.
What is continuous integration?
Continuous Integration is used to automate the task of pushing the local changes to the central server. so you don't need to repeat the same task. Continuous integration tracks changes, fixes bugs, and reduces conflicts in the code.
How to Deploy Static Sites on Netlify with Continuous Integration
In this example, we are going to use Netlify to deploy our site with continuous integration. so here we are using Git and GitHub which are version control tools git tracks the changes we make in our code and Github is the place where we store our codebase. it is a cloud platform. Now make sure that git is installed on your local system and that you have a GitHub account. so first of all, we create a static website using HTML, CSS, and JavaScript.
Step 1: Write the code for your website.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>geeksforgeeks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<h1>GeeksforGeeks</h1>
</nav>
<main>
<section>
<h2>What is GeeksforGeeks?</h2>
<img src="https://media.geeksforgeeks.org/img-practice/prod/courses/1/Web/Other/aboutCourse_1686633267.png"
alt="">
<p id="section1">GeeksforGeeks is a computer science portal for geeks. It contains computer science and
programming articles, quizzes, and practice problems.</p>
</section>
<section>
<h2>What is the purpose of GeeksforGeeks?</h2>
<img src="https://media.geeksforgeeks.org/img-practice/prod/courses/1/Web/Other/aboutCourse_1686633267.png"
alt="">
<p id="section2">The main purpose of GeeksforGeeks is to help students and professionals learn computer
science and programming easily. It is a platform to learn and practice computer science and programming
problems.</p>
</section>
<section>
<h2>What is the vision of GeeksforGeeks?</h2>
<img src="https://media.geeksforgeeks.org/img-practice/prod/courses/1/Web/Other/aboutCourse_1686633267.png"
alt="">
<p id="section3">The vision of GeeksforGeeks is to provide free computer science and programming resources
to help students learn computer science easily and find job opportunities in IT companies.</p>
</main>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "gilroy", "Poppins", sans-serif;
}
html,
body {
height: 100%;
width: 100%;
background-color: #e0e0e0;
}
nav {
width: 100vw;
height: 15vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add this line for shadow effect */
}
nav h1 {
font-size: 2rem;
color: green;
}
main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
section {
width: 300px;
height: 300px;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
padding: 5px;
gap: 10px;
margin: 40px 20px;
}
section img {
width: 100%;
height: 39%;
object-fit: cover;
background-position: center;
border-radius: 5px;
}
JavaScript
var sectiontitle = document.querySelectorAll('section');
sectiontitle.forEach(function(section) {
section.addEventListener('click', function() {
console.log(section.childNodes[1].textContent);
});
});
Output

Step 2: Make a github repository
- Create an empty github repository
- and then push your local code in the same repository
empty repositoryStep 3: Push the local code in github repository
- Open terminal and firstly change the directory your code is available
- cd <directory name >
- Then use git command or VS code GUI tool to push your code on github
initializing git
Command used to push the code in Github
git init
git add .
git add remote <remote-name> <remote-url>
git push <branch_name>
if you are code is successfully uploaded so refresh the page and you can see the all files in the repository

- sign up or log in using your github account.
- then import the repository you want to deploy


Then use default setting and simply click on Deploy button and it will take some time and your website will be deployed.

Now you can see your website is successfully deployed.

now you can open the website by click on the link which is appear with https configuration.
Why we use Netlify with git and Github
in this example we use the version control tools like git and github which will track every single change in the code and then we can push those changes in the cloud storage which is provided by the github. and we deploy our website using github on the netlify. it will also track the changes in the repository and update it which will reflect in the website. so here we just need to do changes in our local codebase and just push the code in the github single time and it will automatically reflect in the website.
Custom Domain and HTTPS
if you create custom domain so it will makes your website appear more established and trustworthy. and HTTPS will ensure that the website is secure so it will help in SEO although nelify provides a domain name example your-website-name.netlify.app but if you want so you can add your custom domain name and netlify ask to follow some verification instruction and your repository will be display in the domain.
Similar Reads
Continuous Integration With Azure Pipelines
CI is a software development practice where members of a team integrate their work frequently. They typically do this by merging their code changes into a shared main branch at least daily. Each integration is then verified by an automated build process, which runs tests to detect integration bugs a
13 min read
Continuous Deployment to Kubernetes with GitOps
GitOps is the mechanism that a few companies like Google, Lyft, etc., has chosen to manage their workflows with. It is a modern approach to the implementation of mechanisms for sucking CD/CI (Continuous integration / Deployment) as git repositories are the only source of truth for your infrastructur
14 min read
How To Set Up Continuous Integration With Git and Jenkins?
Continuous Integration (CI) is a practice where developers integrate their code into a shared repository frequently, ideally several times a day. Each integration can then be verified by an automated build and automated tests. This practice helps to detect errors quickly and improve software quality
4 min read
Continuous Integration For NPM Project in Ubuntu
In this post, we'll see how to make a continuous integration pipeline for an npm project in Jenkins. We will be building, testing, and then finally packaging our npm project in Jenkins. You can refer to the this article to know the basics of docker and Jenkins. All these commands and steps are valid
3 min read
Continuous Integration and Continuous Testing: The Dynamic Duo
CI and CT are mandatory and widely used practices in modern software development that aim to increase productivity, code quality, and software reliability. This article elaborates on these practices, their processes, and related methodologies.Table of ContentUnderstanding Continuous Integration (CI)
5 min read
Deploying Python Applications with Gunicorn
Gunicorn `Green Unicorn` is a pure Python HTTP server for WSGI applications, originally published by Benoit Chesneau on 20th February 2010. Itâs a WSGI (Web Server Gateway Interface) HTTP server, a calling convention used for a group of web servers that forward requests to web applications or framew
6 min read
Docker - Continuous Integration
Continuous Integration ( CI ) with Docker improves the productivity of software development. Docker make the applications portable and independent of the system making its environment uniform. Development of the pipelines can be improved with CI technology tools like Jenkins which automates building
8 min read
Continuous Deployment with Docker Swarm: Automating Container Releases
In software development, specifically for software update and feature addition, it is a very agile world. Continuous Deployment (CD) is crucial and is supported by such practices to automate the frequent delivery of new features and/or updates in coding changes to the production environment with min
6 min read
Implementing Continuous Integration And Deployment (CI/CD) With AWS CodePipeline
In the Rapid field of software development, implementation of Continuous Integration and Deployment ( CI/CD )Â is essential for dependable and effective applications. This Article explores the streamlined process of setting up CI/CD using the AWS Code pipeline automating the build, test, and deploym
9 min read
How to Deploy React App on Netlify Using Github?
A React App is a web or mobile application that is built using the React library of JavaScript. It helps users create interactive, single-page, and dynamic applications. These applications are built using HTML, CSS, and JavaScript. Deployment of a React app can be done via GitHub, Netlify, or any ot
6 min read