How to use GitHub to create and display demos

GitHub is a very popular open source code hosting platform that allows developers to share and collaborate to help speed up the software development process. On GitHub, you can find a large number of open source projects, learn and explore other developers' code, and create your own projects and collaborate with others. In this article, we will discuss how to use GitHub to create and display demos.

1. Create a GitHub account

First, you need to create a GitHub account. If you already have an account, you can skip directly to the next step. If you haven't yet, please go to GitHub's official website https://github.com/, click the "Sign up" button, fill in the relevant information and create an account.

2. Create a Repository

On GitHub, each project is called a "Repository". In order to create your demo, you need to create a new Repository. To create a Repository, log in to your GitHub account, click the plus sign in the upper right corner, and select "New Repository".

In the "Create a new repository" page, enter the name and description of the Repository, select a public or private (payment required) warehouse, and then click the "Create Repository" button to create it successfully.

3. Add Code

Now, you need to add your code to the Repository. You can upload files directly from your local computer, use the Git command line tool to upload code, or use a web editor in GitHub. Here we take creating a simple Hello World demo as an example.

First create a folder named "helloworld" locally and create a file named "index.html". The following is the code content of the file:

nbsp;html>



<h1 id="Hello-World">Hello World!</h1>

Then upload this folder to GitHub. Open a command line or terminal locally and enter the following command:

cd helloworld
git init
git add .
git commit -m "Initial commit"
git remote add origin [YOUR_REPOSITORY_URL]
git push -u origin master

In the above command, "cd helloworld" will change your current directory to the "helloworld" folder, and "git init" will convert the folder to git repository, "git add ." will add all your code to the local git repository, "git commit -m" Initial commit "" will commit these changes to the local git repository, "git remote add origin [YOUR_REPOSITORY_URL]" will repository Link to the remote warehouse, and finally "git push -u origin master" pushes the content to the master branch.

4. Create gh-pages branch

After creating the warehouse, we need to create a branch named "gh-pages", which will be used to display our Demo. To create a branch, open the Repository, click "Branch: master", enter "gh-pages" and create a new branch.

5. Add Demo web page

Now, we need to add a web page to the "gh-pages" branch to display our Demo. First, create a new folder in the branch and rename the folder to "docs". Then, copy your demo file into the "docs" folder and change the file name to "index.html".

Next, we need to make the "docs" folder in the "gh-pages" branch the default displayed page. In the settings page of the Repository, find the "GitHub Pages" option, change the Source option to "Master branch/docs folder", and click the "Save" button. Wait a moment and your Demo will be displayed on GitHub Pages.

6. Share your Demo

Now, you have successfully created a Demo on GitHub and displayed it. Next, you can show off your demo by sharing the link to it with others. You can do this by copying the link to your "GitHub Pages" in the Repository page.

Summary:

Through the introduction of this article, we learned how to display your Demo on GitHub and share the Demo link with others. Whether you are a novice developer or an experienced professional, using GitHub can speed up your development process and make your code more professional and easier to maintain. Hopefully this article will help you showcase your demo and start collaborating on GitHub.

The above is the detailed content of How to use GitHub to create and display demos. For more information, please follow other related articles on the PHP Chinese website!