Hey devs, itโs time to elevate your web presence with GitHub Pages! This guide will walk you through deploying your project to a custom domain in no time.
First Things First: Initializing gh-pages
Before we dive into the exciting world of GitHub Pages, make sure you've already created the gh-pages branch. Itโs simpler than it sounds!
Just follow these commands:
git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Initializing gh-pages branch"
git push origin gh-pages
git checkout main
Great! Now youโve set up your GitHub Pages branch and are ready to move forward.
Hostinger & GitHub: Web Setup Made Easy! ๐
Note: This guide is tailored for using a domain purchased on Hostinger for your GitHub Pages project. If youโre using a different domain service, the process might have some variations, but the core steps will be similar.
When deploying your project with GitHub Pages, the deployed page's URL usually looks like "yourname.github.io/projectname," based on your GitHub username and repository name.
However, if you use a repository named "yourusername.github.io," you can host your project directly under your custom domain without needing a project name in the URL.
Step 1: Accessing Hostinger Domain DNS Settings ๐๏ธ
To get started, visit your Hostinger domain DNS settings at Hostinger DNS (replace yourdomain.com with your actual domain). This is where youโll configure your DNS records.
Step 2: Removing Old Records ๐๏ธ
In your domain's DNS records, look for an existing CNAME record. Youโll need to delete this record to prepare for your new GitHub Pages setup. Also, remove any default A type records.
Step 3: Adding New CNAME Records
Now, youโll want to add two CNAME records:
The first will point www.yourdomain.com to .github.io.
The second will point yourdomain.com to .github.io.
CNAME Record Setup
-
Record 1: CNAME
- Type: CNAME
- Name: www
- Points to: .github.io (TTL can be left as default)
-
Record 2: ALIAS
- For APEX domains (when someone types yourdomain.com), create another CNAME with:
- Name: @
- Points to: .github.io
Step 4: Adding GitHub Pages IP Addresses ๐๏ธ
To ensure your GitHub Pages site is accessible, youโll need to add the following IP addresses to your DNS records:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Step 5: Connecting Your Custom Domain to GitHub Pages ๐๏ธ
Weโre almost finished! The final step is to add your custom domain in GitHub Pages. Go to your GitHub repository, open the Settings tab, and then the Pages tab. Enter your custom domain in the Custom domain field.
Configuring Your Custom Domain...
Custom Domain Setup Successful!
Note: If youโre using a static site generator, youโll need to manually add your custom domain to the public folder. Create a file named public/CNAME (with capital letters and no extensions) containing your domain:
yourdomain.com
The Finale: Access Your Website ๐ฎ
Once youโve completed these steps, your website will be live! Visitors can explore your creations by visiting https://yourdomain.com. How exciting is that?
Troubleshooting: Common Issues
If you encounter any issues with your custom domain, here are a few solutions that might help:
Solution 1: Create docs/CNAME ๐ช
In the root of your project, create a folder named docs. Inside the "docs" folder, create a file named CNAME (no additional extensions).
Solution 2: Create index.html ๐ช
As an extra measure, create an empty file named index.html in the root folder (itโs fine if you already have one; just add a new one).
These solutions are particularly useful for deploying a React app to GitHub Pages, but they can also be applied to other projects.
Now go forth, beginner developers, and let your websites shine brightly on the web! Happy coding! ๐โจ
For further information, visit the GitHub documentation for using a custom domain with GitHub Pages!
Conclusion ๐ฏ๏ธ
Congratulations on completing this journey of hosting and deploying with Hostinger & GitHub Pages! ๐โจ You've successfully set up your GitHub Pages site to share your creations with the world under your custom domain.
As you continue your coding adventures, remember that hosting and deploying are just the beginning of an exciting path in web development. Embrace the joy of learning, exploration, and the camaraderie of the coding community.
So, go ahead, and let your websites spread your creativity across the web. Until next time, happy coding, and may your projects flourish! ๐๐โจ
I hope this guide has been helpful in your development journey. If you have any questions or would like to connect, feel free to reach out or comment below!
Top comments (0)