I’m almost embarrassed to admit that I paid for web hosting for nearly 10 years. During that time I hosted custom .NET sites and WordPress sites for friends and clients, some paid, some free. As my day job got busier and after a few WordPress sites got hacked I decided it was time for my friends and clients to move on to other hosting services. However I still continued paying for hosting for a few years in case I wanted to setup that money-making WordPress blog or put up a splash page for my next killer iPhone app. As you guessed, that never happened and I felt like I was essentially not making the most out of my $20 month hosting packages.

Around last week, I thought to myself “If I felt like writing a blog again I could actually use other free resources out there like Jekyll or Tumblr. And if I wanted to build an app, chances are I could use free cloud services such as Github Pages, OpenShift or Divshot”. Anyways that lead me to cancel my paid hosting and explore other great free options which I will begin to share some in this article. For those that are curious I may discuss the aforementioned free cloud services in a future post.

Overview

The goal from this article is to help you setup a free hosted site with a custom domain name. Technically the hosting is free, and you’ll have to pay for the domain which is around $10 a year. here are the two main services we’ll be talking about:

  • Assumptions: You’re using a Mac and you’re own a domain on Namecheap.
  • Domain Registrar: Namecheap
  • Web Host: Divshot

Step 1: Sign up for Divshot

Sign up for a free Divshot account, then follow the Divshot CLI (Command Line Interface) instructions to setup your first app which in this case is your free web page. Divshot is super simple, once you’re setup and logged in all you have to do is run the divshot push command from your project folder to publish code to your development environment, then from the CLI or their site you can promote your code to staging divshot push staging and production divshot push production environments!

At this point you can also browse to your development site by visiting http://development.mywebsite.divshot.io to make sure you have things setup correctly.


Step 2: Add your custom domain to Divshot

In your divshot app click on the top right gear (settings) icon. Next in the domains section type in your domain with the ‘www’ subdomain like this for example www.mywebsite.com and click “Add Domain”. Then type in just the domain mywebsite.com and click “Add Domain” again.


Step 3: Setup up DNS on Namecheap

Sign in to Namecheap and click on the domain you would like to use. On the left sidebar click on “All Host Records”. In the first two rows that list the “HOST NAME” as “@” and “www”, just enter your Divshot URL mywebsite.divshot.io as the “IP ADDRESS/URL”, then select CNAME for the “RECORD TYPE”. Finally click “Save Changes” at the bottom and you’re done.

It may take up to 24 hours to propogate but I like to check every 5-10 minutes. Please note that you have to do a divshot push production for your code to be published to the production URL mywebsite.divshot.io.


Conclusion

Finally let’s just go over what we just did. Basically we uploaded files to our Divshot site mywebsite.divshot.io, then setup our custom domain mywebsite.com to point to the Divshot site.