【GitHub】Super practical skills, just read this one article!

There have been friends who left messages to the program and Xiaoqi in the background, saying that they want to know more about the use of GitHub. Today we have compiled 12 super practical tips that you will definitely use in your work and study. Come and collect them~ [[209720]]

#1 Edit code on GitHub.com

Let’s start with something that most people know.

Open a file on GitHub (any file in any repository), and there is a button that looks like a little pencil in the upper right corner of the page. Click it and you can edit the file. When you are done editing, click Propose file change, and GitHub will fork the repository for you and create a pull request.

You no longer need to fork the repository, pull the file locally, modify the file, and then submit it to GitHub to create a pull request.

#2 Paste the image

You are not limited to using text to comment or describe a bug. You can copy an image directly to the clipboard, and when you paste it, your image will be automatically uploaded to the cloud and displayed on the page.

#3 Beautify the code

If you try to write a code block, starting with three backticks, GitHub will try to guess what language you are using.

But if you paste a snippet of Vue, Typescript or JSX code directly, you can specify it to get the correct syntax highlighting.

Note the jsx in the first line:

This means that this code will display correctly:

(By the way, in gist, if your gist file extension is .jsx, it will automatically get JSX syntax highlighting)

The following link is a list of all supported syntaxes:

https://github.com/github/linguist/blob/fc1404985abb95d5bc33a0eba518724f1c3c252e/vendor/README.md

#4 Close issues smartly in PRs

If you create a pull request to fix issue #234, you can write fixes #234 in the PR description.

When you merge a PR, the issue will be automatically closed. Isn't it convenient? :)

learn more:

https://help.github.com/articles/closing-issues-using-keywords/

#5 Link to Comments

Want to link to a specific review?

Click on the time next to the username in the comment box to get the link.

#6 Link to code

Want to link to a specific line of code?

Open a file and click the line number on the left side of the code, or hold down shift to select multiple lines.

Share this URL to link to the code. If the file is modified, will it change? No, because this is a permanent link.

#7 Use the GitHub address bar wisely

GitHub's page navigation is already very good, but sometimes it's faster to just type in the navigation bar. For example, if you want to jump to a branch and see the difference between it and the trunk, you can just type /compare/branch-name at the end of your repository:

Compare with the trunk, compare two branches, enter /compare/**integration-branch...**my-branch

As for shortcut keys, ctrl + L or cmd + L` the cursor will jump to the address bar, which makes it convenient to switch between the two branches.

#8 Create a list of checkboxes

Would you like to see a list of checkboxes in your submitted issues?

And in the issue list, see the progress bar of "2/5"?

The interactive checkbox syntax is as follows:

 - [ ] Screen width (integer)
 - [x] Service worker support
 - [x] Fetch support
 - [ ] CSS flexbox support
 - [ ] Custom elements

The same is true when using the project management interface:

If you don’t know what project management is, let me explain it next.

#9 Project Management in GitHub

I usually use Jira to manage projects in large projects, and I usually use Trello for single-person projects.

Just a few weeks ago I learned that GitHub also offers project management. Just looking at Projects in your repository, I'm kind of tempted to migrate my work items from Trello over.

Exactly the same project management in GitHub:

If you want to add your issues to your project management, you can click Add Cards in the upper right corner of the page to search for what you want to add. The search here has a special syntax (https://help.github.com/articles/searching-issues-and-pull-requests/), for example, entering is:pr is:open means you can find all open PRs. If you want to fix bugs, enter label:bug.

You can convert existing notes into issues.

Or in the issues interface, add the issue to project management.

First, categorize the project in project management, and then make sure you put the issues into that category.

shortcoming

• I have started using GitHub to replace Jira for managing a small project in the last three weeks. The more I use it, the more I like it.
• But I can't imagine using it for agile development, because I want to properly estimate and calculate everything.
• The good news is that GitHub's project management function is very clear and concise, and you can easily get started without too much learning cost.

ZenHub (https://www.zenhub.com/) makes up for the shortcomings of GitHub. You can evaluate your own issues, create dependencies, and have speed and burndown charts. It looks awesome.

learn more:

https://help.github.com/articles/tracking-the-progress-of-your-work-with-project-boards/

#10 GitHub wiki

An unstructured collection of web pages means that all your web pages have no subordinate relationships, no previous and next buttons, and no breadcrumb navigation.

I first created a GitHub wiki, I found a few pages from the NodeJS documentation as wiki pages, and then created a side navigation to simulate the actual structure. The sidebar is always there and will not highlight the current page.

The links need to be maintained manually, but generally speaking they are sufficient. See the Demo (https://github.com/davidgilbertson/about-github/wiki).

My advice: If your README.md file is too big and you need several pages to describe your documentation in more detail, then the GitHub wiki is for you. If your pages need navigation or structure, then you need to think of other ways.

#11 Static Blog

You may already know that you can use GitHub to deploy static web pages. In this section, I will tell you how to use Jekyll (a simple blog static website generator) to generate static web pages.

It's very simple. Jekyll will render your README.md file with a beautiful theme. For example, this README page (https://github.com/davidgilbertson/about-github):

Click Settings and select the Jekyll theme.

I will get a Jekyll themed page (https://davidgilbertson.github.io/about-github/):

We create a static website with a markdown file, which is very convenient to edit and modify, so GitHub can basically be used as a content management system.

How React and Bootstrap websites are already done.

#12 Use GitHub as a CMS

You have a website that needs to display some text, but you don't want to save the text as HTML.

You want to store blocks of text somewhere that is easily editable and does not require development.

My suggestion is to write the text in a markdown file and save it in your repository. Then write a component on the front end to request the file and render it.

I like to use React, so this is an example of a React component that gets the path to a markdown file, then requests it, parses it, and renders it into HTML.

 class Markdown extends React.Component {  
 constructor(props) {  
 super(props);  
 // This needs to be replaced with your url  
    this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets' ;  
 this.state = {  
 markdown: '' ,  
 };  
 }  
 componentDidMount() {  
 fetch (`${this.baseUrl}/${this.props.url}`)  
        .then (response => response.text())  
        . then ((markdown) => {  
        this.setState({markdown});  
 });  
 }  
 render() {  
 return (  
    < div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />  
 );  
 }  
 }

I use the marked( https://www.npmjs.com/package/marked ) plugin to parse markdown, and then you can use the component like this:

 const Page = () => (  
 < div className = "page" >  
        <div className= "about-us" >  
        < Markdown url= "about-us.md" />  
 div>  
        <div className= "disclaimer" >  
        < p>A very important disclaimer:p>  
        < Markdown url= "disclaimers/home-page-disclaimer.md" />  
 div>  
 div>  
 );

At this point, you can use GitHub as your CMS.

GitHub Google Plugin

I've only been using this octobox google plugin ( https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US ) for a while now and I recommend it to you.

It generates a panel on the left to browse your repository in a tree structure.

Speaking of color, how can I tolerate a pale GitHub?

Plugin combination: Stylish This plugin allows you to apply themes to any website: (https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe/related?hl=en) and GitHub dark theme (https://userstyles.org/styles/37035/github-dark). In order to look unified, change the Google Developer Tools to black (this is built-in, turn it on in the settings), and then change to the Atom One Dark theme (https://chrome.google.com/webstore/detail/atom-one-dark-theme/obfjhhknlilnfgfakanjeimidgocmkim?hl=en).

at last

That's all. Hope it's useful to you and have a good life.