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

A few small Thonny tips

 For an index to all my stories click this text

While developing programs for the Raspberry Pi Pico (W) with MicroPython I use Thonny to write programs and transfer them to the Pico. And while using Thonny I discovered some handy features which are not obvious.

Transfer data files

It is obvious that you can type MicroPython programs into Thonny's editor and save them on your Pico. And as a backup you can also save them on your computer. But what if you need to transfer data files like pictures or audio files to your Pico.



The above picture shows that I am trying to open a .wav file in Thonny.



To no avail. Thonny will give an error saying that it can not read this file as an UTF-8 text. Well not only that, it can not read that file at all.

The solution is easy. First create a new directory (folder) on your Pico. I gave it the name Sounds2. Double-click on that folder to open it.



Right-click on the file and the submenu shows the option: Upload to Sounds2. And that is just what we want.

Transfer multiple files.

I wanted to upload multiple files to my Pico. So I could select them one by one and choose the above described upload method. But that would be a tedious job.

Just like you are used in Windows you can select a bunch of files and upload them all.



Select the first file with the left mousebutton.



Scroll down till you see the last file and shift-click on that file with the left mousebutton. The files background will turn gray so you can see which files are selected.



Next click on the right mousebutton and select upload to /Sounds2 and all selected files will get transferred to the chosen folder/directory.

How much space is left

The Pico's flash memory is limited to 2Mb. In those 2Mb the MicroPython language is stored. But also all your programs are stored. So before uploading multiple files to your pico's memory it is wise to know how much memory is available.



On the right side of your Pico's directory there is a hamburger menu (3 small horizontal lines). Clicking that menu a pop-up menu appears and in there is the option: Storage space.



Clickin that option shows how much storage is free in the Pico's memory. In this example there is just 64k flash momory left.

From the 2MB flash memory 848k is used for MicroPython. In this example 784K is used for MicroPython programs and data files. And there is just 64K free space left.

How large are individual files

In my example it is time to free up some space, That is not easy as I need the sound (.wav) files for a project. So I am going to delete some other files.



Select a file in Pico's directory and click on it with the righ mousebutton. The option properties in the pop-up menu shows how much memory that particular file occupies.



Now you know how much memory this program takes you can copy it to your computer with the Download option in that menu or just delete it.

What is this all about.

Well as you can see I am uploading .wav files to my Pico. These are audio files. So the project I am working on is to have the Pico play audio. And it works. What's more: the quality is outstanding !! Much better as the speech synthesises that was produced by the ESP32 featured in several stories on this weblog.

To produce audio on the Pico you only need a few (6) resistors and a capacitor that function as a low pass filter. This will be explained in an upcoming story. So keep following this weblog.

Till next time,
have fun

Luc Volders

Watch out with copper-tape

For an index to all my stories click this text

For a project I needed a pushbutton. Pushbuttons are widely available but I needed a bigger one. So I decided to build it myself. I found a suitable design on the internet and that was build with copper-tape.  Luckily I found a good source for coppertape : http://lucstechblog.blogspot.com/2023/06/copper-tape-easy-obtainable.html So I started building a prototype with some coppertape I had bought previously. And guess what: it did not work !!!

When things don't work as expected the solution is: experiment and test.



I put some copper tape on a piece of paper. Made a crossing and attached a led (with a currect delimiting resistor) to some batteries. And the led stayed off. There was my problem manifesting.


When the connetors where attached to the second crossing the led went on !!!



Where's the difference.
Well in the lower crossing I rubbed the copper tape firm at the crossing. In the upper crossing I just put it on the paper. So the glue in the lower crossing spread out and worked as an insulator and no current was flowing. In the upper crossing the glue was loosely attached to the crossing and then the current can flow and the led goes on.



I tested the same setup with my new bought copper tape and that did not have the problem. No matter how hard I pressed the tape at the crossing the current kept flowing.

Problem solved !

The moral of the story is therefore test, test, test before you make a project permanent. And not all coppertapes are equal.

And the button ??? Well that is finished and will be featured in another story soon.

Till next time.

Have fun

Luc