Skip to content

Commit c12c4d1

Browse files
SaipradyumnagoudSaipradyumnagoud
authored
Added How To host using Vercel (#516)
1 parent f138286 commit c12c4d1

File tree

2 files changed

+209
-0
lines changed

2 files changed

+209
-0
lines changed

‎posts/images/How-to-Host-Using-Vercel.png

2.34 KB
Loading

‎posts/technology/How-to-Host-Using-vercel.html

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="description"
7+
content="Learn how to deploy websites on Vercel, including setting up a project, configuring build settings, and using continuous deployment." />
8+
<meta name="keywords"
9+
content="Vercel, Web hosting, Continuous deployment, Static site generators, Git integration, Developer tools, Setup, Deployment, Cloud hosting, CI/CD" />
10+
<title>Vercel: Simplifying Your Web Deployments</title>
11+
<meta name="vaishali-sharma-20" content="CSEdge" />
12+
<!-- Favicon-->
13+
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
14+
<!-- Core theme CSS (includes Bootstrap)-->
15+
<link href="../styles.css" rel="stylesheet" />
16+
<link rel="stylesheet" href="../../css/main.css">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
18+
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
19+
</head>
20+
21+
<body>
22+
<!-- Responsive navbar-->
23+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
24+
<div class="container">
25+
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
26+
<a class="navbar-brand" href="./index.html">CSEdge Learn</a>
27+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
28+
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
29+
aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
33+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
34+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex">
35+
<li class="nav-item me-2">
36+
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
37+
</li>
38+
<li class="nav-item me-2">
39+
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i>
40+
About</a>
41+
</li>
42+
<li class="nav-item me-2">
43+
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i>
44+
Contact</a>
45+
</li>
46+
<li class="nav-item me-2">
47+
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i>
48+
Blog</a>
49+
</li>
50+
</ul>
51+
</div>
52+
</div>
53+
</nav>
54+
55+
<!--Page Content-->
56+
57+
<div class="container mt-5">
58+
<div class="row">
59+
<!-- Blog entries-->
60+
<div class="col-lg-8 py-6">
61+
<h1 class="pt-5">Vercel: Simplifying Your Web Deployments</h1>
62+
<!-- Featured blog post-->
63+
<div class="card mb-4">
64+
<div class="card-body">
65+
<main class="container">
66+
<section>
67+
<p>Deploying websites can often be a complex and cumbersome process, but Vercel offers
68+
a simplified solution for developers of all skill levels. This powerful platform
69+
provides continuous deployment, static site hosting, and a variety of other features
70+
to streamline your web projects. In this guide, we'll explore the benefits of using
71+
Vercel and provide a step-by-step tutorial on how to deploy your website.</p>
72+
</section>
73+
<section>
74+
<h3>What is Vercel?</h3>
75+
<p>Vercel is a cloud-based platform that automates the deployment and management of
76+
modern web projects. It supports continuous deployment from Git repositories,
77+
serverless functions, and a host of other features designed to make web development
78+
easier and more efficient. Whether you're working on a personal project, a client
79+
site, or a large-scale application, Vercel offers a robust set of tools to support
80+
your workflow.</p>
81+
<h4>Benefits of Using Vercel </h4>
82+
<ul>
83+
<li><b>Continuous Deployment:</b> Vercel automatically deploys your site whenever
84+
you push changes to your Git repository, ensuring your website is always up to
85+
date.</li>
86+
<li><b>Static Site Hosting:</b> Vercel specializes in hosting static websites,
87+
which can be faster and more secure than traditional server-rendered sites.</li>
88+
<li><b>Custom Domains:</b> You can use your own domain name with your Vercel-hosted
89+
site, giving it a professional appearance.</li>
90+
<li><b>Serverless Functions:</b> Vercel allows you to run serverless functions,
91+
enabling dynamic functionality without the need for a traditional server.</li>
92+
<li><b>Easy Configuration:</b> Setting up a project on Vercel is straightforward
93+
and user-friendly, with a variety of options for customizing your build and
94+
deployment settings.</li>
95+
</ul>
96+
</section>
97+
<section>
98+
<h3>How to Deploy a Website Using Vercel</h3>
99+
<p>Deploying a website on Vercel is a simple and efficient process. Follow these
100+
steps:</p>
101+
<ol>
102+
<li>Sign up for a Vercel account at <a href="https://www.vercel.com">Vercel</a>.</li>
103+
<li>Create a new project by connecting your Git repository (GitHub, GitLab, or Bitbucket).</li>
104+
<li>Select the repository containing your website files.</li>
105+
<li>Configure the build settings, including the build command and output directory.</li>
106+
<li>Click "Deploy" to start the deployment process.</li>
107+
<li>Once the deployment is complete, your site will be live at a Vercel-provided URL. You can configure a custom domain if desired.</li>
108+
</ol>
109+
<p>By following these steps, you can quickly and easily deploy your website using Vercel and take advantage of its powerful features.</p>
110+
</section>
111+
</main>
112+
</div>
113+
</div>
114+
</div>
115+
<!-- Side widgets-->
116+
<div class="col-lg-4 pt-5">
117+
<!-- Search widget-->
118+
<div class="card mb-4">
119+
<div class="card-header">Search</div>
120+
<div class="card-body">
121+
<div class="input-group">
122+
<input class="form-control" type="text" id="searchInput" placeholder="Enter search term..."
123+
aria-label="Enter search term..." aria-describedby="button-search" />
124+
<button class="btn btn-primary" id="button-search" type="button" onclick="search()">
125+
Go!
126+
</button>
127+
</div>
128+
</div>
129+
<!-- Search Results -->
130+
<div id="searchResults"></div>
131+
</div>
132+
<!-- Categories widget-->
133+
<div class="card mb-4">
134+
<div class="card-header">Categories</div>
135+
<div class="card-body">
136+
<div class="row">
137+
<div class="col-sm-6">
138+
<ul class="list-unstyled mb-0">
139+
<li><a href="#!">Web Design</a></li>
140+
<li><a href="#!">HTML</a></li>
141+
<li><a href="#!">Freebies</a></li>
142+
</ul>
143+
</div>
144+
<div class="col-sm-6">
145+
<ul class="list-unstyled mb-0">
146+
<li><a href="#!">JavaScript</a></li>
147+
<li><a href="#!">CSS</a></li>
148+
<li><a href="#!">Tutorials</a></li>
149+
</ul>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
<!-- Side widget-->
155+
<div class="card mb-4">
156+
<div class="card-header">Recent Posts</div>
157+
<div class="card-body">
158+
<p>Coming Soon..!</p>
159+
</div>
160+
</div>
161+
<div class="card mb-4">
162+
<div class="card-body">
163+
<script async
164+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
165+
crossorigin="anonymous"></script>
166+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
167+
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
168+
data-ad-slot="9866674087"></ins>
169+
<script>
170+
(adsbygoogle = window.adsbygoogle || []).push({});
171+
</script>
172+
<script async
173+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
174+
crossorigin="anonymous"></script>
175+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
176+
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
177+
data-ad-slot="9866674087"></ins>
178+
<script>
179+
(adsbygoogle = window.adsbygoogle || []).push({});
180+
</script>
181+
<script async
182+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
183+
crossorigin="anonymous"></script>
184+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
185+
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
186+
data-ad-slot="9866674087"></ins>
187+
<script>
188+
(adsbygoogle = window.adsbygoogle || []).push({});
189+
</script>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
<!-- Footer-->
196+
<footer class="py-5 bg-dark">
197+
<div class="container">
198+
<p class="m-0 text-center text-white">
199+
Copyright &copy CSEdge Learn 2024
200+
</p>
201+
</div>
202+
</footer>
203+
<!-- Bootstrap core JS-->
204+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
205+
<!-- Core theme JS-->
206+
</div>
207+
</body>
208+
209+
</html>

0 commit comments

Comments
 (0)