Deploy code to Github for web page with Freenom domain & Cloudflare DNS for HTTPS security

Use gitgub to host your website is a free service that you can utilise as well as using Freenom to get a free domain name for the site instead of the github domain. To get the Custom domain secure you can use Cloudflare CDN.

This is something that occurs when working on your own, you do silly things and no-one points out to you how foolish those thins are. I’m currently hosting the covidmap.html on one of my websites on my VPS (Virtual Private Server). So after getting updated code in Excel, I paste it into a code editor and test it, then copy across to my VPS.

I could just update the code in VS Code and then push to github and host it as a static website, in some way similar to what I’m doing with my VPS but can use VS code to do the Git push saving me bouncing between programmes. The one question is the CDN hosting on Cloudflare holds a cache of the files, so could be displaying out of date data. I think the cache is updated every 4 hours but havent explored it.

Setup on Github

Pretty simple, you have to make the repo public or pay. So I made the repo public, HERE.

Next, go to Settings Tab on the Repo and scroll down to GitHub Pages and choose the branch that you want to be the web page. It saves itself then gives you a link (see green band in image below.) If you RIGHT click on LINK then choose Open in new tab it will open in the browser, you may have to type in the intex.html file as someties I got a blank, it takes a little while to recognise the link as live.

There is abox for custom domain, further down, we need to go to Freenom to set that up:

Freenom initial setup

Get new DNS. Freenom doesn’t like me at the moment as its not letting me create new domains. Re-purposing some of my existing domains I’ve initially set the “Manage Freenom DNS” to:

Once those point to [GITHUB ACCOUNTNAME].github.io, in my case drakemax.github.io the root path, NOT the Repo itself. (This is confusing, but you have to make a file in the repo called CNAME with the name of your Domain in it with no whitespaces and save it. )

Note, in filling out the DNS form in Freenom the TTL should be set to the smallest number, this I’ve heard means TimeToLive , so when its going to start propogating across the servers to update the domain data.

For the Github IP’s they suggest you get them from the meta page HERE.

SavingPreview(opens in a new tab)Add titleDeploy code to Github for web page with freenom domain

Use gitgub to host your website is a free service that you can utilise as well as using Freenom to get a free domain name for the site instead of the github domain. To get the Custom domain secure you can use Cloudflare CDN.

This is something that occurs when working on your own, you do silly things and no-one points out to you how foolish those thins are. I’m currently hosting the covidmap.html on one of my websites on my VPS (Virtual Private Server). So after getting updated code in Excel, I paste it into a code editor and test it, then copy across to my VPS.

I could just update the code in VS Code and then push to github and host it as a static website, in some way similar to what I’m doing with my VPS but can use VS code to do the Git push saving me bouncing between programmes. The one question is the CDN hosting on Cloudflare holds a cache of the files, so could be displaying out of date data. I think the cache is updated every 4 hours but havent explored it.

Setup on Github

Pretty simple, you have to make the repo public or pay. So I made the repo public, HERE.

Next, go to Settings Tab on the Repo and scroll down to GitHub Pages and choose the branch that you want to be the web page. It saves itself then gives you a link (see green band in image below.) If you RIGHT click on LINK then choose Open in new tab it will open in the browser, you may have to type in the intex.html file as someties I got a blank, it takes a little while to recognise the link as live.

There is abox for custom domain, further down, we need to go to Freenom to set that up:

Freenom initial setup

Get new DNS. Freenom doesn’t like me at the moment as its not letting me create new domains. Re-purposing some of my existing domains I’ve initially set the “Manage Freenom DNS” to:

Once those point to [GITHUB ACCOUNTNAME].github.io, in my case drakemax.github.io the root path, NOT the Repo itself. (This is confusing, but you have to make a file in the repo called CNAME with the name of your Domain in it with no whitespaces and save it. )

Note, in filling out the DNS form in Freenom the TTL should be set to the smallest number, this I’ve heard means TimeToLive , so when its going to start propogating across the servers to update the domain data.

For the Github IP’s they suggest you get them from the meta page HERE.

The CNAME file points the domain name to the specific repo in your account.

You put your Domain name into the Custom Domain name box as www.drax.gq (with the www. in fromnt of it) and after the re-routing of domain name to github it goes live .

BUT it will be an http://www.drax.gq so an insecure website that Goggle thinks is BAD.

So at this point, we have a website, either with an odd https://drakemax.github.io/TestGraphPage/ URL which is secure but cumbersome, or a http://www.drax.gq URL that expresses the persons identity about the site, but insecure!

So what we have done here is got a free domain, who’s postal adddress (or mobile phone number provider) is Freenom. But we’ve moved address (or Mobile phone number) to a different place (mobile number provider) so we need to redirect it to where it now is, which is Github server and the user account is drakemax.

We have to share that change of address (new mobile phone provider (keeping the same number)) around to other people or else they wont be able to contact us. This REDIRECT is sent out to lots of different servers around the world that keeps peoples addresses.

Cloudflare setup for security and quicker user response globally to your website

So, in comes Cloudflare CDN. This offers 2 things, 1/ A secure site with a HTTPS for the custom domain name & 2/ A Content Delivery Network as well. This basically Caches your webpagers around the globe so that when someone from Calefornia looks at your website by typing in www.drax.gq (I’m leaving out the http/ or S for the moment) instead of coming to my website in New Zealand, the call goes to a server on the West Coast of the USA and takes the information from there, as there is a copy of our website on that server. It will be updated at regular intervals , so any changes you’ve made on your website can be shown on the updated servers around the world.

Why would you want to do that?

If you have big images and videos and GIFs and other big files on your website display pages, then when a person calls to your site those files have to be copied acorss to their computer so that they can be shown. If they are very big, then they will take a while to be copied across, so the website will be SLOW SLOW SLOW!

So what CDN or Content Delivery Network does is store a copy of each of your web pages , a snapshot of them at an instant in time, and stores that information on web servers around the world. So when the person in Calefornia asks for a web page they get the information from that West Coast of USA server rather than files from New Zealand, so the time to get the files from a local server will be quicker and your webpage will render on their screen quicker, so will be more responsive.

What do we need to do for cloudflare ? Part 1- Change of address

First, there is a free tier. So we can use cloudflare to host our content. What it needs is to get us to tell FREENOM to redirect enquiries from Freenom servers to Cloudflare servers, so we need to change the Nameserver addresses

The standard freenom has 4 nameserver addresses, but the cloudflare server only has 2.

So we’re telling the FREENOM server , when the address comes in , send it to another server (or master post office, in this case Cloudflare server) where they will sort/redirect the information to . So like a CAR number plate, registered at one location, when someone comes to enquire about it, they redirect them to another place where the numberplate was re- registered.

Now, as per the car, the owner is still the same, GitHub, they have the file that we are calling, but instead of going to the original organization that registered the car, the owner has taken his car to another country, and they now have the records of that car & its owners information.

What do we need to do for cloudflare ? Part 2- Filters

The Domain Name System (DNS) is the phonebook of the Internet. We have a couple of ways of reaching a specific place and they are 1/ http://drax.cf or 2 / http://www.drax.cf (though you may only see it in the address bar on your browser as www.drax.cf. So to mananage the variations we use a filter, that takes in varients , like the above 2 examples and conmverts them into an HTTPS to make them secure. It usesPage Rules to allow varients using http://*drax.gq/* and says anything with these varients change to an HTTPS secure link.

On websites such as http://drax.gq you can have sub-domains, these can be totally different web pages accesses from a path like Http://about/drax.gq which would take you to a totally seperate web page. You could also make a file called about.html and put it in http://drax.gq/about.html but you’ll see a few sites that use sub-domains to take you to say a members area of the site, or an area where there is a checkout or shop area or blog area on a site, so a discrete sub area of the website. This is aprapos to the http://*drax.gq part of that page rule that will allow you to reach these points of the site as well through a secure connection.

Finally the webpage

To recap, this is what we have done:

• deploy files to free Github account to a Repository (folder)
• allow the folder to be web enabled in Github & get URL link to html website files
• create a free FREENOM account to get a free CUSTOM DNS name
• Host the DNS name in the Github repository
• This DNS is only http:// so is insecure, to secure it we use cloudflare
• Create free cloudflare account that will cache outr websitre around the globe and make it an HTTPS:// site so secure and data flow encrypted

Well done all.

The CNAME file points the domain name to the specific repo in your account.

You put your Domain name into the Custom Domain name box as www.drax.gq (with the www. in fromnt of it) and after the re-routing of domain name to github it goes live .

BUT it will be an http://www.drax.gq so an insecure website that Goggle thinks is BAD.

So at this point, we have a website, either with an odd https://drakemax.github.io/TestGraphPage/ URL which is secure but cumbersome, or a http://www.drax.gq URL that expresses the persons identity about the site, but insecure!

So what we have done here is got a free domain, who’s postal adddress (or mobile phone number provider) is Freenom. But we’ve moved address (or Mobile phone number) to a different place (mobile number provider) so we need to redirect it to where it now is, which is Github server and the user account is drakemax.

We have to share that change of address (new mobile phone provider (keeping the same number)) around to other people or else they wont be able to contact us. This REDIRECT is sent out to lots of different servers around the world that keeps peoples addresses.

Cloudflare setup for security and quicker user response globally to your website

So, in comes Cloudflare CDN. This offers 2 things, 1/ A secure site with a HTTPS for the custom domain name & 2/ A Content Delivery Network as well. This basically Caches your webpagers around the globe so that when someone from Calefornia looks at your website by typing in www.drax.gq (I’m leaving out the http/ or S for the moment) instead of coming to my website in New Zealand, the call goes to a server on the West Coast of the USA and takes the information from there, as there is a copy of our website on that server. It will be updated at regular intervals , so any changes you’ve made on your website can be shown on the updated servers around the world.

Why would you want to do that?

If you have big images and videos and GIFs and other big files on your website display pages, then when a person calls to your site those files have to be copied acorss to their computer so that they can be shown. If they are very big, then they will take a while to be copied across, so the website will be SLOW SLOW SLOW!

So what CDN or Content Delivery Network does is store a copy of each of your web pages , a snapshot of them at an instant in time, and stores that information on web servers around the world. So when the person in Calefornia asks for a web page they get the information from that West Coast of USA server rather than files from New Zealand, so the time to get the files from a local server will be quicker and your webpage will render on their screen quicker, so will be more responsive.

What do we need to do for cloudflare ? Part 1- Change of address

First, there is a free tier. So we can use cloudflare to host our content. What it needs is to get us to tell FREENOM to redirect enquiries from Freenom servers to Cloudflare servers, so we need to change the Nameserver addresses

The standard freenom has 4 nameserver addresses, but the cloudflare server only has 2.

So we’re telling the FREENOM server , when the address comes in , send it to another server (or master post office, in this case Cloudflare server) where they will sort/redirect the information to . So like a CAR number plate, registered at one location, when someone comes to enquire about it, they redirect them to another place where the numberplate was re- registered.

Now, as per the car, the owner is still the same, GitHub, they have the file that we are calling, but instead of going to the original organization that registered the car, the owner has taken his car to another country, and they now have the records of that car & its owners information.

What do we need to do for cloudflare ? Part 2- Filters

The Domain Name System (DNS) is the phonebook of the Internet. We have a couple of ways of reaching a specific place and they are 1/ http://drax.cf or 2 / http://www.drax.cf (though you may only see it in the address bar on your browser as www.drax.cf. So to mananage the variations we use a filter, that takes in varients , like the above 2 examples and conmverts them into an HTTPS to make them secure. It usesPage Rules to allow varients using http://*drax.gq/* and says anything with these varients change to an HTTPS secure link.

On websites such as http://drax.gq you can have sub-domains, these can be totally different web pages accesses from a path like Http://about/drax.gq which would take you to a totally seperate web page. You could also make a file called about.html and put it in http://drax.gq/about.html but you’ll see a few sites that use sub-domains to take you to say a members area of the site, or an area where there is a checkout or shop area or blog area on a site, so a discrete sub area of the website. This is aprapos to the http://*drax.gq part of that page rule that will allow you to reach these points of the site as well through a secure connection.

Finally the webpage

To recap, this is what we have done:

• deploy files to free Github account to a Repository (folder)
• allow the folder to be web enabled in Github & get URL link to html website files
• create a free FREENOM account to get a free CUSTOM DNS name
• Host the DNS name in the Github repository
• This DNS is only http:// so is insecure, to secure it we use cloudflare
• Create free cloudflare account that will cache outr websitre around the globe and make it an HTTPS:// site so secure and data flow encrypted

Well done all. Another video on general hosting: