Basic Beginners Github workflow. TLDR version.

If you're new at this it's sometimes best to work through a simple example.

Sep 03, 2022

If you are starting to code it’s really great to have a github account of your own. Think of it as social media for programmers. You can use this to practice and make a mess and, since it’s yours you can just delete it and start over any time you want. It’s actually kinda fun and has the added attraction that you can show off your work to friends and prospective employers.

There are really only 5 commands you really need to know to get started:

git clone

git status

git add .

git commit

git push

To start just go to github.com and sign up. On your home page click the ‘Repositories’ tab. In the upper right there should be a green ‘New’ button. Click it and add a name like simpleHTMLDemo. Check the ‘Add a README file’ button, This is important for later. You should pick a license. I usually pick ‘GNU General Public’.

Press the green ‘Create Repository’ button.

You should now be looking at your new repo. Mine looks like this.

If you click on that green ‘Code’ button you can copy a URL to your project. Mine looks like this git@github.com:awootton/simpleHTMLDemo.git

Now we’re basically done with github for now. You will need to install git on your workstation. Note: git is a source code control system which is not specific to github.com. There are other git servers.

There are several ways to install git. Look it up. Since I’m on a mac and I use ‘homebrew’ I only have to type brew install git into a terminal window.

Let’s get your new project downloaded and work through a development flow.

Open a terminal window and cd to a folder where your projects will live. I use ~/Documents/workspace but it could be anywhere.

Type ‘git clone ‘ and then paste the URL.

Mine looks like:

git clone git@github.com:awootton/simpleHTMLDemo.git

The response looks like:

Cloning into 'simpleHTMLDemo'...

remote: Enumerating objects: 4, done.

remote: Counting objects: 100% (4/4), done.

remote: Compressing objects: 100% (3/3), done.

remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0

Receiving objects: 100% (4/4), 12.49 KiB | 203.00 KiB/s, done.

Then cd to the folder it created and behold your new project which has the README.md and the LICENSE files the same as your new github repo.

At this point I usually open the folder in vs code (eg, code .) but there are other ways. What we want to do now is make a new empty file named index.html.

Paste a bare bones html ‘hello world’ into that file (see below). Open that file in a web browser and see “hello world”. Just for fun you can add some more code in the BODY after the hello world (below). Open it in a browser and see stars.

Now we have some code in our project.

In a terminal window that is set to your project directory type your next git command.

git status

The git status command is something I type all the freaking time. It’s the most used command. It should say that you have a new file. Simply type:

git add .

Where the dot means add everything. Now we need to prepare what they call a ‘commit’ which is really just a batch of changes. It looks like this:

git commit -am "added index.html"

And then we’ll push the changes back up to your github repo.

git push

That’s it. The basic workflow is to edit files, do a get add and then a git commit and then a get push. If you go to your github account you can see your changes in your new repo. Mine looks like this https://github.com/awootton/simpleHTMLDemo . I have added a link to preview the web page just constructed.

Thank you for visiting me.

Addendum:

A bare bones html 'hello world’:

<HTML>

<HEAD>

    <TITLE>Your Title Here</TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

    hello world

</BODY>

</HTML>

Some fun canvas code to paste after the hello world

<canvas id="myCanvas" width="512" height="512"></canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var myVar = setInterval(myTimer, 10);

var stars = new Array();

var mid = 256;

function myTimer() {

    console.log(stars.length)

    ctx.fillStyle = "#000000";

    ctx.fillRect(0, 0, 512, 512);

    ctx.fillStyle = "#FFFFFF";

    for ( i = 0; i < 1000 ; i ++ ){

        if (stars.length <= i) {

            star = {x:0,y:0,z:0}

            stars[i] = star;

        star = stars[i]

        xt = star.x / star.z + mid

        yt = star.y / star.z + mid

        size = 0.2 + 1/400 / star.z

        if (size >= 2.0) {

            ctx.beginPath();

            ctx.arc(xt+size/2, yt+size/2, size, 0, 2 * Math.PI, false);

            ctx.fillStyle = 'white';

            ctx.fill();

        } else {

            ctx.fillRect(xt, yt, size, size);

        star.z = star.z - 1/50000

        if (xt < 0 || xt >= 512 || yt < 0 || yt >= 512 || star.z <= 0) {

            star.x = 2*Math.random() - 1

            star.y = 2*Math.random() - 1

            star.z = Math.random()/100

</script>

Woot Tech Newsletter

Discussion about this post