Chapter 8 Going live on the internet

This chapter teaches you how to deploy your website to the internet using Netlify and GitHub.

Note: This chapter builds upon the website generated in chapter 4 and edited in chapters 5, 6, and 7. All subsequent chapters will do the same. The final result can be viewed here - https://r4sites-anatole-custom.netlify.app/.

8.1 Prerequisites

Before you proceed, complete the following prerequisites:

  1. (optional) Discover your style
  2. Generate your website
  3. (optional) Fine tune the look and feel
  4. (optional) Configure pages and features
  5. Install Git
  6. Sign up for GitHub
  7. Sign up for Netlify

8.2 How it works

GitHub and Netlify work together to make it remarkably simple to deploy your website to the internet. Simply upload your website codebase to GitHub, then configure Netlify to deploy your website with a few simple clicks. Once your website is live, Netlify will automatically rebuild and redeploy your website any time you push changes to your GitHub repository. This process is known as continuous deployment.

8.3 Upload files to GitHub

To push your website files to GitHub, complete the following steps:

  1. Sign in to GitHub and create a new repository by clicking “New” in the Repositories section. Configure the repository accordingly, then click “Create repository.” Image

  2. On your local machine, launch a Git terminal (e.g. Git Bash on Windows, Terminal on Mac/Linux) and run the following Git commands to initialize a local Git repository and sync it with your remote GitHub repository:

# Change the directory to your website's root folder
cd path/to/your/website

# initialize a local Git repository
git init

# add all of your website files to the local Git repository
git add --all

# commit your website files to the local Git repository
git commit -m "first commit"

# sync the local Git repository with the remote GitHub repository
# change your_username and your_repo to your GitHub username and 
# website repository name
git remote add origin https://github.com/your-username/your-repo.git

# push your files to GitHub
git push -u origin master

8.4 Configure Netlify for deployment

With your website codebase in GitHub, configure Netlify to build and deploy your website with a few simple clicks. Once your website is live, Netlify will automatically rebuild and redeploy your website any time you push changes to your GitHub repository. This process is known as continuous deployment.

Follow these steps to deploy your website on Netlify:

  1. Log in to Netlify and click “New site from Git.”

  2. Select GitHub as the Continuous Deployment provider, then choose your website’s GitHub repository.

  3. Leave the site settings as-is and click “Deploy site” to deploy your website to the internet. Image

  4. After a few seconds, your website will be live on the internet. To view it, return to the Site Overview section and locate the default domain name generated by Netlify. Image

  5. Change your website’s domain name (part of it at least). Default Netlify domain names tend to look something like this - dazzling-khorana-a6a8fe.netlify.app. To change this, go to Site settings > Change site name. Note that the domain extension will remain .netlify.app until you (optionally) purchase a custom domain name.

8.5 Purchase a custom domain name

Netlify’s default domain names use the .netlify.app extension. If you prefer something different, such as .com, you can purchase a custom domain for your website. Though several domain registrars exist, the simplest route is to purchase a domain name through Netlify. If you use a domain registrar other than Netlify (e.g. Google Domains), you will have to manually configure Domain Name Servers and Domain Name System settings. With Netlify, all of this is taken care of for you.

Follow the simple steps below to purchase a custom domain through Netlify:

  1. Log in to Netlify, open your site, and click on “Domain settings.” Image

  2. Under Custom domains, click “Add custom domain.”

  3. Search for a domain name you like, then click “Verify” to determine if the domain is already owned or available for purchase. If available, confirm the purchase with a credit card and (optionally) set the domain name to auto-renew annually. Image

  4. Enable IPv6 to reach areas of the world where connectivity via IPv4 is not possible. Do this by signing in to Netlify and navigating to Team overview > Domains, select your custom domain name, and click “Enable IPv6 on your domain.” Image

8.6 Next steps

Proceed with integrating Google Analytics and learning how to use R and the googleAnalyticsR package to analyze user traffic on your website.