【001】利用github搭建静态网站

【001】利用github搭建静态网站_essay

article/2025/7/5 21:04:12

文章目录

1. 简介
2. 先了解网址规则
- 2.1 文件及网址形式
- 2.2 相互访问
3. 搭建网页的过程
- 3.1 网页文件
- 3.2 github搭建仓库及文件上传
- 3.3 搭建网站

1. 简介

相信大家都有过想要自己搭建一个稳定可靠的网站，github是一个不错的选择，本来国内有gitee可以搭建网站的，奈何塌房了。github目前还是比较稳定的，经久不衰。

但是使用github搭建网站就免不了加载速度比较慢啥的，因此可以适当科学上网。

本文主要针对于小白，并且不是很复杂的网页进行介绍。适当结合AI进行网页设计，更加快捷高效。

2. 先了解网址规则

2.1 文件及网址形式

已上传两个文件在代码仓中，index.html和white.html。

后续在生成网址的时候，index.html作为主页使用，输入域名和对应的代码仓名称即可访问。white.html则需要在上面的基础上加上white.html才可以访问。

# 域名/代码仓/     访问index.html
https://muyi-xh.github.io/muyi.github.io/
# 域名/代码仓/文件名    访问white.html等其他文件
https://muyi-xh.github.io/muyi.github.io/white.html

请添加图片描述

2.2 相互访问

可以通过上述提及的网址，在另一个网页的相应控件中加入点击跳转的方式，即可。

3. 搭建网页的过程

3.1 网页文件

现如今建立网页不难，结合AI即可完成。需要更丰富的功能，只需要描述详细即可。

详细AI生成过程不展示了，展示相应的文件，自行复制保存。
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简约优雅的主页</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;min-height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);overflow: hidden;position: relative;}body::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center;background-size: cover;opacity: 0.7;z-index: -1;}.content-container {max-width: 800px;padding: 40px;margin: 20px;background: rgba(255, 255, 255, 0.85);border-radius: 15px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);text-align: center;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.3);animation: fadeIn 1.5s ease-out;}h1 {font-size: 2.8rem;margin-bottom: 25px;color: #2c3e50;font-weight: 600;letter-spacing: -0.5px;}p {font-size: 1.4rem;line-height: 1.8;color: #34495e;margin-bottom: 30px;}.quote {font-style: italic;padding: 20px;border-left: 4px solid #3498db;background: rgba(52, 152, 219, 0.1);border-radius: 0 8px 8px 0;margin: 30px 0;font-size: 1.3rem;text-align: left;}.signature {display: block;text-align: right;font-weight: 500;margin-top: 10px;color: #2980b9;}.decoration {display: flex;justify-content: center;gap: 15px;margin: 30px 0;}.dot {width: 12px;height: 12px;border-radius: 50%;background: #3498db;opacity: 0.7;}@keyframes fadeIn {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}@media (max-width: 768px) {.content-container {padding: 30px 20px;}h1 {font-size: 2.2rem;}p {font-size: 1.2rem;}.quote {font-size: 1.1rem;}}@media (max-width: 480px) {h1 {font-size: 1.8rem;}p {font-size: 1.1rem;}}</style>
</head>
<body><div class="content-container"><h1>欢迎来到宁静空间</h1><div class="decoration"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div><p>在喧嚣的世界中，我们都需要一个可以静下心来思考的地方。这个空间没有复杂的干扰，没有无尽的滚动信息，只有你与自己的对话。</p><div class="quote">"简单不是简陋，而是经过深思熟虑后的精致表达。在设计中，减去不必要的元素，留下的才是真正重要的本质。"<span class="signature">— 设计箴言</span></div><p>生活就像这个页面一样，有时我们需要简化，移除那些分散注意力的元素，才能专注于真正重要的事物。</p></div>
</body>
</html>

white.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>极简主义</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #ffffff;min-height: 100vh;display: flex;justify-content: center;align-items: center;font-family: 'Helvetica Neue', Arial, sans-serif;transition: background-color 1s ease;}.message {font-size: 3.5rem;font-weight: 300;color: #333;text-align: center;padding: 2rem;max-width: 800px;line-height: 1.3;letter-spacing: -0.5px;position: relative;}.message::after {content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100px;height: 2px;background: #333;animation: blink 1.5s infinite;}@keyframes blink {0%, 100% { opacity: 0; }50% { opacity: 1; }}@media (max-width: 768px) {.message {font-size: 2.5rem;}}@media (max-width: 480px) {.message {font-size: 2rem;padding: 1.5rem;}}.footer {position: absolute;bottom: 20px;width: 100%;text-align: center;font-size: 0.9rem;color: #999;letter-spacing: 1px;}</style>
</head>
<body><div class="message">在空白中，我们找到无限的可能性</div><div class="footer">MINIMALISM · SIMPLICITY · ELEGANCE</div>
</body>
</html>