netlify.com

Deploy your static website on Netlify

In college days, I always wonder how to deploy my website and I used to think that it is a big and complicated process to deploy even for a simple static website. But now I can say Netlify solved this problem for most of the developers who are looking to deploy their static website.

First, go to netlify.com and Sign up there, Remember, to do the first login you have to verify your account from an email sent by netlify to your registered email address.

After logging in, you can see below image, I have already deployed 3 projects that’s why they are on display in the image below:

Netlify.com

There are three ways to deploy a site on netlify:

1. By simply drag and drop your project folder here.
2. By adding your GitHub your account.
3. By adding your git to your netlify account(kind of automation).

For a client perspective, I think drag and drop is a better choice as you don’t want to add your GitHub to a client’s netlify account. Also, drag and drop is quick and easy to understand for people who don’t know about git and GitHub.

So go to your project folder’s location, drag it here and wait for a few moments to see it deployed and tadaann the initial deployment is complete.

In the below screenshot you can see the name which is generated by netlify and just below that your website link(i have blurred it)in green colour would be activated.

Note: Your netlify subdomain can be in either form of mynetlify.com or mynetlify.app, as netlify updated it recently in April 2020.

Netlify.com

If you are a college student and just want your website to deploy somewhere then this is done for you, you can share and show this link to your teachers/mentors or to the external invigilator in semester submissions.

Now if you want to deploy it on a custom domain then let’s start.

Hoping you have a registered domain, if not then you can buy it from Hostinger at cheap price.

Now in the above image, you can see three steps:

1. Your site is deployed with a right tick means we already completed the first step,
2. Set up a custom domain,
3. Secure your site with HTTPS.

netlify.com

Now go to step two and click on it, you can see something shown in the image:

Type your domain here in the format of placeholder and click verify. It may ask you “if you are the owner of the domain” click yes and don’t bother if it may not ask you anything.

Now you can see a page similar to the below image. Here in domain management, you can see three domains:

1. Default subdomain of netlify in green colour.
2. Then your Primary domain.
3. Then your subdomain which redirects to your Primary domain.

You can see an alert “Check DNS configuration” in the same line of your domains, which means you have to change your domain’s DNS settings and you have to add “A” record & “CNAME” record.

Now go to the site from where you have purchased your domain and then go to the Domains tab in your team dashboard and select the domain you want to edit:

1. At the bottom of the DNS records panel, select Add new record.
2. Choose the type of record to create from the dropdown menu and fill in the remaining options. The fields you need to fill out will depend on the type of record you select.
3. Select Save to create the record and make the changes live.

netlify.com

Your ‘A’ and ‘CNAME’ record would look like this and the value of CNAME will be subdomain generated by netlify for your website.

Check the documentation or comment if you have any confusion in setting records.

Note: it can take up to a few hours for record changes to publish.

Now go back to your netlify account and refresh and you can see those alert signs are not there anymore because the record changes are published.

Now you can run your site on your custom domain, remember it will run in non-secure mode(http://yourdomain.com) as you have still not verified the DNS configuration or not secure your site with HTTPS which is our third step mentioned in starting of this blog.

So now in the domain management, you can see “HTTPS” at the last and you need to click on “Verify DNS configuration” and after clicking you can see a message displaying there which is “DNS verification was successful”.

This will complete your deployment process and you can see your website is deployed on your custom domain in secure https.

Now if you want to update the changes on your website then:

1. Login to your netlify account,
2. Select the project,
3. Go to ‘Deploys’ in breadcrumbs/navbar,
4. Drag & drop your project folder,
5. Netlify will publish the changes in a few seconds.

Okay, that’s it, go and deploy as many websites as you can.

For video tutorials, you can check out “Dev Ed” on youtube and his video here.

Remember we talked about that there are other two methods as well to deploy your website on netlify, so for that, you can check the youtube channel Traversy Media and this channel has a video tutorial that explains how to add your Git and Github to netlify, check out the video here.