Hello, friend! 👋 This is your step-by-step guide to showcase your amazing website to the world using Netlify, GitHub, and your very own custom domain. Let's do this!
FINAL PRODUCT: Next Dot Jobs
Go to the Netlify website and sign up for a free account.
1. Log into Netlify and click on "New site from Git"
2. Select GitHub as the Source
3. Deploy your website from the Main Branch
4. Ta-da your website has been deployed!
5. You can change the name of the website now, or not. Since we are going to use custom domain at the end of the day anyway
With Netlify and GitHub connected, your site on Netlify will automatically update whenever you push changes to your GitHub repository. But this time we want to do CI/CD using Branch and Pull Request.
- Git clone your respository that you use to deploy your site on Netlify, You can use Terminal, 3rd Party CLI, or VS Code. In this case we use Hyper.is
- Add the files that you want to have into the folder above 👆🏻 or you can edit the codes directly in VS Code then save
- Push the file into your branch
Once you have made the changes you want locally, the next step is to push those changes to your remote branch on GitHub. Below are the steps to do that.
First, navigate to your project directory using the terminal.
cd your-project-directory
Use git add to stage your changes. This tells Git that you want to include the updates from these files in the next commit. To add all the files in the directory, use:
git add .
Now you commit the changes. A commit is like a snapshot of your code at this point in time. Include a descriptive message with your commit summarizing what changes were made.
git commit -m "Your descriptive message here"
Now you're ready to send your changes to GitHub! If you're working on a branch named IMPROVEMENT1, push your changes like so:
git push origin UI-UX-improvement-1.0
After running this command, your changes are now in the IMPROVEMENT1 branch on GitHub.
Remember, it's important to make sure that your local branch and your remote branch are in sync before you start making changes. Use git pull origin BRANCHNAME to update your local branch with the latest changes from the remote before you start making your own changes.
- Open Git and Find Request for Pull Request and Click. This Screen should appear. Create the Pull Request and write relevant message
- Approve the Pull Request
- Check if the Pull Request is successful
Different sites have different pathway to buy a domain. Most of the flows are the same though. This is how Hostinger does it:
- In your Netlify dashboard, go to "Domain settings" for your website.
- Click "Add custom domain" and enter your domain name.
- Go to your domain registrar's dashboard and follow this CloudFlare instruction
- Update the DNS settings to point to Netlify's servers (Netlify will provide the necessary details).
And voila! Your website is now live on the internet at your custom domain and will automatically update with changes from your GitHub repository. Enjoy!
Have fun deploying! 🎉