INTRO[HEAD]
Today we are going to treat a very special topic and truth be told it is something we cannot or no longer overlook if we plan to be modern-day developers.
VERSION CONTROL
Keeping Versions of file changes.
GIT
I will briefly be explaining GIT.
It is a free and open-source Version Control System.
It was created by Linus Torvalds (The creator of Linux), to tackle a very serious problem in software development which is MANAGING VERSIONS.
Imagine you had an app and made a change then after making the change you discover a bug or worse the app doesn't run at all.
It will be very stressful to trace the fault back from a previous version of the app because you probably deleted it or something.
I mean who keeps folders of each version of their app on their computer?
GIT solves this problem by creating snapshots of each of your changes every time you "commit".
WHAT ARE COMMITS?
A commit is a term in git used to denote that you are done implementing changes and you are ready to create a snapshot of that change.
EXAMPLE
I have a folder called WebDevCool in which I keep my 'techy' website files.
They are :
Index.html
Index.css
Index.js
These three files were originally in this folder :
With git installed [If you want an article on that leave it in the comment section], we initialize or start a repository by navigating to the WebDev folder on our terminal or command prompt.
We then type this command: git init
This command tells the git we have installed (globally ) to start a repository for us on our local machine in the WebDev folder.
Now we need to add our files to git with this command: git add.
This tells git to add all our current files to git. {NOTE: This will not take a snapshot of the repository, It will only add the files to it. }
After adding our files we need to take a snapshot of our files by COMMITTING as I mentioned earlier.
We use this command: git commit -m "my first commit"
NOTE: "my first commit can be text that explains what you 'committed' for ".
We are done now our files are in the repository any time we make a change all we need to do is 'add' the files to the repository and 'commit' the files to git so a snapshot can be taken.
NOTE : [KEYWORDS]
Repository: A folder which has git "initialized" using git init.
Snapshot: An image of your repository at the time a commit was/is made.
This means git keeps track of those snapshots so you can reverse your changes or actions at each point in time.
GIT AND GITHUB
There is a common misconception among those new to git that git and GitHub are the same.
They are not. 😤
Git is a local VCS {Version Control System}. 😲
GitHub is an online community that implements git to carry out some of its functions.
Head over to GitHub and create an account.😈
We will be hosting our website through a GitHub feature called GitHub Pages 😎.
You push changes to your GitHub repository through git. 🤝
GITHUB🤩
After creating an account create a new repository.🤓 😎
ONLY FILL OUT THE REPOSITORY NAME FIELD. 🧐
DO NOT ADD README OR LICENSE OR YOU MIGHT NOT BE ABLE TO FOLLOW THE REST OF THIS ARTICLE. 🧐
Just fill out the name then click enter. 🧐
You will be directed to a page that has some instructions on how to initialize git and commit to git then add a remote origin to github.com//.git.🙂
and push. E.g github.com/webdev/Intro-to-web-dev.git. While assuming the username is 'webdev' and the repository is 'Intro-to-web-dev'.
NOTE: Follow the steps above if you haven't already initialized a repository i.e if you didn't create a folder with files and add it to git.🧐
If you have, you will see a section below that says or add an existing repository follow the steps🧐 .
You should see something like the steps above which are for initializing git locally chopped off and only those for pushing the local git repository to GitHub.🙃
You should see :
git remote add origin github.com//.git
git branch -M main
git push -u origin main.
copy and paste these one by one in your terminal (MAC OS Or Linux) or command prompt (Windows).
Once you are done if you followed the steps correctly and you refresh the GitHub page you should see your files there. 🤓
In this case index.html, index.js and index.css.🤓
You can also manually add files on git hub by clicking add files or upload files and just like git when you make a change you have to commit(Write a commit message and click the button which says 'commit changes') it so that GitHub takes a snapshot of it.🥳
NOTE: On mobile, you can do the same thing I mentioned earlier, you just upload the files and write the reason why you did In the commit section. It's basically the same as using git from the command line.
DEPLOYING YOUR FIRST WEBSITE USING GITHUB PAGES🏌🏾.
ON DESKTOP/PC 💻
We will be deploying your first website on the internet using GitHub Pages.
Create a new repository on GitHub and name it in this exact format .github.io🕵🏿.
E.g If your GitHub username (The name you used to create your GitHub account is "Richard"), the repository should be named 'richard.github.io'.
Once you are done. Create a new file on your phone or laptop named index.html🐞.
Add the code above to it and then save the file🌚.
Next, if you are on a laptop you can add the file to GitHub in lots of ways but I will be teaching you two🌞.
Put the file in a folder then open the terminal or command prompt and navigate to that file path{where the file is located} 🧐 .
Once you are there initialize a git 'repo' using: git init ✔️
Then add the index.html file to git using: git add . ✔️
Next, commit the file to git {To take a snapshot-like I previously mentioned } using: git commit -m "my first commit". ✔️
Next, we add remote origin {To tell git that we'll be pushing that local repository we created to a new source, in this case, our repo we created on github} using :
git remote add origin github.com//.git✔️
E.g If your username is "Janet" and your repo is janet.github.io . It will be github.com/janet/janet.github.io.git . 🤼
You are done with that we need to tell GitHub what branch{the particular snapshot we want to make changes to in this case we only have one which is main by default} we want to push to using :
git branch -M main✔️.
Finally, we push to GitHub using this command: git push -u origin main.✔️
That's all.🤸
Now go to GitHub and refresh the page you should see your index.html file in the repo that has .github.io.
You then go to settings/options, Scroll to the place that says Github Pages and confirm that the source is set to the main branch.🧐
Above it, you should see a part that says Your site is published at janet.github.io. 😋
If that's there then you are good to go all you do is go to your browser and type janet.github.io/index .
You will see your website deployed there.☺️
Index because index.html is the name of our file that we uploaded in the root of that repository. 🙂
NOTE: Github Pages will only deploy files on the root directory meaning any file in a folder might not be read if not referenced relatively or explicitly stated.🧐
THE EASIER WAY🧐
The other way applies to both mobile and desktop/pc 📱 📲 💻 .
Once you have created the repository and have the index.html, just select the add files option and upload your file 💃🏾.
Wait for a few minutes (3 minutes max🤓 🕑).
Then go to your site at .github.io/index 🤩.
It will be deployed live there and you can share it with anyone👻 .
You can modify/edit the file right there on GitHub, commit and see your changes live🤧 .
So no extra stress😤 .
You can even add more files and folders and reference them relative to the root which is the first directory (no folder) where the files are served from😼.
E.g You can have '/index/me ' or another HTML file called"contact " on the root directory (first file path which others are referenced from).
And reference it to the root like so "/contact".🤯
That's all for today I hope you learned something new . If you have any questions or suggestions please leave them in the comment section below ✊.
Till next time 👋.