DEV Community

Cover image for Netlify makes your entire Project in One Click Action
Nidhi Ojha
Nidhi Ojha

Posted on

Netlify makes your entire Project in One Click Action

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/

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/

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

Step 2: Deploy project manually

After clicking on Add new site you will get dropdown list so select Deploy manually

n2.png

Step 3:Drag and Drop your site output folder

n3.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

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

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

n5.png

n8.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
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

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

n11.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

Here if you see the differences of my initially new site Vs updated site
n13.png

n14.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://hashnode.com/@ojhanidhi036

Top comments (0)