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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>w3wiki</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<h1>w3wiki</h1>
</nav>
<main>
<section>
<h2>What is w3wiki?</h2>
<img src="https://media.w3wiki.org/img-practice/prod/courses/1/Web/Other/aboutCourse_1686633267.png"
alt="">
<p id="section1">w3wiki 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 w3wiki?</h2>
<img src="https://media.w3wiki.org/img-practice/prod/courses/1/Web/Other/aboutCourse_1686633267.png"
alt="">
<p id="section2">The main purpose of w3wiki 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 w3wiki?</h2>
<img src="https://media.w3wiki.org/img-practice/prod/courses/1/Web/Other/aboutCourse_1686633267.png"
alt="">
<p id="section3">The vision of w3wiki 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>
* {
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;
}
var sectiontitle = document.querySelectorAll('section');
sectiontitle.forEach(function(section) {
section.addEventListener('click', function() {
console.log(section.childNodes[1].textContent);
});
});
Deploying Static Sites On Netlify With Continuous Integration
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.