使用 Github Pages 免费部署网站

Last updated 3 months ago

Was this helpful?

不用域名，不用服务器，不用关系服务器配置，只需要提供一个可正常访问的前端git项目，就能直接拥有一个个人网站！

虽然挺诱人的，不过也有几个缺点：

域名是github提供的个人地址，所以域名还是不能随心所欲的。

没有web服务器，所以也没有nginx配置，像类似vue、react的history模式的项目，还是无法正常使用，只能改为hash模式。

生成的项目访问地址，不是根域名形式，而是有一个项目名路径，这个在下面有说明

开始操作

在github中打开项目，切换到「setting」

在「setting」页直接下滑到底部，这是会分成两种情况，一种是当前项目是「private」私人项目，那应该会看到下图这样的场景，「A」处是「github page」功能，它会提示花钱进行升级，或者在「B」处，把项目改成「public」公开项目。

正常我们当然是不花钱，所以乖乖把项目改成公开项目，然后就能看到下面这样。

我们需要把下拉框修改，修改为我们想使用的、作为公开项目源码目录的分支，选择后，会自动刷新页面。

刷新完成，再回到这里，github page 功能处小有变化，这里说明已经配置完成了，红线处的地址，就是任何人都可以访问的公开的网站地址(设置完成后，可能需要再等待一两分钟，才能真正可访问)。

至此，已基本完成，此后，只用本地修改完这个项目，然后push到github仓库，页面就会自动更新，很是方便。

但这里需要注意的是这个地址的形式：https://niao-yu.github.io/githubPage/，它不是根目录地址，而是自带有一个路径githubPage/的地址，可以发现这个路径，就是我们这个项目的名字。

这一点在前端项目配置中需要注意，如果项目中的资源请求地址，比如获取获取js、css、图片字体等等，请求地址不能是类似/index.js这种绝对地址，而应该是类似./index.js这种相对地址。

注意下面的这个输入框，这里可以设置一个地址，当用户访问你的github page地址(https://niao-yu.github.io/githubPage/)时，github会自动重定向到这个地址，比如我这里把他改为www.junlli.com。

一旦这样修改了，那我们放在github中的这个项目，基本就没用了，这个功能的用处，应该是用来项目修整时的临时重定向；或者自己独立购买了域名和服务器，自己部署了项目，用来把使用这个旧地址的用户引流过去，

修改完成后，有如下提示。

对了，如果想关闭项目，可以直接把「github page」处设置源代码分支的下拉框，再改回None；也可以把项目再直接改为私有项目

使用 Github Pages 免费部署网站

不用域名，不用服务器，不用关系服务器配置，只需要提供一个可正常访问的前端git项目，就能直接拥有一个个人网站！

虽然挺诱人的，不过也有几个缺点：

域名是github提供的个人地址，所以域名还是不能随心所欲的。

没有web服务器，所以也没有nginx配置，像类似vue、react的history模式的项目，还是无法正常使用，只能改为hash模式。

生成的项目访问地址，不是根域名形式，而是有一个项目名路径，这个在下面有说明

开始操作

在github中打开项目，切换到「setting」

正常我们当然是不花钱，所以乖乖把项目改成公开项目，然后就能看到下面这样。

我们需要把下拉框修改，修改为我们想使用的、作为公开项目源码目录的分支，选择后，会自动刷新页面。

至此，已基本完成，此后，只用本地修改完这个项目，然后push到github仓库，页面就会自动更新，很是方便。

但这里需要注意的是这个地址的形式：https://niao-yu.github.io/githubPage/，它不是根目录地址，而是自带有一个路径githubPage/的地址，可以发现这个路径，就是我们这个项目的名字。

这一点在前端项目配置中需要注意，如果项目中的资源请求地址，比如获取获取js、css、图片字体等等，请求地址不能是类似/index.js这种绝对地址，而应该是类似./index.js这种相对地址。

修改完成后，有如下提示。

对了，如果想关闭项目，可以直接把「github page」处设置源代码分支的下拉框，再改回None；也可以把项目再直接改为私有项目