在GitHub上部署你的第一个静态个人网站

最新推荐文章于 2025-06-29 17:43:35 发布

梦道长生

最新推荐文章于 2025-06-29 17:43:35 发布

阅读量1.7k

点赞数 22

CC 4.0 BY-SA版权

文章标签： github 前端 html5 css

本文链接：https://blog.csdn.net/qq_63036514/article/details/145762439

在数字时代，拥有一个个人网站就像是拥有了一张数字名片。无论你是开发者、设计师、作家还是任何领域的爱好者，一个个人网站都能帮助你展示作品、分享想法，甚至提升职业形象。而GitHub，这个全球最大的代码托管平台，不仅可以帮助你管理代码，还能免费托管你的静态网站。本文将带你从零开始，一步步在GitHub上部署你的第一个静态个人网站。

适合前端初学者直接将自己的个人博客发布到互联网上访问

个人博客：Tokepson Web

你也可以在硅云申请免费的域名：域名注册_免费域名_低价购买域名_企业和个人申请域名 - 硅云

这是我用github pages搭建的个人博客，欢迎访问

1. 为什么选择GitHub Pages？

GitHub Pages 是 GitHub 提供的一项免费服务，允许用户托管静态网站。它的优势在于：

免费：无需支付服务器费用。
简单：只需几个简单的步骤即可部署。
版本控制：利用Git进行版本管理，方便协作和回滚。
自定义域名：支持绑定自定义域名，提升专业性。

2. 准备工作

在开始之前，你需要准备以下工具和资源：

GitHub账号：如果你还没有，先去GitHub官网注册一个。
Git：确保你的电脑上安装了Git。如果没有，可以从Git官网下载并安装。
文本编辑器：推荐使用VS Code、Sublime Text等代码编辑器。
静态网站模板：你可以自己编写HTML/CSS/JS，或者使用现成的模板。这里推荐一些资源：
- HTML5 UP：提供免费的响应式HTML5模板。
- Bootstrap：流行的前端框架，提供丰富的组件和模板。

3. 创建你的第一个GitHub仓库

登录GitHub：进入GitHub官网并登录你的账号。
新建仓库：点击右上角的“+”号，选择“New repository”。
命名仓库：仓库名称必须遵循特定的格式：<你的用户名>.github.io。例如，如果你的用户名是johnsmith，那么仓库名称应该是johnsmith.github.io。
设置仓库：选择“Public”（公开），然后点击“Create repository”按钮。

4. 克隆仓库到本地

打开终端：在电脑上打开终端（Windows用户可以使用Git Bash）。

克隆仓库：使用以下命令将仓库克隆到本地：

git clone https://github.com/<你的用户名>/<你的用户名>.github.io.git

例如：

git clone https://github.com/johnsmith/johnsmith.github.io.git

进入仓库目录：
```
cd <你的用户名>.github.io
```

5. 创建你的静态网站

编写HTML文件：在仓库目录下创建一个index.html文件，这是你的网站首页。你可以使用以下简单的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>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #007BFF;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的个人网站！</h1>
    <p>这是我的第一个GitHub Pages网站。</p>
</body>
</html>

添加CSS和JS：如果你有更复杂的需求，可以创建style.css和script.js文件，并在HTML中引用它们。

6. 提交并推送代码到GitHub

添加文件到Git：
```
git add .
```

提交更改：

git commit -m "首次提交：创建个人网站"

推送代码到GitHub：
```
git push origin main
```

7. 访问你的网站

https://<你的用户名>.github.io

例如：

https://johnsmith.github.io

你应该能看到你刚刚创建的静态网页。

8. 自定义域名（可选）

如果你有自己的域名，可以将其绑定到GitHub Pages上，提升网站的专业性。

在域名注册商处设置DNS：添加一条CNAME记录，将你的域名指向<你的用户名>.github.io。
在GitHub仓库中设置自定义域名：进入仓库的“Settings”选项卡，找到“Pages”部分，在“Custom domain”中输入你的域名并保存。

9. 进阶：使用Jekyll构建博客

如果你想要更复杂的功能，比如博客系统，可以使用Jekyll。Jekyll是一个静态网站生成器，支持Markdown写作，并且与GitHub Pages完美集成。

安装Jekyll：在终端中运行以下命令：
```
gem install jekyll bundler
```
创建Jekyll站点：
```
jekyll new myblog
cd myblog
```
本地预览：
```
bundle exec jekyll serve
```
打开浏览器，访问http://localhost:4000，你可以看到你的Jekyll博客。
部署到GitHub Pages：将生成的_site文件夹中的内容推送到你的GitHub仓库。

10. 总结

通过本文，你已经学会了如何在GitHub上部署一个静态个人网站。无论你是技术小白还是有一定经验的开发者，GitHub Pages都为你提供了一个简单、免费且强大的平台来展示你的作品和想法。接下来，你可以继续探索更多高级功能，比如使用Jekyll构建博客、添加Google Analytics分析流量，甚至集成第三方API来增强网站功能。