当前位置：首页 > news >正文

使用GitHub Pages创建并部署你的第一个网站

news 2025/11/4 13:21:38

知识的世界

- 第一步：创建GitHub仓库
- 第二步：创建网站文件
- - 1. 创建 `index.html` 文件
  - 2. 创建 `README.md` 文件（如果还没有）
- 第三步：部署网站
- 第四步：访问你的网站
- 后续学习建议
- 常见问题解决

手把手教你如何使用GitHub Pages创建并部署你的第一个网站。

第一步：创建GitHub仓库

在这里插入图片描述

登录你的GitHub账户
点击右上角"+“号，选择"New repository”
填写仓库信息：
- Repository name: 你的账户名.github.io (必须这样命名！)
- Description: 我的个人网站
- 选择"Public"
- 勾选"Add a README file"

在这里插入图片描述

第二步：创建网站文件

在你的仓库中，点击"Add file" → “Create new file”，创建以下文件：

在这里插入图片描述

1. 创建 `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: 'Microsoft YaHei', sans-serif;line-height: 1.6;color: #333;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;}.container {max-width: 800px;margin: 0 auto;padding: 40px 20px;}.card {background: white;border-radius: 15px;padding: 40px;box-shadow: 0 10px 30px rgba(0,0,0,0.2);text-align: center;}.avatar {width: 120px;height: 120px;border-radius: 50%;background: linear-gradient(45deg, #667eea, #764ba2);margin: 0 auto 20px;display: flex;align-items: center;justify-content: center;color: white;font-size: 40px;font-weight: bold;}h1 {color: #2c3e50;margin-bottom: 15px;font-size: 2.2em;}.subtitle {color: #7f8c8d;font-size: 1.2em;margin-bottom: 30px;}.intro {text-align: left;margin: 30px 0;padding: 20px;background: #f8f9fa;border-radius: 10px;border-left: 4px solid #667eea;}.skills {display: flex;justify-content: center;gap: 10px;flex-wrap: wrap;margin: 20px 0;}.skill-tag {background: #e3f2fd;color: #1976d2;padding: 5px 15px;border-radius: 20px;font-size: 0.9em;}.links {margin-top: 30px;}.btn {display: inline-block;padding: 12px 30px;background: linear-gradient(45deg, #667eea, #764ba2);color: white;text-decoration: none;border-radius: 25px;margin: 0 10px;transition: transform 0.3s ease;}.btn:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0,0,0,0.2);}.footer {margin-top: 30px;color: #7f8c8d;font-size: 0.9em;}</style>
</head>
<body><div class="container"><div class="card"><div class="avatar">陈</div><h1>你好，我是陈同学</h1><div class="subtitle">来自大山里的计算机爱好者</div><div class="intro"><p>🌟 我是一名热爱计算机技术的学生，虽然身处大山，但通过互联网看到了更广阔的世界。</p><p>💻 目前正在学习网站开发技术，这是我的第一个GitHub Pages网站！</p><p>🎯 梦想是成为一名优秀的软件工程师，用技术改变生活。</p></div><div class="skills"><span class="skill-tag">HTML</span><span class="skill-tag">CSS</span><span class="skill-tag">JavaScript</span><span class="skill-tag">Git</span></div><div class="links"><a href="https://github.com/chen-0220" class="btn">我的GitHub</a><a href="mailto:你的邮箱@gmail.com" class="btn">联系我</a></div><div class="footer"><p>🚀 通过GitHub Pages部署 • 学习永无止境</p></div></div></div>
</body>
</html>

2. 创建 `README.md` 文件（如果还没有）

在README文件中添加：

# 陈同学的个人网站这是我的个人网站，使用GitHub Pages部署。## 关于我- 🏞️ 来自美丽的大山
- 💻 计算机技术爱好者
- 🌱 正在学习网站开发
- 🎯 目标：成为优秀的开发者## 技能- HTML
- CSS  
- JavaScript (学习中)
- Git## 访问网站网站地址：https://chen-0220.github.io