文章目錄
- 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>
3.2 github搭建倉庫及文件上傳
① 創建倉庫
② 上傳文件
3.3 搭建網站
選擇完成后點擊Save，等待網頁刷新或者自行刷新，知道在GitHub Pages下面出現網址即可。
注意每次重新上傳文件或者新的文件，此處網頁刷新的時間決定了，你的網站是否更新完成。
設計與實現細節(完整版))
