免费的个人网站托管-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:https://github.com/,在顶部菜单栏点击"+",然后"New repository"新建仓库,输入项目的相关信息,然后"Create repository"创建仓库:

STEP2:推送文件至仓库

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

STEP3:访问测试

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

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

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

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

STEP2:开启项目的Pages功能

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

总结

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

每个人知道的东西都是有限的,如果你有更好的托管个人免费网站的方法,期待你的分享,如果国内有其它可用的代码托管仓库也是可以支持个站托管的,非常期待你的分享

相关推荐
IT_陈寒19 分钟前
Python高手都在用的5个隐藏技巧,让你的代码效率提升50%
前端·人工智能·后端
lcc18733 分钟前
Vue3 ref函数和reactive函数
前端·vue.js
艾小码35 分钟前
还在为组件通信头疼?defineExpose让你彻底告别传值烦恼
前端·javascript·vue.js
gnip36 分钟前
docker总结
前端
槁***耿36 分钟前
TypeScript类型推断
前端·javascript·typescript
带只拖鞋去流浪39 分钟前
迎接2026,重新认识Vue CLI (v5.x)
前端·vue.js·webpack
c***V3234 小时前
Vue优化
前端·javascript·vue.js
李@十一₂⁰6 小时前
HTML 特殊字体符号
前端·html
小奶包他干奶奶8 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy8 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js