免费的个人网站托管-GitHub Pages篇

前情

对于前端开发来说,拥有一个自己的个人网站是一种执着也是一种排面,但是大部分前端也都对服务端这一块的东西都停留在了解阶段,但是如果正儿八经的上线一个网站或多或少需要懂一些服务端知识,需要购买服务器,注册域名,申请证书等等,那对于前端er有没有什么方式可以免费托管自己的个人网站了?

关于GitHub Pages

GitHub PagesGitHub 提供的一个免费的静态网站托管服务,它允许 GitHub 用户创建和托管自己的静态网站,这些网站可以通过特定的 GitHub 仓库进行管理和托管

Github Pages的站点类型有几种:

个人或组织站点(User or Organization sites):

对于个人或组织站点,每个GitHub用户或组织只能有一个站点,它通常使用username.github.io或organizationname.github.io的格式,这是GitHub Pages的默认站点,通常用于个人网站、博客等。 项目站点(Project sites):

对于项目站点,每个GitHub仓库可以有一个关联的GitHub Pages站点,这意味着对于每个项目,您可以创建一个独立的GitHub Pages站点,无需限制。

方式1:搭建个人(组织)类型的网站

STEP1:新建仓库

登录GitHub:github.com/,在顶部菜单栏点击"+",然后"New repository"新建仓库,输入项目的相关信息,然后"Create repository"创建仓库:

STEP2:推送文件至仓库

再根据如下说明把你的个人网站html等静态文件推送到当前仓库下

STEP3:访问测试

大概等待几十秒,如果你根目录下是index.html,直接访问:https://用户名.github.io/,即可成功部署你的第一个属于自己的个人静态网站了,如果是别的文件名那就是https://用户名.github.io/文件名.html即可

方式2:搭建项目类型的网站

STEP1:新建仓库+推送文件至仓库

参考上面搭建个人(组织)类型的网站的STEP1和STEP2,唯一不同的就是项目名称没有强制要求,只要符合github项目名规范即可,大概流程是:登录GitHub:github.com/,在顶部菜单栏点击"+",然后"New repository"新建仓库,输入项目相关信息,然后"Create repository"创建仓库,再把你本地静态文件推送到当前仓库,我这里使用的项目名是:xwdataboard

STEP2:开启项目的Pages功能

大概等待几十秒,如果你根目录下是index.html,直接访问:https://用户名.github.io/xwdataboard/,即可成功部署你的第一个属于自己的个人静态网站了,所以我目前个人的静态网站地址是:xw5.github.io/xwdataboard...

总结

我一开始个人站点就托管在GitHub上面的,通过GitHub Pages托管自己的个人网站十分方便,而且也很简单,但是有一个不太好的地方,因特殊原因GitHub国内经常访问是不通的,如果想访问可能你得想一些方法,后面我发现早期国内也是有代码仓库Gitee - 基于 Git 的代码托管和研发协作平台,我看到托管在GitHub上的个站经常无法打开,当时就转头把我的个站托管在Gitee上面的,可能运气不太好,只在上面托管了一周时间不到,当时正处在失业的时候,还用这个网址投了几天简历,我某一天想去看看自己个站,突然发现那个网址是打不开的,最后才知道Gitee关闭了这个功能,后面不得不想别的方法,下一篇文章介绍我目前正在使用的免费个站托管方法之免费服务器篇 每个人知道的东西都是有限的,如果你有更好的托管个人免费网站的方法,期待你的分享,如果国内有其它可用的代码托管仓库也是可以支持个站托管的,非常期待你的分享

相关推荐
Mintopia7 分钟前
🤖 AI 决策 + 意图OS:未来软件形态的灵魂共舞
前端·人工智能·react native
攀登的牵牛花7 分钟前
前端向架构突围系列 - 框架设计(四):依赖倒置原则(DIP)
前端·架构
程序员爱钓鱼15 分钟前
Node.js 编程实战:测试与调试 —— 日志与监控方案
前端·后端·node.js
Mapmost24 分钟前
数字孪生项目效率翻倍!AI技术实测与场景验证实录
前端
小酒星小杜27 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统-Input篇
前端·程序员·架构
Cache技术分享35 分钟前
290. Java Stream API - 从文本文件的行创建 Stream
前端·后端
陈_杨38 分钟前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片开发完全指南
前端·harmonyos
小杨同学4944 分钟前
C 语言实战:枚举类型实现数字转星期(输入 1~7 对应星期几)
前端·后端
陈_杨1 小时前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片刷新机制
前端·harmonyos
go_caipu1 小时前
Vben Admin管理系统集成qiankun微服务(二)
前端·javascript