Netlify makes your entire Project in One Click Action
Published: 2022-03-14 15:05:19

Well you have completed your javascript project and feeling proud of yourself and want to show your hard work with your friends, family etc. Here,the question is what will be the shortest and fastest way to show your project or hard work to anyone with just one click action.

In this blog, you will learn how to publish your javascript project using popular platform-**Netlify**

Before i start, would like to give little description about my javascript project so that you will be able to understand what project is about and after all it's my hardwork which i want to share with you . 
In real-time scenarios, there may be a requirement to put an image slider on the application web page. If the slider requirement is simple and short, building your own slider using HTML and JavaScript can be one of the best ways to achieve it. This will take less time to implement and give no conflicts/errors.

**Just your one click on this link you will be redirect to my project website.**

[https://image-slider-javascript.netlify.app/](https://image-slider-javascript.netlify.app/)

Basically just want to mention that this is the way where you can publish your  project on netlify and get a link of your project so that you can share with anyone at anytime through link like above the link of my project which i have shared with you .

## How to Publish a Website on Netlify

_The first method we're going to explore is how to publish your website on Netlify._

Netlify is a platform for hosting webistes. It is easy to host sites on Netlify as you don't need to configure it manually- and best of all, it's free. If you haven't signed up for an account, now is a good time to do so. Click on this link and sign up.
[https://www.netlify.com/](https://www.netlify.com/)

Here's the step-by-step process of publishing your website on Netlify:

### Step 1: Add your new site
Once you've logged in, it will take you to a home dashboard. Click the **Add new site** button to add your new website to Netlify.

![n1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647023459909/BHIybRdZi.png)

### Step 2: Deploy project manually
After clicking on **Add new site** you will get dropdown list so select **Deploy manually**

![n2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647024966325/SdhoKPhWP.png)

### Step 3:Drag and Drop your site output folder

![n3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647025351197/3Dg5BqAd3.png)
Once you redirected on this page then just follow your project location and drag your project folder and drop into the deployement box. See here i have followed my project folder location to drag my project to drop in deployment box.

![n4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647025984168/Rx2TAEIw0.png)

### Step 4: Publish your website
Your website is now ready to publish!
Netlify will do the rest of the work for you, and it will only take less than 10 seconds to complete the process.

Now you are done! Your new website is published, and you can view it by clicking the green link.

![n5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647027416619/VvXhgOqx3.png)

### Step 5:Change site name(optional) 
Right now, your URL looks random, but you can edit it by clicking the **Site settings** button and then the **Change site name** button.

![n6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647028628898/ZdJfxY3c4.png)

![n5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647028575157/3K--TCnoC.png)

![n8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647028670835/sBk1NAMLV.png)
Click on **Save** button . Congratulation on publishing your first new website!


## How to update a website manually deployed on Netlify

_The second method we are going to explore is how to deploy project again on the same site on netlify after done some changes in the same project files._

### Step 1: Select the website you have manually deployed

![n9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647192597351/zD2KjoCF_.png)
Here, I have selected the website which i have manaully deployed and want to deploy  project folder again on the same link after done some changes in the same project.

### Step 2: Select the Deploys tab and reupload your project folder

![n10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647192986143/roLKFC-Ca.png)

Once there click on Deploys then drag and drop your new website files into the Netlify deployment box.

![n11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647194401504/23C3-AURz.png)

See in the below image am updating my site through drag and drop. Once dragged and dropped the website will automatically publish your website files and you should see the word "published" in green.

![n12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647195090050/4kff0JNrL.png)
 

Here if you see the differences of my initially **new site** Vs **updated site**
![n13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647195842546/lsn2PV0XI.png)

![n14.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647196213904/jR3wnFQTm.png)

## Conclusion

I hope you've found this blog helpful. You have learned how to deploy your website manually with Netlify. Now you can go ahead and show the world of your incredible work.

**Follow me for such contents**

[https://twitter.com/89NidhiOjha1](https://twitter.com/89NidhiOjha1)
[https://hashnode.com/@ojhanidhi036](https://hashnode.com/@ojhanidhi036)