Friday, July 21, 2023

Using Github for building a website

For an index to all my stories click this text.

I have been programming in Javascript for a long time. Javascript can be very usefull when programming websites for IOT. There is a series on this weblog that describes building webservers with the ESP8266 andd ESP32 with sliders, buttons, gauges, leds etc etc etc. These are all programmed in HTML, CSS and Javascript. 

I also wrote a book thats chockfull with more than 500 tips about programming in Javascript. The book is in English and you can order it with Amazon: Click here to buy te book

Another field of interest for me is building apps for my Android Phone. These can also be made in Javascript. An example was my Toiletroll Stock Calculator programmed at the start of the covid pandemic. You can find that program here: http://lucstechblog.blogspot.com/2020/04/toiletroll-stock-calculator.html

To test my Javascript programs I need a website. There are several webhosting services that offer free webspace. But they all (in my opinion) have some flaw. There is for example 000webhost.com They offer a free service but you can only make 1 website. Another option is weebly.com which is a great service that I use often. For my testing purposes however the overhead of the pages is far to big.

So my demands are fairly strict. I needed to build as much webpages as I like and they need to be lean. And I wanted the service to be free (hey........ I am Dutch remember).

Github

I have been using Github for a long time and it is a great free service that allows you to store programs, text files, schematics and even STL files. Some of the pages on this weblog have link to program code stored on Github so you can conveniently download the programs for the project.

Each time you start a new project you create a space on Github called a repositry. In that you can store your files. You can make privtae repositries that can only be viewed by yourself and a few choosen ones, and public repositries that can be vieuwed (but not edited) by anyone even if they have no Github account. And best of all you can build an unlimited number of repositries for free.

Github Pages

And now Github has a new service called Github Pages. Basically it is a repositry that can be viewed as a website. And you can build as much Github Pages as you want. The limitations ?? Well a Github Page can only be 1 GB !!!! Ehhh......1 GB.....I only use a few K for my tests..... and the maximum bandwith is 100GB per month !!! So You'll get an unbelievable amount of storage for free.

Let me show you how to build a webpage with Github Pages. I presume you already have signed up for an account with Github.

Building a webpage with Github

First start with creating a new repositry.



Give it a name. As this was my first test I chose htmltest01. Feel free to choose any name you want. Make sure to make the repositry Public so you can access the website. That is all you need to fill in. Leave the other choices open as they are intended for 'normal repositries'. Choose Create repositry.



Now choose the blue small text saying: Get started by creatinga new file.



This is a very important step. Every website starts with a webpage called index.html so use that name. Make sure it says "in main" as that is the starting point of the Github Page.



Now get your HTML code and paste it in. I wrote my code in Notebook on my PC, copied it and pasted it in.


If the HTML code is pasted in choose the green button at the bottom of the page saying "commit new file"



So now you have a new repositry called htmltest01 and it contains just one file with the name index.html.



Now choose settings the small gear being the icon at the top on the right side.



In settings scroll all the way down till you see Github pages and click on Check it out here.



Make sure you choose main as Branch and click on Save

And there you are. Your site is finished and published.

In this example the sites URL is https://lucvolders.github.io/htmltest01/
You can try it if you want. It provides a gauge and a button. Each time you press the button the gauge will display a new value.
The Javascript code is so simple that you can easily use it with an ESP8266 or ESP32 as I will show in (as said at the beginning) an upcoming story on this weblog.

And there we have it a real working website

Now if you need another website just go to your github account and make a new repository the same way. Give it a different name and build your second website.

Lean ???

At the beginning of this story I stated that the webpage had to be lean. No overhead from the webhost service. Well it really is. You can check that yourself. Just open the developers menu in your browser and have a look at the the page's sourcecode and you will see that it does not contain any overhead from Github. It's just my own code.

Till next time
have fun


Luc Volders