Some practical tips for GitHub

We’ve compiled 12 super useful github tips that you can definitely use at work and at school

#1 Edit the code at GitHub.com

Let’s start with one that most people already know

Open a file on GitHub (any file in any repository) with a little pencil like button in the upper right corner of the page. Click on it and you can edit the file. When you are finished editing, click Withdraw File Change and GitHub will fork the repository for you and create the pull request.

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

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

#2 Paste pictures

You can go beyond writing comments or bug descriptions. You can copy an image directly to the clipboard, and as you paste, your image will be automatically uploaded to the cloud and displayed on the page.

#3 Beautify your code

If you want to write a block of code that starts with three back quotes, GitHub will try to guess what language you’re in.

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

Note JSX on the first line:

This means that this code will display correctly:

(By the way, in GIST, if your GIST file has a.jsx suffix, it automatically gets JSX syntax highlighting)

The link below is a list of all supported syntaxes:

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

#4 Cleverly close issues in PRs

If you create a pull Request to fix the problem sheet #234. You can write fixes #234 in the description of PR.

When PR is merged, that issue is automatically closed. Isn’t it convenient 🙂

Learn more:

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

#5 Link to comments

Do you want to link to a particular comment?

Click the time next to the user name in the comment box to get the link.

#6 Link to code

Do you want to link to a particular line of code?

To open a file, click on the line number to the left 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 it’s permalink.

#7 Use the GitHub address bar wisely

GitHub’s page navigation is already pretty good, but sometimes it’s faster to type directly in the navigation bar. If you want to jump to a branch and see how it differs from the trunk, type /compare/branch-name at the end of your repository:

/compare/**integration-branch… **my-branch

For shortcuts, the CTRL +L or CMD +L cursor jumps to the address bar, making it easy to switch between the two branches.

Create a checkbox list

Would you like to see a list of check boxes in the issues you submit?

And see the “2/5” progress bar in the issue list?

The interactive checkbox syntax looks like this:

 - [ ] Screen width (integer)

 - [x] Service worker support

 - [x] Fetch support

 - [ ] CSS flexbox support

 - [ ] Custom elementsCopy the code

The same applies to the project management interface:

If you don’t know what project management is, here’s what IT is.

#9 Manage projects on GitHub

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

Just a few weeks ago I learned that GitHub also offers project management. I found Projects in your warehouse, and I kind of wanted to transplant my work from Trello.

Exactly the same project management at GitHub:

If you want to Add your issues to your project management, you can click Add Cards at the top right of the page to search for the issues you want to Add. It has a special syntax search (https://help.github.com/articles/searching-issues-and-pull-requests/), such as input is: pr is: open, means that you can find all open PRs, If you want to fix bugs, type label:bug.

You can convert existing Notes to issues.

Or in the Issues interface, add an issue to project management.

Categorize issues in project management and then make sure you place issues in that category.

disadvantages

I started using GitHub instead of Jira for management projects (a small project) in the last three weeks. The more I use it, the better I like it.

But I can’t imagine using it for agile development because I want to evaluate and calculate everything correctly.

The good news is that GitHub’s project management features are clean and easy to use with no significant learning cost.

ZenHub (https://www.zenhub.com/) fills GitHub’s gaps by evaluating its own issues, creating dependencies, and speed and burnout charts. It looks awesome.

Learn more:

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

#10 GitHub wiki

Unstructured web page collections, which means all of your web pages have no dependencies, no up and down buttons, and no breadcrumb navigation.

I started by creating a GitHub Wiki, I took a few pages from the NodeJS document as wiki pages, and then created a side navigation to simulate the actual structure. The sidebar is always present and does not highlight the current page.

The links need to be maintained manually, but generally enough. To view the Demo (https://github.com/davidgilbertson/about-github/wiki).

My tip: If your readme.md file is too large and you need several pages to describe your document in more detail, then GitHub Wiki is for you. If your page needs to be navigated or structured, then you need to think of something else.

#11 Static blogging

You probably already know that you can deploy static web pages using GitHub. In this section I’ll show you how to generate static web pages using Jekyll (Simple Blog Static Site Builder)

Quite simply, Jekyll will render your readme.md files with beautiful themes. Such as this README page (https://github.com/davidgilbertson/about-github) :

Click Settings and select the Jekyll theme.

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

We created a static site with a Markdown file that was easy to edit and modify, so GitHub can basically be used as a content management system.

React and Bootstrap websites already do this.

#12 GitHub as 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 can be easily edited and doesn’t require development.

My advice is to write the text in a Markdown file and store it in your warehouse. Then write a component in the front end to request the file and render it.

I like React, so here’s an example of a React component: get the markdown file path, request it, parse it, and render 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)}} />



    );



}



}Copy the code

What I use is marked (https://www.npmjs.com/package/marked) plug-in to parse the markdown, then you can use components 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>



);Copy the code

At this point, you can make GitHub your CMS.

GitHub Google plugin

I only use this octobox Google plugin (https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US) for a period of time, Now I recommend it to you.

It generates a panel on the left that navigates your repository through a tree structure.

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

This plugin allows you to apply themes to any website: And (https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe/related?hl=en) Making black theme (https://userstyles.org/styles/37035/github-dark). For uniformity, change the Google Dev tools to black (this is built in and turned on in Settings), Then switch to Atom One Dark black theme (https://chrome.google.com/webstore/detail/atom-one-dark-theme/obfjhhknlilnfgfakanjeimidgocmkim?hl=en).

The last

That’s it. Hope it works for you. Have a nice life.

Translation 丨 miaoyu

What are your thoughts or opinions after reading this article? Feel free to leave a comment in the comments section.

In addition, congratulations to yesterday’s welfare lottery users, winners can leave a comment below this article.

Xiaobian will arrange to send the exchange code to you after seeing it.