Host any website with a custom domain completely for free

Today I’m going to tell you how I used free services to host my blog completely for free.
On top of that, the hosting is handled by a third party, so I don’t have to worry about servers which are open to the internet, and, of course, completely for free.
If that wasn’t enough, I don’t even have to worry about deploys, since every time I push my site to github, it gets automatically updated and published to the internet, almost in real time.
I chose to host a blog on it, but you could host any html page on it, and here is how:

General Steps:

• Build a website
  • The first thing you need to host a website, is a website. You could code it completely yourself, or use a SSG, like Jekyll - which is what I use.
  • A static site generator turns some type of markup language(like markdown) into valid html pages Any valid html will do
• Put the website on github(or any other major VCS platform).
• Set up a Netlify account, and connect it to your Github(or other vcs) repository containing your website.
  • You will need to setup build settings in order to publish your website on every git push.
• Now you have 2 choices:
  • 1 You already have a registered domain
    • If you already have a registered domain just setup your netlify deploy to use that as a domain
  • 2 You don’t already have a registered domain
    • Go on Freenom and search for a domain that you like, then “buy” it, and register that domain on netlify

Walkthrough

Now I’m going to describe how to create, host and deploy your own blog for free

Prerequisites

1. Know a bit of markdown (it really isn’t that hard, and it can always be useful)
2. Know how to use github (on a basic level)

Tools needed

1. Install Jekyll, you could use any other SSG, in this guide I’m going to use jekyll
2. Install Git, if you are following this guide you should already be familiar with it

1. Create your website

You could create your own site from scratch using html, but it honestly isn’t a viable choice if you are looking to create a blog, because it’s going to get harder the more content you have.
In this tutorial we are going to use Jekyll, a static site generator. So if you don’t already have it, go ahead and download Jekyll.
Follow the Quick Start Guide to create your first blog, for now just do a bare post to test your blog. In short once you finished installing jekyll run this in a command prompt:

$ bundle install jekyll # installing jekyll in your machine
$ jekyll new my-site && cd my-site # create new jekyll project

Once you’ve done with creating your placeholder post, run

$ bundle exec jekyll serve --host 0.0.0.0

In the same directory of the blog. This way you will have hot reload for each change, and by adding --host 0.0.0.0 you can test your site even on other devices on the same network.

If you actually want to use this blog you might want to take a look at Jekyll Themes instead of going for the default one.

2. Push this site to Github

Go to Github and create an account/log in, then from your dashboard click on New to create a new repo. Go back to your blog’s directory and type this in a command line:

$ git init # initializing project folder
$ git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git # change UPPERCASE with your own!
$ git add -A && git commit -m "Initialize" && git push -u origin master # push code to github

3. Create a Netlify account

Go to netlify.com and, if you don’t already have an account, register, then connect netlify to your Github/Gitlab/BitBucket account. After you do this go to netlify dashboard, and following this step.

1. Click new site from git, then choose Github or whatever else you chose as your VCS.
2. Choose the repo which contains your newly created blog.
3. Netlify is smart enough to configure everything automatically, so we don’t really need to configure the build settings.
4. Click Deploy site

Your site should now be live, but the domain is a random mess of words.

4. Get your free domain

Go to Freenom and find a domain that you like. Technically you could get more than 1, but please don’t do that as that site can only exist if the userbase is able to regulate themselves. As you can probably see I chose https://alessandroferrari.live.

5. Set up your domain with Netlify

Now all you need to do is go on your project dashboard on Netlify, click on Domain Settings, then Add Custom Domain, and follow the simple process to register your newly acquired domain as a valid one for netlify.

Caveats

• You probably won’t find any .com, .org, .xyz, or any other “popular” domain.
• You can have it for free for “only” one year, then you will have to renew your subscription.
• You have to pay if you want to see analytics on netlify