购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.7 课堂实战
——在互联网上发布自己的页面

通过对本章的学习,我们可以在本地创建HTML5文档,并把HTML5文档发布到网络上,以便让更多人方便地访问它们。但请千万注意个人隐私,请勿把不希望公开的个人隐私内容发布到互联网上,也不要发布违反法律法规的内容。

1.7.1 注册GitHub或Gitee账户

GitHub和Gitee都是基于Git的代码托管平台,其功能是允许用户把使用Git管理的代码仓库推送到它们提供的服务器并保存,用户的代码仓库可以设置为公开,也可以设置为私有。GitHub和Gitee还提供一系列开发相关的服务,其中一项是免费的页面托管服务。

GitHub提供的页面托管服务是GitHub Pages,它允许把一个代码仓库作为静态网站提供公开访问。而且对于每个账户,GitHub Pages还提供一个独立二级域名,用户可以通过域名直接访问这个网站,用户也可以选择绑定自己的域名。页面托管服务是免费提供的,所以可使用它免费搭建静态网站。很多知名项目的官方网站也使用GitHub Pages。

Gitee提供Gitee Pages页面托管服务,它与GitHub Pages非常类似。但通常Gitee Pages在国内的访问速度更快。GitHub Pages为每个账户提供的二级域名是“用户名.github.io”。Gitee Pages给用户提供的二级域名是“个性地址.gitee.io”。

因为它们提供的二级域名跟用户名或个性地址相关,所以注册账户时要注意设置合适的用户名或个性地址。下面介绍GitHub与Gitee的注册流程。

注册GitHub账户的流程如下。

首先在浏览器地址栏中输入GitHub官方网址,进入GitHub首页并找到注册页面,如图1.18所示。

然后在邮箱地址栏中输入一个邮箱地址,单击“Sign up for GitHub”按钮。再为自己的GitHub账户设置一个密码,也可以使用GitHub生成的密码。之后经过设置用户名,选择邮箱是否接受产品广告,以及进行机器验证等流程,就可以创建一个GitHub账户了。最后将跳转到一个输入验证码的页面,如图1.19所示,GitHub会给我们的邮箱发送一串数字码,将这串数字填写到页面上即可。

图1.18 GitHub注册页面

图1.19 填写GitHub数字码页面

Gitee的注册过程与GitHub类似,只不过注册时需要输入手机号码,使用手机号或邮箱验证码进行绑定即可。Gitee也可以使用第三方账号登录,例如,可以使用OSChina、阿里云、GitLab、GitHub等账号进行登录。

1.7.2 创建代码仓库

创建和GitHub用户名或Gitee个性地址相同的代码仓库,只有这样才能设置代码仓库的内容作为当前账户二级域名的默认网站内容。

创建在线代码仓库后需要在本地也创建代码仓库,准备好其内容后,将其推送到在线代码仓库。具体操作如下。

在本地创建一个文件夹,这个文件夹的内容就是代码仓库的内容。

安装Git工具。这里介绍命令行版的使用方法。可以在命令提示符窗口中使用git命令。

在新建的文件夹中打开命令提示符窗口,输入并执行初始化代码仓库的命令,如下所示。

git init

若看到提示说明代码仓库已经创建成功,则表示这个刚刚创建的空文件夹已经是一个Git代码仓库了。这条命令会在文件夹中创建一个名为“.git”的隐藏文件夹。所以如果这个文件夹下已经有名为“.git”的文件或者目录,则代码仓库无法创建成功。

把要发布的HTML5网页复制到当前目录下。比如把1.6节创建的个人简历HTML5文件复制过来,重命名为“index.html”。

注意

重命名操作是必要的,因为GitHub Pages和Gitee Pages会返回index.html作为默认的响应。比如请求× × ×.github.io时,实际会返回代码仓库根目录下的index.html。如果访问× × ×.github.io/123/,则返回代码仓库文件123/index.html。

输入并执行下面的命令。

git add index.html

把index.html文件添加到暂存区,然后需要将修改的内容提交到版本库中。提交之前需要先设置提交者的身份,即配置邮箱地址和姓名。以下两条命令分别用于配置姓名和邮箱地址。

git config --global user.name "名称"
git config --global user.email "邮箱地址"

其中的“--global”会把相应配置作为当前操作系统用户的全局默认配置。也就是说,在使用其他代码仓库时,如果没有额外配置,则默认使用通过“--global”配置的名称和邮箱地址。如果去掉以上命令中的“--global”,则以上配置仅对当前的代码仓库生效。

使用以下命令提交commit。

git commit -m "first commit"

1.7.3 推送本地代码仓库内容到在线代码仓库

在GitHub和Gitee中创建新的空代码仓库后,都默认显示如何创建本地代码仓库并推送到在线代码仓库的说明。

需要在本地代码仓库中“绑定”在线代码仓库。可直接复制提示页面的“git remote add origin × × × ×”代码到命令提示符窗口中执行。执行成功后,使用“git push -u origin "master"”命令推送本地代码仓库的内容到在线代码仓库。

执行“git push -u origin "master"”命令后,需要输入身份信息,身份验证通过后,本地代码仓库的内容就被推送到在线代码仓库中。刷新代码仓库页面,就可以看到推送到在线代码仓库的文件了。

注意

向在线代码仓库推送内容时请务必注意个人隐私安全,不要把个人隐私、密码凭据等内容上传到在线代码仓库,尤其是公开代码仓库,因为公开代码仓库可以被任何人访问。

1.7.4 启动静态网站服务

Gitee要求代码仓库必须先公开才能启用Gitee Pages静态网站服务。如果代码仓库是私有的话,则需要将其设置为公开。在Gitee中选择仓库首页上方的“服务”菜单,单击“Gitee Pages”,进入Gitee Pages的配置页面。

在其中选择部署的分支和部署目录,全部使用默认值即可。配置成功后就可以直接通过提供的网址访问上传的HTML5文档了。 6Mayb7FDtvXLAbqYXnoMcu7lAWMNbIWQ6UfWcPRTWuxridQDBPtzk9G88h8qBLau

点击中间区域
呼出菜单
上一章
目录
下一章
×