本文目录导读：
图片来源于网络，如有侵权联系删除
《基于GitHub代码托管平台的建站全流程操作指南》
在当今数字化时代，拥有自己的网站变得越来越重要，而代码托管平台GitHub不仅是程序员们进行代码管理和协作的重要场所，也可以被巧妙地用来构建网站，通过GitHub Pages功能，用户可以轻松地将自己的静态网站部署到网络上，无需复杂的服务器配置，以下将详细介绍如何利用GitHub来建站。
准备工作
1、注册GitHub账号
- 访问GitHub官网（https://github.com/），点击“Sign up”按钮。
- 填写用户名、邮箱地址和密码等必要信息，需要注意的是，用户名最好简洁且易于识别，邮箱地址要确保能够正常接收通知。
- 完成验证步骤，可能包括验证邮箱等操作。
2、安装Git
- 对于Windows系统，可以从Git官网（https://git - scm.com/downloads）下载安装包，按照默认安装向导进行安装，安装完成后，可以在命令提示符或Git Bash中使用Git命令。
- 对于Mac系统，若系统版本较新，可能已经预装了Git，可以通过在终端中输入“git --version”来检查是否已安装，如果未安装，可以使用Homebrew（https://brew.sh/）等包管理器来安装，命令为“brew install git”。
- 对于Linux系统，不同的发行版有不同的安装方式，在Ubuntu系统中，可以使用“sudo apt - get install git”命令进行安装。
创建代码仓库
1、登录GitHub账号
- 登录后，点击右上角的“+”号，选择“New repository”。
2、配置仓库信息
- 输入仓库名称，这个名称将成为你的网站在GitHub Pages中的一部分，如果仓库名为“my - website”，那么网站的访问地址可能是https://<你的用户名>.github.io/my - website/。
- 可以添加仓库描述，这有助于他人了解你的项目内容。
- 选择仓库的公开性或私有性，如果是公开仓库，任何人都可以查看你的代码；如果是私有仓库，只有你授权的用户可以访问。
- 不要勾选“Initialize this repository with a README”选项，因为我们将创建自己的初始文件结构。
- 点击“Create repository”按钮创建仓库。
创建网站文件
1、本地创建项目文件夹
- 在本地计算机上选择一个合适的位置，创建一个新的文件夹，my - website - local”。
2、编写HTML文件（以简单示例为例）
- 在项目文件夹中创建一个名为“index.html”的文件，使用文本编辑器（如Visual Studio Code、Sublime Text等）打开该文件。
- 在“index.html”文件中编写基本的HTML结构，
```html
<!DOCTYPE html>
<html>
<head>
图片来源于网络，如有侵权联系删除
<title>My First GitHub Pages Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my website built with GitHub Pages.</p>
</body>
</html>
```
3、添加CSS样式（可选）
- 如果想要为网站添加样式，可以创建一个名为“styles.css”的文件，在“index.html”文件的<head>标签中添加以下链接：
```html
<link rel="stylesheet" href="styles.css">
```
- 在“styles.css”文件中编写样式规则，
```css
body {
font - family: Arial, sans - serif;
background - color: #f4f4f4;
}
h1 {
color: #333;
}
```
将本地文件推送到GitHub仓库
1、初始化本地仓库
- 打开命令提示符或Git Bash，进入本地项目文件夹（“my - website - local”）。
- 输入“git init”命令，这将初始化本地仓库，创建一个.git隐藏文件夹，用于管理版本控制相关的信息。
2、关联远程仓库
图片来源于网络，如有侵权联系删除
- 在GitHub仓库页面，点击“Clone or download”按钮，复制仓库的URL（例如https://github.com/<你的用户名>/my - website.git）。
- 在本地命令行中输入“git remote add origin <仓库URL>”，将本地仓库与远程仓库关联起来。
3、添加和提交文件
- 输入“git add.”命令，这将添加项目文件夹中的所有文件到暂存区。
- 输入“git commit - m "Initial commit"”命令，Initial commit”是提交的注释，描述本次提交的内容。
4、推送文件到远程仓库
- 输入“git push - u origin master”命令，这将把本地的文件推送到GitHub仓库的master分支，如果是首次推送，可能需要输入GitHub账号的用户名和密码进行身份验证。
启用GitHub Pages
1、进入仓库设置
- 在GitHub仓库页面，点击“Settings”标签。
2、配置GitHub Pages
- 在“Settings”页面中，向下滚动找到“GitHub Pages”部分。
- 在“Source”选项中，选择“master branch”（如果你的网站文件在master分支）。
- 点击“Save”按钮，GitHub将开始构建和部署你的网站。
- 稍等片刻后，你可以在页面上看到你的网站的访问地址，例如https://<你的用户名>.github.io/my - website/，点击该地址即可访问你刚刚创建的网站。
进阶操作
1、使用自定义域名（可选）
- 如果你想使用自己的域名来访问网站，首先需要购买一个域名，可以选择GoDaddy、Namecheap等域名注册商。
- 在GitHub仓库的“Settings” - > “GitHub Pages”部分，添加自定义域名，需要在域名注册商处设置域名解析，将域名指向GitHub Pages的服务器。
2、添加更多页面和功能
- 要添加更多的HTML页面，可以在本地项目文件夹中创建新的.html文件，按照上述推送文件的步骤将其推送到GitHub仓库。
- 如果想要添加JavaScript交互功能，可以创建.js文件，并在HTML文件中正确引用，创建一个名为“main.js”的文件，在“index.html”文件的<head>或<body>标签中添加以下引用：
```html
<script src="main.js"></script>
```
通过以上步骤，我们可以利用GitHub代码托管平台轻松地创建和部署一个简单的静态网站，GitHub Pages为开发者和非开发者提供了一个便捷的建站途径，不仅可以展示个人作品、项目成果，还可以用于构建小型的博客、作品集等，在使用过程中，不断探索和学习，还可以实现更多复杂的功能和个性化的设置，使网站更加独特和实用。
评论列表