You also need to install Netlify to your GitHub account by clickingInstall. Note that you may have to enter your GitHub password again.

If you successfully connected your GitHub account to Netlify, you should see your GitHub username and forked “deploying-a-static-site-with-netlify-sample” repository under “Continuous Deployment: GitHub App”, somewhat like:

Choose the “deploying-a-static-site-with-netlify-sample“ repository to link it with Netlify.

In the next step, check that the “Owner” dropdown is set to the correct team (your Netlify account name in this case) and “Branch to deploy” is set tomain, like:

Scrolling down, you’ll see options for “Basic build settings”:

Regarding the “Build command” and “Publish directory”, note the following:

• Because this is an HTML, CSS, andJavaScriptbuild, there is no need forbuild commands, which are instructions that Netlify uses to build certain types of sites like those from frontendframeworksandstatic site generators.
• Since no build commands are used for this site, you also don’t need apublish directory, which would contain deploy-ready HTML files and assets generated by the build.

You’re now ready to deploy, so clickDeploy site! You’ll then be directed to the site’s dashboard:

The build status should continue to show “Site deploy in progress” and “Deploying your site” until the site has been successfully deployed. At that point, the status will change to “Your site is deployed” and you’ll see a link to your deployed site:

Click the link, and you’ll be directed to your deployed site:

Notice that the page’s background color changes every time you click the 👏 (clap) button!

Production deploys

You can check the ongoing log that contains in-depth information about the site’s build status, which is especially useful for debugging any errors that may arise. To see these logs, scroll down to the “Production deploys” section of theSite overviewtab:

In the logs, you should specifically look for “Published” or “Failed” statuses:

• A “Published” status means that your site has been successfully deployed.
• A “Failed” status means that something went wrong in the deployment process.

Since every project is unique, the best way to fix a “Failed” deployment is to either google the error or browse throughNetlify’s documentation. With that being said, you may find the following resources from Netlify to be helpful:

• Build troubleshooting tips
• Netlify Community forum
• Frequently encountered problems during builds guide

Next, select theDeploystab located at the top of the site dashboard:

Notice that “Auto publishing is on”, meaning that your site automatically deploys each time you push a commit on GitHub (continuous deployment). Although not recommended, you can turn this setting off by clickingStop auto publishing.

To make changes to your site, update your forked GitHub repository. Here’s a simple example for changing the site’s heading (note that these steps are specific to the GitHub website interface):

• Navigate back to your forked “deploying-a-static-site-with-netlify-sample” repository and make an edit to the<h1>text (e.g., you could change the text inside the<h1>element from “Welcome to your website!” to “Welcome to Jane’s website!”).
• Commit your changes and wait a few moments for Netlify to update the build.
• Like before, you can monitor the build status through the site’s dashboard in your Netlify account.
• After the build is complete, you should notice a difference in your published site’s heading — it’s that easy to make changes to your Netlify site!

Site settings

Let’s now explore theSite settingstab, also at the top of the site dashboard:

Notice that the name of your site is randomly generated by Netlify. To rename your site to something more appropriate, click theChange site namebutton located in the “Site information” panel. From there, you canSavea new unique name, which also determines the site’s default URL, like so:

Next, click theBuild & deploytab on the left to see even more settings that you can manipulate:

You’ll first notice a panel for“Build settings”. As touched upon before, many frontend frameworks likeReactand static site generators likeJekyllrequirespecial build commandsthat tell Netlify how to build your specific site. Build commands weren’t used in this case because it’s only a JavaScript, HTML, and CSS site without any frontend frameworks or static site generators.

While still in theBuild & deploytab on the left, jump down to theDeploy notificationssection:

Here you can configuredeploy notifications, which can inform you or external services about your site’s deploy activity. For example, the various types ofGitnotifications can do things likeadd a comment to your GitHub pull requestsindicating the status of the associated deploy.

Note that some types of notifications are only available with paidNetlify plans.

Wrapping up

Congrats! You’ve just deployed your very own static site using Netlify, and you now know how to share your websites with the world. Specifically, you learned about:

• The use-case of static sites.
• Deploying a static site through Netlify’s GitHub integration.
• Analyzing the site logs and debugging “Failed” deployments.
• Using auto publishing to make changes to the site.
• Various site settings like build commands and deploy notifications.

Most importantly, notice how many configurations Netlify handled throughout the process — deploying an entire site only took a few clicks!

Although you’ve used Netlify to deploy a static site, there’sso much morethat it can do! Features like pre-built forms, in-depth analytics, and built-in user authentication can take your websites even further.

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'