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/.
Before you proceed, complete the following prerequisites:
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:
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:
Log in to Netlify and click “New site from Git.”
Select GitHub as the Continuous Deployment provider, then choose your website’s GitHub repository.
Leave the site settings as-is and click “Deploy site” to deploy your website to the internet. Image
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
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.appuntil 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:
Under Custom domains, click “Add custom domain.”
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
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.