GitHub 还有个功能,咱们可以利用它搭建免费的网站,一分钱都不用花,根本不用买服务器,是不是很棒?所使用的服务是GitHub Pages

具体的实现,有两种方式

给当前用户添加站点

第一种,给你当前 GitHub 用户,做一个专门的仓库来存放站点。

仓库的名字是用户名+.github.io

image.png

仓库必须是 Public 的,然后 Create repository。现在你可以将这个仓库 Clone 下来,修改好后,再 Push 上去。更简单点,咱们直接在这里编辑也行,创建一个 index.html,添加上这样的代码。当然你还可以组织下文件夹结构,添加上自己想要的 css、js 等,这个我们后面会演示到。

<!DOCTYPE html>
<html>
<body>
<h1>clwy-cn</h1>
<p>长乐未央公司站点</p>
</body>
</html>

然后直接 Commit 了,稍等 1~2 分钟,现在就可以访问https://clwy-cn.github.io了。

image.png

2. 给项目添加网站

打开咱们之前开发的 learn 项目,创建一个新分支,叫做gh-pages。这个名字在 GitHub 是固定死的,你这里不能取其他名字。

在 gh-pages 分支中,使用编辑器打开项目后,可以将代码全部删掉,只保留下 index.html 和.gitignore 就好了。然后可以新建一个 assets 文件夹,里面再新建一个 css 文件夹。最后新建一个 common.css 文件。

css 修改为:

p {
    font-size: 20px;
    color: red;
}

再来简单修改下 html,让它引用下新建的 css 文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>learn项目的网页</title>
    <link rel="stylesheet" href="assets/css/common.css">
</head>
<body>

<p>学会了吗?学会了记得去点个赞。</p>
<p>长乐未央,幸福的程序员社区。</p>

</body>
</html>

这样相关页面就制作完成了。下面当然就是,Commit 然后 Publish 上去了。接着就可以直接访问https://clwy-cn.github.io/learn 了,大家可以看到,css 文件也生效了。

image.png

网址是你的用户名+github.io/+仓库名,具体的地址,可以在当前项目的 Settings 中,GitHub Pages 中找到。

image.png

3. 自定义域名

然后如果你还拥有自己的域名的话,还可以将这个地址设置成自定义的域名,

image.png

需要在你购买域名的厂商那里做域名解析。例如我这里使用的是阿里云,定义一个 learn.clwy.cn 域名,使用 CNAME 的方式,解析到 clwy-cn.github.io。你需要将这里改成自己想要的域名,你可以叫做 www,当然其他的也可以。下面这里,设置成自己的 GitHub 用户名。

image.png

等待解析完成后,

image.png

就可以使用我刚才自定义的域名访问了。http://learn.clwy.cn

4. HTTPS

但是现在,还是用的 http 的方式,我们可以做一个简单的设置,使用 HTTPS 来访问,只需要勾选上:

image.png

刷新,再来访问看看,可以看到已经是使用 HTTPS 了。

image.png

已添加到喜欢了