DEV Community: Nidhi Ojha

Netlify makes your entire Project in One Click Action

Nidhi Ojha — Mon, 14 Mar 2022 15:05:19 +0000

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.

Step 2: Deploy project manually

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

Step 3:Drag and Drop your site output folder

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.

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.

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.

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

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

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

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.

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

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

Essential Git Commands

Nidhi Ojha — Wed, 16 Feb 2022 08:04:37 +0000

Git Configuration:

git config --global user.name=“Your Name”

Set the name that will be attached to your commits and tags.

git config --global user.email “you@example.com”

Set the e-mail address that will be attached to your commits and tags.

To view the configuration:

git config --global user.email
git config --global user.name

Create a project on your computer:

mkdir [projectname]

cd [projectname]

to initialize empty Git repository inside your project folder:

git init

to view files inside your project folder:

ls

It will show list of files.

ls -a

To view hidden files(.extension-file) inside project folder.

touch (filename)

To create new/empty file.

It allows us to see the tracked, untracked files and changes.

git status

Add a particular file to the staging area.

git add [filename]

git add .

Create a new commit from changes added to the staging area.
The commit must have a message!

git commit -m [message]

It shows the list of commits of current branch.

git log

To unstage your file/Removing changes from staging area

git restore --staged [filename]

To remove a commit from the history of a project.

git reset [commit hascode]

Git has an area called the stash where you can temporarily store a snapshot of your changes without committing to the repository.

git stash

Apply stored stash content into working directory, and clear stash.

git stash pop

Delete a specific stash from all your previous stashes.

git stash drop

Connect remote repository to local repository by using this command

git remote add origin [url]

pushing local changes to remote repository:

git push origin master/ git push -u origin master

A fork is a rough copy of a repository. Generally forking a repository allows us to experiment on the project without affecting the original project
Reason for forking the project
1.propose changes to someone else's project
2.Use an existing project as a starting point.

Cloning the forked project to local

git clone [url]

After cloning you will be able to see clone project inside your project folder.

upstream : upstream generally refers to the original repository that you have forked from other git repositories.

git remote add upstream [url]

For viewing both url (origin and upstream):

git remote -v

Create new branch:

git branch [branchname]

The git checkout command switched branches or restores working tree files. It allows switching between multiple branches in a single repository.

git checkout [branchname]

It shows the list of branches.

git branch

Why we create new branch?
=>Because we want to open a new pull request and we can only open a new pull request with a new branch. In simple language one pull request means one branch.
Never commit on main branch and create our pull request first.

Conclusion

That's a wrap! You've made it to the end of the blog!
link mentioned below for other blog about the introduction of the git.
Introduction to Git

Follow me on Twitter for such contents