Deploy your projects on Github using Visual Studio Code and Git
Visual Studio Code is the new black. Everywhere I go, whether it’s youtube or one of the popular social media sites, Visual Studio is being held in high esteem. I wondered why? So I checked out what it had to offer and what converted me to become a regular user is the way VSC approached version control.
What’s not to love? It has an integrated terminal. It presents version control in a visually appealing manner, making it easy to track file changes, and not to mention the plethora of commands organized in a drop-down menu.
In this article, I will hold your hand from beginning to end and show you how you can start using Visual Studio Code and Git to deploy your projects on Github.
( If you haven’t done so yet, check out my previous article, “How to understand Git and GitHub for beginners” in which I light-heartedly explain the what and the why to version control and its fundamental importance for anyone aspiring to be a web developer. )
What you need:
- Download Git
- Download Visual Studio Code
- Create a Github Account
Installing them is pretty straightforward, but if you like reading manuals then docs are provided within the links I provided.
Once everything is installed, we begin with the first step.
1. Open the Gitbash terminal and configure git settings
Run these four commands:
git config — global user.name “type your name here”
git config — global user.email typeyour@email.com
git config — global push.default matching
git config — global alias.co checkout
To see if you did this right, you can type:
git config — global user.name and git config — global user.email
Because there’s a lot to cover, you can read the docs here, if you want to find out what they do.
2. Create a folder for your project
3. Open your folder project in Visual Studio Code
Click file → Click open folder → Highlight your folder →Click Select Folder
or
You can just drag your folder and drop it inside VSC
At this point, it should look like this:
4. Create a new file
Click file → Click new file → Click file again → Click save → Name your file index.html
5. Set up your index.html
Make sure you’re on the index.html — Click on the blank canvas → Type doc then press Tab immediately after
This will automatically create a simple HTML template for your index file, one of the many built-in functions that make VSC awesome.
6. Type a simple text
Click in between the <body></body> tags →
Type <h1>‘Hello World’</h1> →
Click file → Click save
7. Access the integrated terminal (git)
Click view → Integrated terminal
8. Change terminal default to git
After the integrated terminal pops up →
Press the f1 key →
Type the following: Terminal: Select Default Shell →
Click Terminal →
Then select git bash
You know this worked when the dropdown menu in the terminal says “bash”
You should be seeing something like this:
8. Create a repository in the root of your project
Click in the blank canvas of the terminal → Type the words: git init
This creates a repository at the root of your project. It should look like this:
9. Go to the Source Control Section of VSC
One of the many great features of Visual Studio Code is its ability to give you a visualization of version control.
We can check any changes made to our project files by clicking the prong symbol on the left sidebar of VSC. You should have something like this:
You’ll notice that when you hover on the prong symbol, it says pending changes. This indicates that there were recent changes made to your project folder/files. In our case, the reason that the “pending changes” message are there is because we recently created an index.html file.
Is there anything else that would give us hints of recent change? if you look at the sidebar to the right of the prong symbol, you will see that your index.html file has the letter U, which stands for Untracked.
Untracked files are newly created project files that are yet to be staged.
The other letter you will see frequently would be the letter M, which stands for modified. It indicates — just like its name suggests — that a project file has been modified.
Analogies to the rescue
Before we go further, here is an analogy that will make these concepts easier to understand:
Think of this whole process like a space launch analogy.
In this step, your index.html file is an astronaut preparing to be deployed to a different planet (github site) and right now he is putting on his spacesuit (untracked file waiting to be staged).
10. Add untracked file to the stage area
Your astronaut is all fitted and ready. We will now take him to the elevator that leads to the spaceship door.
Hover over the index.html file and a + symbol with the words “stage changes” should appear→ Click the + symbol
The index.html file should now be under ‘Staged Changes’ and has a letter A with green font beside it, which stands for Added.
This means that your astronaut has reached the spaceship door and is ready to enter.
11. Commit the staged files
Now the astronaut has to check that everything is okay, sit down, fasten his seat-belt and wait for launch.
Likewise, you can check your changes by hovering over index.html and clicking open file. Once you’ve determined that the code looks good and you’re happy with the changes, we’re then ready to commit our changes (the last step before launch).
In the left sidebar, just above ‘staged changes’, click the check symbol →
You will be prompted to create a commit message → type “This is my first commit message” or anything you want → Press Enter
The main purpose of the message is to provide a written documentation of the changes you are making, which will make for easy reference for your future self or any developers you might be collaborating with.
Click here if you want to know the best practices on writing good commit messages.
Now the source control sidebar should be clear and say 0 changes, meaning to say that all astronauts being deployed, have boarded and buckled up.
13. Create a new repository on Github
Now that your astronaut is buckled up and ready to go, we need the coordinates to the planet he is landing on.
At the right side of the Github website, click the + icon → click ‘New repository’
14. Set up your repository settings
Create a repository name of your choice →
Scroll down, you can fill in or skip the description (optional) →
Skip, Public repositories cannot be changed to private (it’s a paid add-on) →
Check Initialize this repository with a README (optional, I prefer to create my own README file)→
Click ‘Create repository’
Congratulations you just made your first GitHub repository!!! This calls for a dance break
15. Copy the repository “coordinates”
To the right of the screen, click Clone or download →
Click the clipboard icon to copy the repository link
16. Add a remote
Now that we have the planet coordinates, we can input them into the spaceship autopilot system to direct the spaceship’s trajectory to the right planet (repository).
Go back to Visual Studio Code → Click View → Click integrated terminal →
Run the command: git remote add origin [ paste your repository url ]
To check if it worked, type git remote -v and it should be pointing to your repository like so:
17. Push your project to Github
Go back to Source Control section →
On the top of the left side bar, there is three dots (…) click on it →
Click Publish Branch→
You will be prompted to log into your Github account credentials →
Enter credentials
10…9…8…7…6…5…4…3…2…1
And lift off!!
Our astronaut is blasting his way toward planet Github and is projected (pun intended) to land on your newly created repository!
18. Chest out, chin high because you just published your glorious project
Go back to Github → Scroll down →
On the right sidebar, under Your Repositories, click your project name
You should see this:
There it is! The commit message that we entered earlier on Step 11.
If you click the commit message in the middle, it will show you the files you published, like so:
Your astronaut has landed safely!!!
This is a cause to celebrate, let’s dance one more time.
19. Add another element to your index.html file
Let’s send another astronaut to accompany the one we just deployed.
Below your “Hello World” text, add an <h2></h2> tag →
Type “How are you” in the h2 tag→
Save →
Go to Source Control section →
Review changes (the right-side panel is the recent change, you will notice that the h2 tag is in green, this means that you added it recently) →
Stage your newly edited file →
Commit →
Click the three dots →
This time you have to click “push” (anytime you make a change, use push. Publish branch is only done initially when setting up your repository) →
Check your project and you will see that the new changes are there. Your h2 tag in light green.
20. Review your project history
In your main project folder, there is a clock icon with the word “commits” → Click on it
You will see each commit you’ve created and pushed. These are different saved “progress” files that you can revert to — should you ever wish to revert your work to a different point in time. Or you can read your project progress in all its entirety, from beginning to end.
Additionally, if you are collaborating with other developers, they will see the changes you make here and you will see theirs.
There you have it. Congratulations on using Visual Studio, Git, and Github to publish your work online! Pat yourself in the back for me!
Conclusion
Visual Studio Code, Git, and Github are powerful and essential tools to add to your arsenal. They enable you to save your code, create a linear history of your work from beginning to end, collaborate with others, and showcase your projects to employers — just to name a few.
_________________________________________________________________
This “publication” is called Power Up and I hope to have empowered your learning.
You can support me in different ways: clapping, sharing my posts, inviting me to guest feature in your Medium, commenting, or by hitting that follow button. If you’re feeling generous, keep me awake by buying me a cup of coffee @
Thank you x 1000
_________________________________________________________________
