How To Deploy Your First Netlify App

How To Deploy Your First Netlify App

Learn how to share your website on the Internet!

Start

10

Created by Julie Young

Congratulations! At this point, you have created your first custom website. It looks great!

Whether you used React, Angular, or pure JavaScript to code up your site, it's time to share your site so others can see it too.

In order to let everyone find and access the site, we will need to deploy it. This puts it onto the Internet and allows it to be findable and shareable by the general public.

If you haven't created your own site yet, that's totally fine! After creating an account, Netlify has templates available for you to get started. However, this tutorial will primarily focus on deploying an existing site.

Alternatively, if you are interested in creating your own site from scratch, feel free to check out a video on getting started with web development before returning to this tutorial.

10

10

Why Use Netlify?

Manually completing all the steps of the deployment process is complicated. Netlify can streamline the entire process into a few simple steps while managing a lot of the overhead for you! Through an intuitive user interface, you can get started with your site quickly and easily.

+info

10

10

Roadmap

Step 3

Step 5

Step 1

Connect Netlify to codebase

Domain Name

Code Set Up

Step 4

Step 2

Configure Repository

Create Your Account

10

10

1) Set Up Your Code

There are multiple ways to connect your code with Netlify. This includes putting your code in:

• GitHub
• GitLab
• Bitbucket
• Azure DevOps
• Output Folder

For the purposes of this tutorial, we will be focusing on connecting to our code using GitHub. If you are unfamiliar with GitHub but would like to use it, feel free to check out a tutorial on getting started with GitHub.

2) Create An Account

If you do not already have an account, you will need to make one! You can do so by visiting netlify.com Once on the page, click the sign-up button and follow the prompts with your preferred sign-up method. Following the steps will allow you to register and verify your account.

After finishing set-up, you should be taken to your dashboard where you can see the options that are available to you. If you do not yet have a project ready, you can explore the templates.

10

10

4) Configure Your Repository

3) Connect Netlify to GitHub

• Select the repository that you would like to deploy out of your list of repositories.
• Here, you will be able to choose your Team and Site name as well as configure some basic settings.
• Important: Make sure to set your environment variables here. This can include any IDs, database keys, etc.

• Once you have created an account, select the Import from Git option in the center of your dashboard.

• On the following screen, select that you want to deploy your project with GitHub.
• Follow the instructions to connect your GitHub account with your Netlify account. If successful, you will see a list of available repositories.

• Once finished with configurations, select the deploy button!
• You should be taken to the following screen where a menu with more information is circled.

10

10

10

10

You have just deployed your website! It may take some time for the site to completely finish setting-up. Once finished, it will provide a link for you to see your website which is now viewable on the Internet!

Netlify provides a side menu with additional information about your site!

• Site configuration: you will be able to edit some of the configurations that you set to begin with and see more detailed information.
• Deploys: see additional information about whether your site has been successfully deployed
• Domain management: update your domain information (more information in the next section)

10

10

5) Updating Your Domain

Alternatively, you domain name may be registered through an external site. This can be done through many plaforms including GoDaddy and Squarespace. Check out the video below for further information on external domain registrars.

After deploying your website, you will be provided with a default domain. This is represented by the URL that the site is deployed at. The default is pretty meaningless, so you may want to update it to something more descriptive. For example, if you are creating an online shopping platform, you may want to call your site myshop.com.

+info

You will need to start by registering your domain name so that it cannot be taken by anyone else. This can be done directly on the Netlify site. Step-by-step instructions can be found in the Netlify docs:

Connecting your domain to your Netlify site will require a litle bit more set-up. It will also vary depending on the exact platform that your domain name is configured on. Further instructions can be found in the External DNS section of the Netlify docs:

10

10

Quiz: Test your knowledge!

10

10