preface

Yesterday, I spent some time beautify my GitHub homepage and the homepage of my personal website. In this article, I would like to share with you the implementation process, and welcome interested developers to read this article.

Online experience

First, LET me show you what I finally achieved. Online experience address: homepage of personal website, homepage of GitHub.

The effect picture is as follows:

The implementation process

Next, let’s look at the implementation process (the subordinate process demo is using my trumpet for convenience).

Create a warehouse

First, log in to your GitHub account:

  • Once logged in, create a repository with the same username as you, as shown below.

  • Fill in the warehouse introduction, set the public permissions, and add the readme.md file

  • Finally, click the Create Repository button to complete the repository creation.

Interface beautification

After we create the warehouse, we go to our homepage, which is github.com/ your user name.

The page we see is shown below, with the red circled portion of the readme.md file we just created for the repository.

Hi there 👋 is added to the readme. md file by default when creating the repository.

So all we need to do is modify the readme.md file in the repository we just created, and our home page content will follow.

  • HTML syntax is supported in md files, so you can design the page as you like.

  • Because of the majority of programmers in the reader, the design inspiration is not rich, there is an open source repository in the community to sort out some of the more beautiful MD homepage design, you can refer to these contents CV here, modify the modification is your own, the repository address: awesome-github-profile-readme.

  • I used the project presentation card for my homepage design, which is also provided by an open source repository: Github – Readme-Stats.

  • I also included content shrinkage in my home page design, using HTML5’s < Details >

    tag.

  • Community fan display module, here I want to achieve the effect of writing some CSS style, but GitHub does not support, so there is only one image.

Extract the beautified interface

When I finished polishing up my GitHub page, I wanted to transfer the same effects to my own homepage. At first, I thought that it would be good to find a markdown to HTML conversion tool, so I tried several online conversion, but the results were not ideal.

I looked at the beautification of the whole GitHub home page, more and more comfortable, have an idea, I directly put the whole home page down, change a change, so it is perfect to get what I need 🤓.

So, how to strip down the content of this website, I think we should have their own method, here I say my method:

  • Right -> view the web source code
  • Copy the source code to the editor
  • Download all the external links in the code and put them in the project folder
  • Replace the outer chain for project folder import
  • Since it’s an HTML file, you can write CSS styles, and the list of fans is perfectly displayed.

Finally, take a look at the home page of my personal website (PC and mobile) :

The code address

  • GitHub home page code address
  • Personal website home page code address

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌