We are going to be setting up our workspace with all the required software and extensions as well as creating our account on GitHub and setting it up with SSH keys, so, sit tight and follow through with this.
In construction, proper formwork installation is very important to both the success, speed, and efficiency as well as safety of any project. I like to think of this stage as our scaffolding stage, setting us up for success on this exciting journey.
VsCode
VsCode is an Integrated Development Environment. This is basically where you write all your code, and it is free software, make sure you select the version for your operating system. Download it here: https://code.visualstudio.com/download.
It has got a built-in terminal. A terminal is the interface where you type in command lines.
For MacOs users, you must add VsCode to your applications folder by following the instructions here: https://code.visualstudio.com/docs/setup/mac
Prettier Extension for VsCode
Prettier is a code formatter that helps to order the presentation of your codes by adding indentations and spacings, making it more readable. Follow the steps below to install and set it up.
Navigate to the extension icon on the left side-bar in VsCode. It is a series of 4 squares, and click on it.
Type-search "Pritter - code formatter" in the search bar that shows up and install it.
LiveServer Extension for VsCode
This is a powerful extension that helps you preview your code on the browser. It sets up a local server on the browser. Follow these instructions to install it:
Git
Git is a version control tool. This is a tool for streamlining your workflows and saving to GitHub.
To check if you already have git installed, for both Mac and Windows, open your command line terminal and type:
git -v
If it returns a version then you are good, however, if it returns “command not found”, then you need to install git.
Installing git: https://git-scm.com/downloads
Git is for Windows, and the terminal is for Mac, it comes built-in for Mac, no need to install it for Mac.
Google Chrome Browser
There are a lot of browsers out there, but just for consistency and the developer tools on Chrome, we will be using Chrome for this series.
GitHub Account
GitHub is where you store your code using Git. It is like a technical community where developers have accounts and store their codes for contribution, collaboration, version control, sharing of codes, and lots more. Go to the github website and create an account if you do not already have one.
The process is quite simple, on GitHub, select the 'sign up' button and follow the prompts.
GitHub SSH Keys
SSH keys mean Secure Shell Keys. This is a secure network used in communicating with servers such as GitHub Servers. It is a quick way of linking your local computer to a network through your terminal or shell without having to manually type in your username and password every time.
As a way of not having to authenticate every time you link with GitHub through the terminal, you put a code into your GitHub account, which is called the Public key, and another code is created in your local computer, which is called the private key. So whenever you communicate with GitHub, it makes sure that these two codes match and you get authenticated, else, you don’t. This is another time-saving technique.
Advantages:
Creating an SSH Key and adding it to GitHub
- On your command line, add the following prompt:
ssh-keygen -o -t rsa -C "yourEmail@email.com"
Replace "yourEmail@email.com" with your email and hit enter
You get a prompt to “Enter file in which to save the key …”, Hit enter to accept the default location because this is where git will look when searching for your private keys to match it with your public keys and establish a handshake with Git Hub.
You get another prompt to “Enter passphrase (empty for no passphrase)”, I didn’t use one, so enter, and enter again.
You get a prompt that your public and private keys have been generated and saved in the location specified above, and a ‘.ssh’ directory is created automatically. You also see your fingerprint.
Navigate to that directory and right-click on the public key: “id_rsa.pub” and open with Notepad.
Copy the entire generated key in Notepad.
Go to your GitHub account and locate the profile picture at the top-right corner, click on it, and select settings.
Find the SSH and GPG keys link on the left side-bar and select it.
Give any title to the ssh keys and paste your keys in the lower text area. Then click “Add SSH Key”.
Done! Now, sign into your account again and you will see “You have successfully added the key...”
Go ahead and create a repository, head to the dashboard, and on the right side where you see “top repositories”, select “new”.
You will see a text area next to your account name (owner), and type in the name of your repo (repository name).
Always select the “add a readme file” button to create a readme file, add a 'mit license' where you see 'license', then scroll to the bottom of the page and select 'create repository'.
To clone your new repo to the desktop, locate the 'code' green button and click on it to select the SSH title, then copy it to clipboard.
Now proceed to your terminal navigate to a location of choice and type: 'git clone (paste)' and hit enter.
git clone git@github.com:accountname/repositoryname.git
- next, open your repo in vs code:
cd repositoryname
code .
In our next article, we will learn simple command line prompts as we get ready to commence our HTML classes.
Click here to go to the next article about common terminal commands.
Thank you for your time
