Git. GitHub. Portfolio at GitHub Pages. Easier than it seems!

Why do we need a version control system?

It’s all about human nature. Remember when you first hit a three-pointer in basketball and then told everyone in the neighborhood about it? What about your first bike, and how admiringly did you show photos of it to your friends at school?

Many companies have built an entire business around people's desire to show off their accomplishments and appreciate others. Services such as Instagram and Facebook have already become an integral part of the life of a modern person. There's nothing wrong with posting a photo from the gym and your diet of salad and guacamole, then popping into your favorite fast food place and spending the evening watching your favorite TV show.

So, do not be surprised. There is a special site for developers where they “show off” their well-composed and perfectly working code. https://github.com is a mecca for all programmers, where everyone from novice web designers to large companies like Microsoft or Apple put their code on public display.

The first thing you need to do is create your own account, where you will publish your successful work. The service also helps to monitor the development of existing projects and always keep them at hand.

Use a full name instead of a gaming nickname for your account, be serious.

Git is a program that allows you to create special “repositories” folders where all the files that are involved in your project will be stored. In order to interact with the service, you just need to install this application on your computer. See all the necessary installation information on the official website: https://git-scm.com 

Once you've got an account and installed the Git version control system on your computer, you can start using the version control system to collaborate with other developers and publish your achievements.

For the service to work correctly, you must properly configure the system and establish interaction between your device and Git.

Git setup

When all the necessary programs are already installed, you need to connect your account to your device. To do this, you need an IDE and a little magic.

Open a terminal inside your Integrated Development Environment and write the following set of commands below, which will help you do the basic initial setup of interacting with Git.

$ git config --global user.name "John Doe"

// This command sets the username that will be used later in all your projects made on this computer.

$ git config --global user.email johndoe@example.com

// Enter your current email address.

Ready. Magic works outside Hogwarts! Thanks to the two lines written in the terminal, you have set up your local Git account.

Now let's try to put your project on public display.

Creating a repository

We assume that you are already familiar with the basics of creating websites and know what HTML and CSS are. If not, then sign up for the relevant educational courses from Beetroot Academy, which will help you understand the basics of website building and gain the necessary skills to master the prestigious and in-demand profession.

So, if you know what HTML and CSS are, then you can already make a simple website. Let's say that you have a .html file and a .css file that are in your IDE, and you need to create a GitHub repository and share your code with other developers.

To do this, open a terminal and cast the following spells:

$ git init

// This simple command initiates Git and creates a repository structure that will be populated with project files.

$ git status

// Allows you to find out if the system is tracking changes in the repository.

$ git add -A

// Forces Git to watch for changes in the entire project folder.

$ git commit -m “My first commit”

// Creates a project checkpoint that you can always return to.

As a novice developer, it was incomprehensible for me how text commands launch complex processes inside the computer and initiate interaction with remote servers and batch data. You don't need to delve into studying such nuances at the very beginning. Just trust the process.

After the manipulations, the version control system on your computer will monitor the changes locally. Still, now you need to upload, or as my colleagues say, “push” the repository to GitHub.

To do this, log in to your account and click “Start a project”:

‍

Then choose a name for your project:

// Be careful about the Description field. This will help specialists unfamiliar with your project to better understand the essence of your work.

Now upload your local repository to GitHub. To do this, use the following commands generated by the service:

// Commands should be executed one by one.

Your remote repository has been created, and you can share it with your colleagues, teachers, and employers.

A very attractive feature of the service is free website hosting, which allows you to view not only the code but also displays the web page directly in the browser.

Let's find out what the Github pages service is and what it is eaten with!

GitHub pages

The built-in GitHub pages feature will help beginners not only show their code but also how it looks in action! As they say: “A picture is worth a thousand lines of code!”

All you need to do is click on the right place on the screen two times in a row. We know it's hard, but we are sure you can do it!

So, find the Settings icon, as in the picture, and click here:

Then, scroll down to the GitHub pages section, select the desired branch, and hit save:

After that, you will receive a link that will lead to your personal website, which will be hosted absolutely free.

Thus, the Git version control system and GitHub service are the main tools for teamwork, code demonstration, and exchange of all kinds of information. Do not neglect the service's functionality and use it to the fullest, especially since the coolest features are completely free!

Useful tips for working with GitHub

“Every novice developer is doomed to repeat the same mistakes, this is called experience," — Albert Einstein.

So, Tip #1: Get information only from reliable Internet sources

As you guessed, Einstein never said that, and we were trying to deceive you. This time it was a lie for good. There are many forums on the net that are teeming with those who want to “help”, which can easily turn out to be scammers or complete laymen. Choose sources of information carefully. This is especially true for serious projects and privacy issues. By inserting part of the code from an unverified source into your project, you risk losing access to your account and endangering the data of all project participants.

Tip #2: Be serious. Seriously!

Nothing spoils the impression as much as the nickname DeMoNKilleR1988 in a working account on GitHub and comments to the code like: “LMAO!!! It works!” or “Dude, check this out, i copied it from an Indian youtube guy!” Keeping a formal communication style and being specific in your intentions will serve your career well.

Tip #3: Commit from the beginning

You should not store the entire project on your computer and upload everything to GitHub at once. Viewing the number of commits made is available to everyone. A gradual, painstaking process of change is more trustworthy than a repository that came out of nowhere overnight. Made one feature? Make a commitment!

Tip #4: Leave clear comments

Expanded and detailed comments in the code allow you to better understand the logic of the process and architecture. Today you understand why this feature works, but will you be able to remember it in a week, a month, or a year? We thought so.

Tip #5: Be honest and don't copy other people's code

Using parts of code borrowed from open sources is a common practice in the development environment. However, don't overuse it. If you copied 100 lines of someone else's code and added your own 2 lines, this does not make the project yours. Use other people's knowledge, but adapt and change it based on your needs. Plagiarism is not encouraged. 

I'm sure you understand that Git and GitHub are not as difficult as it may seem. Next, we will consider even more interesting moments from the daily practice of programmers. Stay tuned for more!