Hey devs, prepare to enchant the web with your website! GitHub Pages is our spellbook, and together, we'll get your project deployed to a custom domain in no time.
First Things First: Initializing gh-pages
Before we dive into the enchanting world of GitHub Pages, make sure you've already created the gh-pages branch. Don't worry; it's not as complicated as casting spells!
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
Alright, now you've got the GitHub Pages potion ready to work its magic! ๐งโโ๏ธ
Hostinger & GitHub: Web Magic Unleashed! ๐
Note: This guide is tailored to using a domain bought on Hostinger for your GitHub Pages project. While other domain services may follow a similar process, remember that each magical journey may have its unique twists if you're using something other than Hostinger. But fear not, the fun remains the same!
Please keep in mind that when deploying your project with GitHub Pages, the deployed page's URL is typically formatted as "yourname.github.io/projectname" using your GitHub username and repository name.
However, by utilizing a repository named "yourusername.github.io," you can host your project directly under your custom domain without the need for a project name in the URL.
Step 1: A Magical Visit to Hostinger Domain DNS ๐๏ธ
To embark on our journey, we first need to visit the realm of Hostinger domain DNS settings. Don't worry; you won't need a special invitation! Just go to https://hpanel.hostinger.com/domain/yourdomain.com/dns (replace yourdomain.com with your actual domain, of course). This is where the real magic begins!
Step 2: Abracadabra! Deleting Old Records ๐๏ธ
In the domain's mystical records, you'll find a CNAME spell already cast. But, we'll need to delete this existing record to make room for our GitHub Pages magic. While we're at it, any default A type records should vanish into thin air as well.
Step 3: Summoning New CNAME Spells
Now, it's time to weave some new spells! We need two CNAME incantations:
The first spell will point www.yourdomain.com to .github.io.
The second spell will point yourdomain.com to .github.io.
Use These Four Magic Spells...:
Spell 1: CNAME! โจโจโจ
Type - CNAME, Name - www, Points to - .github.io (TTL can be left as default). This is for when someone types www.yourdomain.com.
Spell 2: ALIAS! โจโจโจ
For APEX domains or when someone simply types yourdomain.com, enter another CNAME with Name - @ and Points to - .github.io. The DNS records will automatically set an ALIAS type and voilร !
Step 3: Enchanting the GitHub Pages IP Addresses ๐๏ธ
We're not done yet! To make sure your GitHub Pages site can be seen far and wide, we'll add the necessary IP addresses. Recite these magical lines and watch the changes take effect:
Feel free to use the below code to copy & paste
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Step 4: Sealing the Deal with Your Custom Domain ๐๏ธ
We're almost there! The final step is to add your custom domain to GitHub Pages. Head over to your GitHub repository, open the Settings tab, and then the Pages tab. Now, cast your custom domain spell into the Custom domain field.
Casting Custom Domain Spell...
Custom Domain Spell Successful!
Oh, and one more thing! If you're using a special static site generator, like wielding a powerful wand, you'll need to manually add your custom domain to the public folder. Create a spellbinding file named public/CNAME (notice the capital letters, no extensions) with the incantation of your domain:
yourdomain.com
The Finale: Reveal Your Enchanted Website ๐ฎ
Once you've completed these mesmerizing steps, your website will come alive! Your visitors can now explore your creations by visiting https://yourdomain.com. How magical is that?
Troubleshooting: Unraveling Mysteries
If you're facing a puzzling issue with your custom domain, fear not! I've encountered a few tricky situations during my own magical journeys. Here are some secret remedies that might help you too:
Secret Remedy 1: create docs/CNAME ๐ช
In the root of your project, create a folder named docs.
Inside the "docs" folder, conjure a file named CNAME with no other spells but the name itself.
Secret Remedy 2: create index.html ๐ช
As an extra measure, in the root folder, create an empty file named index.html (it's fine if you already have one; add a new one anyway).
Remember, these remedies are primarily for deploying a React app to GitHub Pages and then to a custom domain. But don't hesitate to give them a try if you're using other enchanting spells! ๐
Now go forth, beginner developers, and let your websites shine bright like the stars in the code-filled sky! Happy coding! ๐โจ"
For further information, visit the GitHub documentation for using a custom domain with GitHub pages!
Conclusion ๐ฏ๏ธ
Congratulations, brave developers, on completing this enchanting journey of hosting and deploying with Hostinger & GitHub Pages! ๐โจ You've harnessed the power of GitHub Pages to share your creations with the world, and with Hostinger's domain magic, your website now proudly stands under your custom domain.
As you continue your coding adventures, remember that hosting and deploying are just the beginning of an exciting quest in the vast realm of web development. Embrace the joy of learning, the thrill of exploration, and the camaraderie of the coding community.
So, go forth, fellow adventurers, and let your websites soar high, spreading the magic of your creativity across the web. Until we meet again on another coding quest, happy coding and may the web be ever in your favor! ๐๐โจ
I hope that in some way, this has helped you in your development journey. If you have any questions, or would like to be in touch, feel free to message me, or comment below!
Top comments (0)