Open In App

Deploying Static Sites On Netlify With Continuous Integration

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

gfg-code


Step 2: Make a github repository

  • Create an empty github repository
  • and then push your local code in the same repository
git-repo
empty repository

Step 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
git-init
initializing git

git-push

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

github-repo

Step 4: Go to the Netlify website

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

netlify

select-repo

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

Now you can see your website is successfully deployed.

take-time-to-deploy

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.


Next Article
What is DevOps ?

D
devanshuma3v23
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox