一、前言
想搭建自己的网站吗？通常需要买一台服务器，购买一个域名进行备案后，解析到自己的服务器，还要搭建环境，后期运维等等…
本文提供一种基于 Github Page 服务搭建个人静态网站的方法。 以最低的成本展示内容，不需要服务器，不需要运维，只需要将项目推送到 Github 上进行托管即可。
1.1 涉及到的知识
若后文有看不懂的部分，可以查找相关知识点
- Linux基础命令
- Git基础使用
- Github基础使用
- Web开发基础
1.2 静态网站 VS 动态网站
1.2.1 静态网站
静态网页一般指不需要和后端数据进行交互的网页，也就是数据内容不会动态的更新。
1.2.2动态网站
动态网站并不是指具有动画功能的网站，而是指网站内容可根据不同情况动态变更的网站，一般情况下动态网站通过数据库进行架构。
1.3 Github Page 是什么？
GitHub Pages 是一个静态站点托管服务。了解更多
二、部署
2.1 创建仓库
- 创建Github仓库，填好信息->其他默认->创建
- 记下你的远程仓库地址，我的是：
git@github.com:Z446C/PageTest.git
2.2 推送项目
- 创建3个文件：index.html, styles.css, main.js
index.html源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Demo</title>
</head>
<body>
<h1>This is a demo.</h1>
<p>2022-05-13</p>
<script src="./main.js"></script>
</body>
</html>
styles.css源码如下：
h1 {
color: pink;
}
p {
color: blue;
}
main.js源码如下：
alert('Hi！')
- 克隆GitHub远程仓库到本地
git clone 远程仓库地址
将 index.html, styles.css, main.js 拷贝到项目文件夹里
到目前为止 PageTest 项目文件夹的目录如下：
PageTest
-.git
-index.html
-main.js
-styles.css
- 推送资源到Github远程仓库
cd 项目文件夹路径
git add .
git commit -m 'first push'
git push
输入账号密码验证
- 设置github page服务
Settings->Pages->选择分支master->保存Save，需要等一下
到此为止，项目已经部署好了，可以访问它显示的域名。
2.3 网页访问测试
- 访问你的默认域名
http://用户名.github.io/仓库名，我的是：http://Z446C.github.io/PageTest/ - 使用 站点访问速度检测，GET一下
可以发现访问有点慢，不过不用担心，后期可以使用其他技术加速访问 - 当然也可以使用 路由追踪 追踪一下路由节点，最后都会到美国的github节点服务器
三、结语
3.1 彩蛋
GitHub留给用户的彩蛋，若一开始创建仓库的时候使用 username.github.io ，将会创建一个特殊的仓库——用于个人展示的静态网页，可以使用使用http://username.github.io 来访问，而不用带上仓库名了，一般使用仓库名是用于项目展示的。
3.2 姊妹篇文章
Github Page 个人主页——自定义域名
Github Page 个人主页——CDN加速
Github Page 个人主页——Hexo博客
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
