When I first started looking into hosting my own website, I quickly became overwhelmed with the massive amount of options. The terminology was unfamiliar, the fee structures were confusing, and it left me wondering if I was going to make a mistake and cost myself significant amounts of money. After a few years of trial and error, and getting ripped off a handful of times, I finally found a strategy that allows me to avoid hidden fees, host my own website 100% for free, and even leverage some powerful new technologies like cloud hosting and continuous deployment.
In this tutorial you will learn some basic terminology necessary to navigate the cloud management systems, where to host your app for free, where to store and deploy your code, and how to setup continuous deployment so your application automatically gets deployed when code changes are posted.
*Disclaimer: While hosting your application is free, you will need to purchase a domain name. This is usually a yearly rate, and is usually less than $10 per year.
Before starting this project, you will need access to the following resources. Accounts on the below resource sites are all free, and have no hidden fees.
The below list details some of the basic terms you should familiarize yourself with.
Domain name's are pretty straight-forward, and there are usually never any hidden fees. Web hosting packages, however, are almost always rife with hidden fees. Every experience I have had with paid web hosting services, like Go Daddy, Just Host, Blue Host, Hibu, etc., have left me with larger bills than I ever anticipated. Where they often get you is in renewal services; when your contract is about to expire they will automatically slap you with a renewal charge, which is typically significantly more expensive than the original rate. I have also had problems with their customer service, service outages, and one service even kept charging me after cancelling the service contract, to the sum total of $200.
Long story short, after all these terrible experiences I was looking for a more DIY solution that would allow me to store and host my code for free, while managing my own domain registration and DNS management. I was amazed at how easy this was, and in a matter of hours I was up and running with my new domain name, IoT Shaman.
Before you begin, please make sure you have access to the required resources and have read the basic terminology.
Step 1 - Create your Application in Heroku Dashboard: Navigate to your Heroku account's dashboard. In the top right corner you should see a button that says 'New', click this then click 'Create new app'. On the next page enter a name for your app (do NOT include 'www' or '.com', this will be handled by your domain name) then click 'Create'. Congratulations, you now have a server where your code will be deployed.
Step 2 - Create your Application in Github: Navigate to your Github account's dashboard. In the top-right of the website's header you should see a '+' (plus) button; click this then click 'New repository'.
Step 3 - Clone the Starter Kit and Deploy: I have created a lightweight Node Js website starter kit that is perfect for getting started with Node Js web servers and Github deployments. Click here and follow the instructions on the page to clone and deploy the source code to your own Github account.
Step 4 - Setup Continuous Deployment: Continuous deployment is the process of automating the deployment of an application; in other words, when your code is merged into your source repository (in our case, the Github application we setup in step 2) your application is automatically updated. Fortunately, Heroku and Github are very integrated and it is extremely simple to setup continuous deployment between the two services. To start, go to your Heroku dashboard and click your application. In your application dashboard, navigate to the 'Deployment' tab. Scroll down until you see the heading 'Deployment method', then click the Github button. In the section below, titled 'Connect to Github', click the button 'Connect' then enter your Github credentials. At this point your Heroku and Github accounts are linked, the next thing you need to do is search for the name of your Github repository and click 'Connect'. Finally, scroll down to the section titled 'Automatic deploys' and click 'Enable Automatic Deploys', then click 'Deploy Branch' in the section immediately below. Congratulations, your Node Js server is setup and deployed.
Step 5 - Configure your DNS settings: After completing step 4 you can already access your website at 'http://your-heroku-app-name.herokuapp.com'. However, if you want to link this to your domain name (which you DEFINITELY do) then you need to perform one final step. First, in your Heroku application dashboard, navigate to the 'Settings' tab and find the heading 'Domains and Certificates'. Click 'Add Domain', enter your domain name (ex 'your-site-name.com') then click 'Save'. Next, we need to point the domain name's DNS records to Heroku, so Name Cheap's DNS servers know to forward request to your Heroku app. Fortunately, Name Cheap already has a fantastic article describing this process, click here and follow the (brief) instructions.
Hopefully after reading this article you now have a better understanding of the technologies necessary to host a website in a cloud environment. It is important to note that this setup is not effective if you are expecting tens of thousands of users a day, but it definitely is more than enough for a small hobby website or a prototype. Heroku applications and Github repositories are free by default, so you shouldn't ever have to worry about getting a surprise bill; however, if you ever want more computing power, or private repositories, you have the option of paying for a higher-tier of services. If you have any questions or need additional help building your website, please reach out to us on our social media sites (see header or footer), thank you for reading, we hope you enjoyed our article!