【001】利用github搭建静态网站_essay_github 网站搭建
文章目录
1. 简介
相信大家都有过想要自己搭建一个稳定可靠的网站，github是一个不错的选择，本来国内有gitee可以搭建网站的，奈何塌房了。github目前还是比较稳定的，经久不衰。
但是使用github搭建网站就免不了加载速度比较慢啥的，因此可以适当科学上网。
本文主要针对于小白，并且不是很复杂的网页进行介绍。适当结合AI进行网页设计，更加快捷高效。
2. 先了解网址规则
2.1 文件及网址形式
已上传两个文件在代码仓中，index.html和white.html。
后续在生成网址的时候，index.html作为主页使用，输入域名和对应的代码仓名称即可访问。white.html则需要在上面的基础上加上white.html才可以访问。
# 域名/代码仓/ 访问index.htmlhttps://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>3.2 github搭建仓库及文件上传
① 创建仓库
② 上传文件
3.3 搭建网站
选择完成后点击Save，等待网页刷新或者自行刷新，知道在GitHub Pages下面出现网址即可。
注意每次重新上传文件或者新的文件，此处网页刷新的时间决定了，你的网站是否更新完成。
