免费的个人网站托管-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关闭了这个功能,后面不得不想别的方法,下一篇文章介绍我目前正在使用的免费个站托管方法之免费服务器篇 每个人知道的东西都是有限的,如果你有更好的托管个人免费网站的方法,期待你的分享,如果国内有其它可用的代码托管仓库也是可以支持个站托管的,非常期待你的分享

相关推荐
Mintopia几秒前
单体 vs 微服务:当 Next.js 长成“巨石阵”以后 🪨➡️🧩
前端·后端·全栈
吃饺子不吃馅几秒前
大家都在找的手绘/素描风格图编辑器它它它来了
前端·javascript·css
陈随易2 分钟前
改变世界的编程语言MoonBit:配置系统介绍(上)
前端·后端·程序员
Zhencode6 分钟前
CSS变量的应用
前端·css
Mintopia6 分钟前
AIGC 训练数据的隐私保护技术:联邦学习在 Web 场景的落地
前端·javascript·aigc
鹏多多9 分钟前
React项目集成苹果登录react-apple-signin-auth插件手把手指南
前端·javascript·react.js
白水先森10 分钟前
Python 字符串与布尔值详解
java·服务器·前端
TZOF20 分钟前
TypeScript的新类型(五):tuple元组
前端·后端·typescript
TZOF21 分钟前
TypeScript的object大小写的区别
前端·后端·typescript
用户0256861703221 分钟前
前端面试-leetcode力扣hot100算法题Day1
前端