我的个人主页
我的个人主页
GitHub Pages是GitHub提供的一个静态网站托管服务，允许用户直接从仓库中托管网站。无论是个人主页、项目展示还是博客，GitHub Pages都能轻松实现。而且，它完全免费，无需任何服务器配置，非常适合初学者使用。
准备工作
1. 注册GitHub账号
如果你还没有GitHub账号，首先需要注册一个。访问GitHub官网，点击"Sign up"按钮，按照提示完成注册流程。
2. 安装Git工具
Git是一个分布式版本控制系统，用于管理代码仓库。你可以从Git官网下载并安装适合你操作系统的Git工具。
3. 配置SSH key
为了方便地与GitHub仓库进行交互，建议配置SSH key。打开Git Bash（Windows）或终端（Mac/Linux），输入以下命令：
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
将生成的公钥添加到GitHub账户中：
- 打开GitHub，点击头像选择"Settings"
- 在左侧菜单中选择"SSH and GPG keys"
- 点击"New SSH key"，将公钥内容粘贴进去，保存即可
创建GitHub Pages项目
1. 创建新仓库
登录GitHub后，点击右上角的"+"号，选择"New repository"。在仓库名称处输入username.github.io（将username替换为你的GitHub用户名），选择"Public"，然后点击"Create repository"。
2. 配置仓库设置
进入仓库页面，点击"Settings"选项卡。在左侧菜单中找到"Pages"，在"Source"下拉菜单中选择"main"分支，然后点击"Save"。此时，GitHub Pages已经启用，你的网站地址将是https://username.github.io。
3. 选择主题或自定义设计
GitHub Pages支持Jekyll主题，你可以直接选择一个现成的主题，也可以从零开始自定义设计。对于初学者，建议先从主题开始。
编写网页内容
1. HTML基础结构
HTML是网页的基础，用于定义内容的结构。创建一个名为index.html的文件，输入以下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
</head>
<body>
<h1>欢迎来到我的主页！</h1>
<p>这是一个用GitHub Pages搭建的个人网站。</p>
</body>
</html>
2. CSS样式设计
CSS用于控制网页的样式。创建一个名为style.css的文件，输入以下代码：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
h1 {
color: #333;
}
在index.html中引用CSS文件：
<head>
<link rel="stylesheet" href="style.css">
</head>
3. JavaScript交互功能
JavaScript可以为网页添加交互功能。创建一个名为script.js的文件，输入以下代码：
document.addEventListener('DOMContentLoaded', function() {
alert('欢迎访问我的主页！');
});
在index.html中引用JavaScript文件：
<body>
<!-- 其他内容 -->
<script src="script.js"></script>
</body>
部署和发布
1. 将代码推送到GitHub仓库
在本地仓库目录下，打开Git Bash或终端，输入以下命令：
git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:username/username.github.io.git
git push -u origin main
2. 查看上线效果
等待几分钟后，访问https://username.github.io，你将看到自己创建的个人主页已经成功上线！
进阶技巧
1. 自定义域名
你可以在GitHub Pages中绑定自己的域名。在仓库的"Settings" -> "Pages"中找到"Custom domain"，输入你的域名并保存。
2. 添加更多功能
你可以通过添加更多HTML页面、使用Markdown撰写博客、集成第三方服务等方式，为你的个人网页添加更多功能。
3. 优化网页性能
使用CDN加速静态资源加载，压缩图片和代码，减少HTTP请求，可以有效提升网页性能。
案例展示
最后，让我们欣赏一些炫酷的个人网页案例，激发你的创作灵感：
通过GitHub Pages，你可以轻松搭建属于自己的个人网页，展示你的作品，分享你的想法，甚至创建一个完整的个人博客。无论你是编程新手还是资深开发者，都可以借助这个强大的工具，将自己的创意变为现实。赶快动手试试吧！