如何使用GitHub来创建和展示demo

2023-10-22 10:46

短信预约 -IT技能 免费直播动态提醒

GitHub是一个非常流行的开源代码托管平台，它可以让开发者们共享和协作，以帮助加速软件的开发过程。在GitHub上，你可以找到大量开源项目，可以学习和探索其他开发者的代码，并且可以创建自己的项目并与其他人合作。在这篇文章中，我们将讨论如何使用GitHub来创建和展示demo。

创建一个GitHub账号

首先，你需要创建一个GitHub账号。如果你已经有一个账号，可以直接跳到下一步。如果你还没有，请前往GitHub的官方网站https://github.com/，点击“Sign up”按钮，填写相关信息并创建账号。

创建一个Repository

在GitHub上，每个项目都被称为一个“Repository”。为了创建您的demo，您需要创建一个新的Repository。要创建一个Repository，登录你的GitHub账号，点击右上角的加号，并选择“New Repository”。

在“Create a new repository”页面中，输入Repository的名称和描述，选择公共或私有（需要付费）仓库，然后单击“Create Repository”按钮即可创建成功。

添加代码

现在，您需要将您的代码添加到Repository中。您可以直接从本地计算机上传文件，也可以使用Git命令行工具将代码上传，或在GitHub中使用网页编辑器。这里我们以创建一个简单的Hello World demo为例。

首先在本地创建一个名为“helloworld”的文件夹，并创建一个名为“index.html”的文件。下面是文件的代码内容：

<!DOCTYPE html>
<html>
<body>

<h1>Hello World!</h1>

</body>
</html>

然后将这个文件夹上传到GitHub中。在本地打开命令行或终端，输入以下命令：

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

在上述命令中，“cd helloworld”将你的当前目录更改为“helloworld”文件夹，“git init”将文件夹转换为git仓库，“git add .”将你的所有代码添加到本地git仓库，“git commit -m" Initial commit "”将这些修改提交到本地git仓库，“git remote add origin [YOUR_REPOSITORY_URL]”将本地仓库链接到远程仓库，最后“git push -u origin master”将内容推送到master分支。

创建gh-pages分支

创建仓库完成后，我们需要创建一个名为“gh-pages”的分支，这个分支将用于展示我们的Demo。要创建分支，打开Repository，点击“Branch: master”，输入“gh-pages”并创建新分支。

添加Demo网页

现在，我们需要在“gh-pages”分支中添加一个网页来展示我们的Demo。首先，在分支中创建一个新文件夹，并将文件夹重命名为“docs”。然后，将您的demo文件复制到“docs”文件夹中，并将文件名更改为“index.html”。

接下来，我们需要使“gh-pages”分支中的“docs”文件夹成为默认显示的页面。在Repository的设置页面中，找到“GitHub Pages”选项，将Source选项更改为“Master branch/docs folder”，并单击“Save”按钮。稍等片刻，您的Demo就会在GitHub Pages上显示出来了。