This tutorial will show you how to create a github project and then how to deploy the project to Heroku with a custom domain name. Today, I wanted to point one of my domains to a Heroku app I’ve been working on. This is how I did it.
Adding an existing project to GitHub using the cli
- Create a new repository on GitHub. To avoid errors, do not initialize the new repository with README, license, or
gitignorefiles. You can add these files after your project has been pushed to GitHub.
- Open Terminal and choose the local directory
- Git clone the repository, from this point you will see just the Read.me and .git folder
- Create a composer.json file you can leave it blank, or you can use to add packages if you want
- Add the files in your new local repository. This stages them for the first commit. Use git add .
- Commit the files that you’ve staged in your local repository. git commit -m “Initial check in”
- Push the changes in your local repository to GitHub. git push origin master
Deploy github project to Heroku with custom domain
- Login to Heroku Dashboard
- New Create new App
- Add a name to your app all letters should be lowercase. or App Name (optional) Leave blank and heroku will give a random name to your app
- Choose your run time selection Europe or United States and Create App
- Navigate to deploy tab, choose the deployment method to github, authenticate and search for the github repo and then connect
- Enable Automatic deploys so each time you will push changes to your github master branch Heroku will deploy your project automatically
- Finally, Deploy Branch
🙂 Congratulations, for your first deployment!
If you have follow the above above steps you should see a VIEW button.
Now the tricky part :S
Pointing a Domain to Heroku
- Login to heroku, select your app and navigate to the settings tab
- Go to the section Domains and certificates
- Click Add Domain
- You can then add each subdomain individually, or add a wildcard in for example
Heroku recommends against mapping apex domains (ie. panayiotisgeorgiou.net) to your app for a number of reasons. We’ll get around that by redirecting our apex domain to the www subdomain. This way if any users hit that url directly, they will still be able to hit the app.
For each subdomain you want to setup, configure your DNS with a CNAME record pointing the subdomain to the applicable Heroku hostname. Head to your hosting provider Web Panel, then Manage Domains > [your domain] > DNS. On the new page, you’ll want to “Add a custom DNS record.” Set it up as follows for the www subdomain:
- Subdomain Name: www
- Type: CNAME
- Value: [your app name].herokuapp.com
You should now be able to hit www.[your domain].com and it should bring up your Heroku app. If not, you may need to refresh your DNS, as it may be cached.
But what if a user hits your site without the www subdomain? Here’s where the redirect comes in.
To redirect our apex domain, we’ll head back to web panel.
Under Manage Domains, edit your domain.
You’ll see a section called redirect.
Under there, set your root domain, [your domain].com, to redirect to http://www.[your domain].com.Now users going to either can use your sweet new app.
[alert type=white ]
I hope you enjoyed the tutorial if you have any problems please use the comment box below.
Happy coding 🙂