编程崽

登录

一叶在编程苦海沉沦的扁舟之上,我是那只激情自射的崽

使用 Github Pages 免费部署网站

使用 Github Pages 免费部署网站

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

虽然挺诱人的,不过也有几个缺点:

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

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

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

开始操作

  1. 在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;也可以把项目再直接改为私有项目

更新时间:2022/12/09 13:47:19