Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleGit and GitHub: Git and GitHub


Use Git proficiently.Copy the code


Preface: in the base from zero to ease employment | first-time front end, we want to understand which noun?” , we have a preliminary understanding of version management system, Git, GitHub and so on. The next two articles will systematically explain the importance of a version management system and how to get started with Git and GitHub easily.

As long as the subsequent article involves code, tool learning, we are to start first, continuous trial and error, and then in the process of finding problems, explain the relative knowledge points and related to it. Code learning, eyes, ears, it is better to do it once.


1 Familiarize yourself with related concepts again

  • Git is a free, open source, and new-age “distributed version control system”.

  • A version control system is a system that records changes to the contents of one or more files for future reference of revisions to a particular version;

  • GitHub is a software source code hosting platform for version control through Git. It is the world’s largest code repository and open source community.


Why do you need a “version control system” for program development, preferably a distributed control system

For front-end developers, our main task is to implement different requirements with lines of code:

  • In the real work scenario, requirements will change with market feedback, and at the same time, our code also needs to change;

  • When I modified several parts of the code of function A corresponding to the requirements, I found that function B could not work properly — I changed it and failed. At this time, according to the common sense, I need to go back to check what I have modified, which leads to the failure of function B;

  • At this point, WHAT I really need is to compare the code with the code I used when B was still working. These two pieces of code, different in time and space, are what we call “versions.” A version control system is a system that records changes to the contents of one or more files so that future revisions to a particular version can be reviewed.

If we have this system, we can easily and accurately find the problem in step 3 above. And at this point, you can choose:

  • Tap a few times to return to the original version;

  • You can also choose to store it locally (since all previous versions and changes are already stored in this version control system).

  • Alternatively, you can host the project on an open source platform such as GitHub, invite colleagues to work on it together, and then combine all of their changes into a common version.

🏆 Summary: The benefits of using a version control system in project development are considerable. Version control is also an essential skill for us front-end developers.


3 Where is Git

In the foundation from zero to ease employment | to do a good job, must first sharpen his – software installation, environment building, we install and configure the Git. We know that when we first contact Git, we must be familiar with the operation mode of the command line, so that we can understand the specific meaning of each step of Git operation, which is also very helpful for us to make fewer mistakes in our project work.

Where is Git?

Use your terminal and command it from the command line (the two articles in this series will go into detail on how to do the commands). 💡Git Documentation in Chinese


4. Try Git and GitHub first

  • ✅ task: create a new project on GitHub, clone the project locally, and push the latest local changes to GitHub’s remote repository.

4.1 Step 1: Create a repository on GitHub

💡 : A repository is a place where projects are placed.

4.2 Step 2: Set up and describe the warehouse

  • Note 1: Write your project name;

  • Note 2: Briefly describe your project (this will appear directly below the project later);

  • Note 3: Individual users directly choose free, public;

  • Note 4: If you check this box, you can clone the project to your computer. If you don’t check it, it means you want to push a repository that’s already set up locally on your computer to GitHub.” Please note that our task for this article is to clone an online project from GitHub to local. So, please check this option.

4.3 Step 3: Clone the project locally

In step 2, we set up a repository, so we can clone the project locally as per the tasks in this section.

  • Note 1: This readme. md file is quite common. Many of the software we download in our working lives has a file like this in the folder, even if we never open one. We can just call it “documentation.” . Here is our md format before mentioned Markdown syntax written documents, unfamiliar please refer to the base from zero to ease employment | first-time front, we need to understand which noun?” .

  • Note 2: Here is the project description we added in the previous step, which is displayed directly here;

  • Note 3: By default, clicking Clone or Download here will let us use HTTPS. However, we know that HTTPS is an encrypted network transmission protocol. If you use HTTPS, you will have to go to the terminal to enter the user name and password every time you operate, which is very troublesome. Here we chose the SSH protocol — it is used for encrypted logins between computers, and most Git servers will choose to use the SSH public key for authorization.

  • Note 4: After selecting the Clone project over SSH again, the newly popped address is the one we need to copy.

4.4 Step 4: Try “clone” to check for errors

Copy the address from step 3, open the terminal of your computer, and type:

Git cloneCopy the code

  • Note 1: In this step, the computer gives us an error warning;

  • Note 2: Of course there is some advice for us – “please make sure you have the permission to link to the project or make sure the repository exists”. We know our warehouse must exist, which means we don’t have access to it. Why don’t we have access? The reverse: If everyone had this access, anyone who got your GitHub address would be able to push things to your GitHub, which would be pretty scary. So, we need authorization.

4.5 Step 5: Start authorization operations

To start the authorization operation, enter the following command and press Enter:

Ssh-keygen -t rsa -b 4096 -c "GitHub registered email"Copy the code

  • Note 1: After this command is executed, two keys will be generated in our local computer’s home directory — the private key (ID_rsa) and the public key (id_rsa.pub);

  • Note 2: Normally we give the public key to others (in this case GitHub) and keep the private key to ourselves. When someone else (GitHub) accesses you, it will take the public key to access you. If the two keys match, they will have access to each other.

4.6 Step 6 copy the public key

We generated the key in step 5. Next, we need to open the full character of the public key and copy it to GitHub. Run the following command to view the contents of the public key file:

cat ~/.ssh/id_rsa.pub
Copy the code

  • Note: Copy this string of characters in their entirety.

4.7 Step 7: Copy the key string

Open GitHub and paste the keystring character from the previous step:

  • Note: Click SSH and GPG keys. In the screen that pops up, click New SSH Key.

4.8 Step 8, try step 4 again

At the end of step 7, when you click Add SSH Key, you are done adding SSH keys to GitHub. That means you’ve established your clearance. Then try step 4 again:

Git clone (SSH URL you copied above)Copy the code

  • The GitHub repository named Test has been successfully cloned to the local computer. Then we can edit it locally and push it online.

4.9 Step 9: Edit the project locally

Terminal executed on the command line, in the local of the cloning project for editing, command line knowledge learning reference “from zero basis to ease employment | do a mountain king, that the operating system good like a little sheep – introduction to the command line.

ls
cd test
ls -al
Copy the code

  • Note 1: We have cloned the test project from GitHub to our home directory.

  • Note 2: Opening the test folder, we see a.git file that manages the various states of the local repository code. This is also the difference between a warehouse folder and a normal folder on your computer.

4.10 Step 10: Push the edited project to the warehouse again

Add files to the local repository and push them to GitHub’s remote repository:

touch a.md
git add .
git commit -am "addfile"
git status
git push origin master
Copy the code

  • Git add. Put all new changes in the current folder into the staging area.

  • Git commit -am “addfile” git commit -am “addfile” Commit all the new changes (named “addfile”) to local library;

  • Git status means to check the status of the file, as shown in the picture above: “A file has been committed to the local repository, and it suggests that we use Git push to push and publish the file that has been committed to the local repository.” So this command will be a very common one to check the status of your Git repository;

  • Git push origin master git push origin master git push origin master git push origin master The name of the remote repository is “Origin” – the name is optional, but the default is “Origin” if there is only one remote repository.

The command to view which remote warehouses are currently available is:

git remote -v
Copy the code

4.11 Step 11: View the results

Go back to GitHub again, refresh, and you’ll see the new changes pushed. So far, our mission has been successfully completed.


Postscript: This is our first glimpse of the power of Git and GitHub, which will always be with our front-end learning and work around. So, learn it and treat it well. The world of code is always about giving back as much as you give, and never failing you.

I wish you good, QdyWXS ♥ you!