40 minutes
There are two types of content on the web:
- Static content: Static content doesn't change -- the server will always serve the exact same data to the client. NOTE: This doesn't meant that the content can't be interactive or use client side Javascript, just that the Javascript that the server sends to the client will always be the same.
- Dynamic content: Content that is computed by the server and can change based on code that is executed on the server.
Static content is much much simpler and cheaper to deploy. Since the content is static, the server doesn't need to run any custom code and can instead just serve static files which is highly optimized.
Your personal site is static (probably!) and is a good canidate to be deployed with a static hosting provider.
For deploying your personal site, we'll use Netlify which is a great static hosting provider. Netlify will allow you to take a GitHub repository with your personal site made with React (or another static site builder like Hugo) and deploy it to the internet.
- Go to https://netlify.com and find the button to sign up.
- Connect your GitHub account and select the repository you want to deploy.
- Debug! It might take some tweaks. If you need to run a command to build your site, eg.
yarn build
, you might need to configure that on Netlify. If your site isn't working properly, find the deploy logs and try to figure out what's wrong. If you are stuck, ask for help! - Success! Your site is on the internet, but it will be on a pretty bad url like flying-zombies.netlify.com. Setup Netlify with a custom domain. You'll need to configure the nameservers for your domain (on the website of the company you purchased the domain from) to point to Netlify instead. Netlify provides fairly detailed instructions, but feel free to ask for help if you get stuck. Because of the layers of caching inherent in DNS (see "How the Internet Works") it will take a few minutes (or a couple of hours) for your changes to take effect.
- 'Deploying on Netlify' tutorial with screenshots.
- Here is a video tutorial of a static-site deployment with Github and Netlify that includes the use of environment variables.
- Deploy an existing project in your GitHub account to Netlify. It doesn't have to be pretty.
- There's no need to choose a custom domain, template, or https - these are just options that you could use in the future.