返回

玩转 GitHub — 代码界的颜值担当，建设个人网站页面小白入门教程

前端

GitHub，这个曾经的程序员专享平台，如今已成为一个包罗万象的代码海洋，无论你是前端开发、后端开发、数据分析还是机器学习，都能在这里找到志同道合的伙伴和海量资源。而 Github Pages，这个 GitHub 提供的免费网站托管服务，更是让无数开发者和个人用户趋之若鹜。

准备工作

在开始构建网站之前，我们需要准备以下工具：

  • GitHub 账户（如果没有，请先注册一个）
  • 文本编辑器（如记事本、Sublime Text、Visual Studio Code 等）
  • Markdown 语言基础（如果不会，可以先学习一下，非常简单）
  • HTML 和 CSS 基础（如果不会，也可以先学习一下，但不是必须的）

搭建网站

  1. 创建一个 GitHub 仓库

首先，我们需要创建一个 GitHub 仓库来存放我们的网站代码。进入 GitHub 官网，点击「New」按钮，然后选择「Repository」选项。在仓库名称一栏中，填写你的网站名称，比如「my-website」。在仓库中，填写一些简单的介绍，然后点击「Create repository」按钮创建仓库。

  1. 克隆仓库到本地

仓库创建完成后，我们需要将它克隆到本地电脑上。打开你的命令行工具（如 Git Bash 或 Terminal），进入到你想存放网站代码的目录下，然后运行以下命令：

git clone https://github.com/你的用户名/my-website.git
  1. 添加网站内容

仓库克隆到本地后，就可以开始添加网站内容了。进入到仓库目录下的「docs」文件夹，这是 GitHub Pages 用于存放网站内容的默认文件夹。在这个文件夹下，创建一个「index.md」文件，这是网站的主页文件。

在「index.md」文件中，你可以使用 Markdown 语言来编写网站的内容。Markdown 是一种非常简单的标记语言，非常适合用来编写文档和网页。如果你不会 Markdown，可以先学习一下，网上有很多免费的教程。

  1. 添加 CSS 样式

为了让网站看起来更美观，我们可以添加一些 CSS 样式。在「docs」文件夹下，创建一个「style.css」文件，这是网站的样式文件。

在「style.css」文件中，你可以使用 CSS 代码来编写网站的样式。如果你不会 CSS，可以先学习一下，网上也有很多免费的教程。

  1. 部署网站

当网站内容和样式都添加完成后，就可以部署网站了。打开你的命令行工具，进入到仓库目录下，然后运行以下命令：

git add -A
git commit -m "Initial commit"
git push origin main

运行完以上命令后，你的网站就会自动部署到 GitHub Pages 上。你可以通过以下链接访问你的网站：

https://你的用户名.github.io/my-website

更多功能

除了基本的网站搭建外，GitHub Pages 还有许多其他功能，可以帮助你构建更强大、更复杂的网站。

  • GitHub Actions ：GitHub Actions 允许你自动执行各种任务，如构建网站、部署网站、发送通知等。
  • Jekyll ：Jekyll 是一个静态网站生成器，可以帮助你轻松构建更复杂的网站。
  • Vercel ：Vercel 是一个云托管平台，可以帮助你轻松部署和管理你的网站。
  • Netlify ：Netlify 是另一个云托管平台，可以帮助你轻松部署和管理你的网站。

总结

GitHub Pages 是一个功能强大、易于使用的网站托管服务，非常适合个人和开发者构建网站。通过本指南，你已经学会了如何使用 GitHub Pages 搭建一个免费网站。如果你想了解更多关于 GitHub Pages 的信息，可以访问 GitHub Pages 官方网站：

https://pages.github.com/