If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

在 Github 上托管你的网站

Github是一家托管“代码仓库”的公司,集中存放着项目的代码。许多代码仓库都是“开源”的,这意味着它们可被全世界公开浏览。这真的太棒了,因为这一切都建立在程序员彼此学习以及分享工作成果的基础上!可汗学院拥有不少开源软件库。代码库可以包含各种类型的代码,而不仅仅是HTML和CSS —— 任何使的项目运作的代码都包含在内。
为什么要介绍关于他们的事?好的,Github有一个名为 Github Pages 的功能,可以让你轻松自由地创建一个托管在 yourusername.github.io上的多文件网站。
注意:可汗学院不隶属于Github。在决定注册帐户之前,请参阅Github使用条款和其他政策,特别是如果你还未满13岁。

注册 Github 帐户

访问github.com,你将在首页看到一个注册表单。(如果你以及拥有了帐号,那么恭喜!可以跳到第2步)。
当你在选择用户名时,请记住它可以在互联网上公开查看,它将在网站的URL中:yourusername.github.io。出于隐私原因,有些人喜欢使用昵称或有趣的名字而不是真名,这都取决于你的决定。
Github 注册页面的屏幕截图
在第2步上,选择免费计划。 对于公共网站存储库,您不需要付费计划。 (如果您成为大需求的Github用户并且需要他们的专业功能,则可以随时稍后升级。)
Github 注册步骤2的屏幕截图
在第3步,你可以回答调查问题或跳过该步骤:
Github 注册过程的屏幕截图,第3步填写调查
填写新帐户表单后,请务必检查你的电子邮件收件箱,然后点击该链接以验证您的电子邮件地址:
Gmail 验证 Github 屏幕的屏幕截图

为您的网站创建一个 Github 项目

验证完电子邮件地址后,您会看到开始页面。单击“启动项目”。
Github 开始页面的屏幕截图,有两个按钮,阅读指南和启动项目
在项目创建页面上,系统会要求输入项目名称。确保将项目命名为“YOUR_USERNAME.github.io”。这将告诉Github你正在制作一个特殊的网页项目,以便它知道在更改文件时将文件上传到面向用户的URL。由于我的用户名是“PamelaFoxBot”,我可以将我的项目命名为“PamelaFoxBot.github.io”:
Github 界面的屏幕截图, 用于创建新项目
恭喜,你有了一个新项目!但还没有文件。作为创建第一个文件的快捷方法,请单击“README”链接
创建新项目后 Github 界面的屏幕截图
现在,你正在查看Github文的件编辑器界面,以获取名为README.md 的文件。将文件名从README.md 更改为 index.html服务器默认 index.html 为网站文件夹主文件。然后,这个index页面可以链接到网站的其他页面。
README.md 在Github 文件编辑器的屏幕截图,文件名以圆圈标注
删除文件编辑器的当前内容,并将其替换为你的网页的HTML。你可以从可汗学院的项目中复制并粘贴HTML,也可以在计算机上进行开发。
Github 文件编辑器的屏幕截图,编辑框中包含HTML
向下滚动页面,直到找到“提交”区域,然后单击“提交新文件”。每次创建文件的新版本时,您都会进行“提交”,以在文件版本历史记录中记录该文件。每个提交都有一条消息来描述更改。 Github建议使用默认消息(在本例中为“Create index.html”),但你也可以通过在框中键入来覆盖它。
Github "提交新文件" 界面的屏幕截图
在浏览器中键入YOUR_USERNAME.github.io,然后重新加载,直到您的网页出现。
Github需要1-10分钟才能将项目更改上传到面向用户的网页URL,因此你可能需要耐心等待。你可能还需要“硬重载”(重载时按住shift键),以清除浏览器缓存。
github.io 上网页的屏幕截图

上传多文件站点到Github

有些人可能已经会使用桌面编辑器在可汗学院之外的多文件网站上工作。你网站可能包含多个HTML,CSS,JS和图像文件。
如果您想将该网站上传到Github,不要担心,不需要单独复制和粘贴每个文件!这确实很乏味。其实还有更好的方法......
在Github上打开您的项目,然后单击“上传文件”。
Github 项目界面的屏幕截图,带有 "上传文件" 按钮,用红色圆圈标记
您将看到Github文件上传器界面。要选择文件,请拖放或使用文件选择器
找到你的项目文件夹,然后选择要上传的文件。
通常,你希望上传已更改的文件。如果不确定,只需上传所有内容。Github将使用算法来确定已更改的内容和未更改的内容,并仅为已更改的文件创建新版本。
文件选择器的屏幕截图
根据需要更改提交消息,然后单击“提交更改”。
提交上传文件的屏幕截图
重新加载你的网页以查看更改!
请记住,最多需要等待10分钟。耐心是我们的朋友。😊
这就是为什么最好在本地桌面环境中进行开发和测试,只有在你对本地网站的外观感到满意时才上传到Github(或任何其他托管服务提供商)。
最终上传网页的屏幕截图

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.