IoT Shaman

How To Host your Website For Free in 5 Easy Steps

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.

Requirements

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.

  • An account on the following sites: Heroku, Github, NameCheap.
  • A domain name on from NameCheap (this usually costs around $10 / year).
  • Node Js / NPM. These are lightweight applications that run on any operating system.
  • Git. Git is a light-weight application that runs on any operating system.

Basic Terminology

The below list details some of the basic terms you should familiarize yourself with.

  • Domain Name: Domain names are unique web addresses; they are the addresses that you put into your web browser when you want to navigate to a webpage. Domain names are usually cheap, and charge a yearly rate.
  • Web Hosting: Web hosting services offer the ability to store your code on a remote server (usually in the cloud) and are tied to a domain name; this server is then responsible for handling requests when people navigate to your domain name.
  • IP Address: Unique set of numbers that correspond to an individual device that is connected to the internet. For a device to participate in the internet, it must have an IP address that is posted to a DNS service.
  • DNS: (Domain Name System) DNS servers are the "phone books" of the internet. Domain names are tied to IP addresses, so when someone tries to navigate to your domain, the domain name will be sent to a DNS service which will return an IP address, which can then be used to locate the web hosting server.

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.

Simple 5 Step Solution

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.

Conclusion

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!