纯网页流程,5 分钟创建 GitHub 前端网页

810 阅读3分钟
原文链接: mp.weixin.qq.com

GitHub 是一个面向开源及私有软件项目的托管平台。 我们可以通过使用自动页面生成器在最短的时间内创建并初始化简单的 HTML + CSS 的页面。 然后,我们可以通过 Web 或本地计算机远程修改 GitHub Pages 的内容和样式。

(接下来开始创建你的个性网页吧)

1.创建初始网站

当然,第一步是登录你的 GitHub ,创建新的 repository 。

在新的 repository 设置面板上,我们需要为之提供一个专属名称来生成自己的网站。

网站的 HTML+CSS 都将保留在一个名为 http://username.github.io 的文件库中(其中“ username ”的是我们自己的 GitHub 用户名)。 要获取初始的 HTML+CSS 页面,您必须打开设置选项卡并启用自动页面生成器。

将设置页面向下滚动,可以看到在底部附近的自动页面生成按钮。 通过单击此按钮,可以完成自动生成内容的一些模版选项。

点击按钮,我们将被引导到内容设置这一步。 我们可以保留默认内容,在稍后对其进行更改。 继续向下查看,并单击页面底部的继续布局按钮。

现在,我们可以选择主题。 这部分需要一点思考,因为现在更容易选择一个主题,可以减少稍后更新主题的工作。 这里我们已经可以看到一些在页面顶部的选项,并确定了一个自己喜欢的,点击发布来完成。

一旦点击发布 ,GitHub 将会完成剩下的工作,等跳转回 repository 页面后。我们的个性页面 http://username.github.io 已经初具模样。然后可以在浏览器中打开一个新标签页,转到个人网页!

2.进行更改

我们可以做的第一件事是删除 index.html 的默认标题,并添加一个更加易读的提示。由于这是一个非常简单的修改,我们要让它成为默认分支: master 。如果选中 index.html 文件,浏览到该文件,我们可以点击 Edit 进行编辑。

在这个文件中找到,它说 http://username.github.io 并更改为一个更友好的称号。译者将把它改为“ Welcome to the Ramanliu homepage! ”!同样,你也可以将之改为你喜欢的内容。 在此标题下,我们应该添加一个有关网页目的的消息,并描述希望人们在此处做什么。

完成这个小小的修改后,到页面底部以进行第一次提交。 这里有两个地方可以写这个更改:主题和扩展描述。 扩展的描述是可选的,所以让我们在主题中留下描述性句子。

看到这里,你应该已经了解如何创建你的专属页面,赶快动手吧。

(PS:原文中部分图片来自之前版本,为了便于部分同学更快上手,译者使用了个人的 GitHub 账户重新截图。另外译者只保留了index.html,删除其余文件,js、css可自行创建)