How to create a personal home page and Project demo page in GitHub

Source: Internet
Author: User



Results Demo:

→ Personal homepage: Fifteen718.github.io

→ Project Demo page: Fifteen718.github.io/2048lol

To do the project presentation page, first you have to set up your personal homepage, so we start with "How to create a personal homepage."

First, personal homepage

1th Step: Build a library (create a repository)


↑ as pictured, build a "username". github.com or "username". Github.io project, as for how to build the project that I said to build the library (Create a repository) will not say more, should be regarded as basic live, will not Baidu.

Note: the "username" here refers to your login account in GitHub, not your nickname in GitHub, such as my username here must be fifteen718


2nd Step: Build the website


↑ as shown, pass the code of your personal homepage.

Attention:

1, must have a index.html in the outermost layer, so that in order to access the "username". github.com or "username". There's a default home page that jumps out of the way.

2, about the folder upload, the relevant tutorials can be seen →github use notes-GitHub Desktop download, installation, use


3rd Step: Visit

Verify that the code works and that it has been successfully uploaded to the "username". github.com or "username". Github.io project, please wait a few minutes, others GitHub need to catch their breath, then you can enter "username". Github.com or "username". Github.io to access the page.

Note: When you enter the. com this URL will report 404 errors, and prompts you "Did you mean to visit Fifteen718.github.io?" "(Take me here for example), you obediently use the. io suffix URL bar.



Second, the Project demo page

First step: Select the project to be demonstrated


↑ As pictured, here we take my 2048 project as an example, click the left mouse button to enter the project.

Note: In fact, the first step is very important, the internet said "to build a gh-pages branch", stupid I in the personal homepage of the project under the construction of a Gh-pages branch, and then the project to demonstrate the code to branch up, and then change to change to also can not visit, embarrassed dead ...


Step 2nd: Build a gh-pages Branch


↑ as pictured, this diagram is a screenshot of the branch I have built.

Note: The name of this branch must be gh-pages, so don't change it.


Step 3rd: Modify the default branch


↑ as pictured, click on the settings in the top right corner of the item-click on the left branches-select Gh-pages as the default branch-and finally update.


4th Step: Visit

As with the personal homepage, you will need to wait a few minutes for your visit.

Access address format: "username". github.com/"project name" or "username". github.io/"project name"

The latter. Io format is recommended because. com may not be accessible.

In my case, my username on GitHub is fifteen718, (yes, same as my id on csdn, haha ~). Then, I built the Gh-pages branch under my 2048LOL project, so if I wanted to do an online demo of my 2048 project, the URL I entered in the browser is: fifteen718.github.io/2048lol


That ' s all.

--------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------

Thank the following resource contributors:

How to create a personal home page and Project demo page in GitHub

GitHub Pages

GitHub Help

Create GitHub technology blog Full Raiders


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.