如何白嫖Github羊毛,用 GitHub Pages 快速搭建个人博客

488 阅读3分钟

如何使用 GitHub Pages 搭建个人博客

本教程将指导你使用 GitHub Pages 搭建个人博客。通过以下步骤,你可以快速建立一个完全免费的个人网站。

基础准备

在开始之前,你需要以下工具和账号:

  • GitHub 账号
  • 安装 Git
  • 安装 Node.js

创建仓库

  1. 在 GitHub 上创建一个新仓库,仓库名必须为 <github的用户名>.github.io
    • 该仓库将作为你个人网站的地址,例如:https://<github的用户名>.github.io

安装和配置 Hexo

安装 Hexo

使用以下命令安装 Hexo:

npm install hexo-cli -g

创建博客目录

创建博客目录并进入该目录:

hexo init blog
cd blog

# 安装依赖
npm install

部署配置

_config.yml 中添加以下配置,用于将博客部署到 GitHub Pages:

deploy:
  type: git
  repo: https://github.com/<github的用户名>/<github的用户名>.github.io.git
  branch: main

创建和发布内容

创建新文章

你可以使用以下命令创建新文章:

hexo new "我的第一篇博客"

生成静态文件

生成静态文件:

hexo generate

部署到 GitHub Pages

在部署前,需要安装部署插件:

npm install hexo-deployer-git --save

将静态文件部署到 GitHub Pages:

hexo deploy

主题设置

你可以选择并配置一个你喜欢的 Hexo 主题:

  1. Hexo 主题市场 选择一个主题。
  2. 将主题文件复制到 themes 目录。
  3. _config.yml 中设置主题名称。

自定义域名

如果你想使用自己的域名,可以按照以下步骤操作:

  1. 在域名提供商处添加一个指向 GitHub Pages 的 CNAME 记录。
  2. 在 GitHub 仓库的 Settings > Pages 中设置自定义域名。

常见问题排查

  • 确保在博客根目录下执行命令
  • 确认 Git 已正确安装并配置
  • 验证 GitHub 仓库地址是否正确

以上就是使用 GitHub Pages 搭建个人博客的完整步骤。部署插件是一个常见的问题所在,安装 hexo-deployer-git 后通常能解决大部分问题。

访问你的博客

完成以上所有步骤后,你可以访问你的个人博客,网址为:https://<github的用户名>.github.io。

GitHub Pages 只支持静态网页,因此你无法运行 PHP、Ruby 等服务器端语言。

效果演示(仅供参考)

image.png

GitHub Pages 的其他重要用途

GitHub Pages 除了搭建个人博客外,还有以下几个重要用途:

项目文档托管

  • 为开源项目提供在线文档。
  • 可以使用 Markdown 编写 API 文档、使用教程等技术文档。
  • 支持项目主页的展示和说明。

静态网站托管

  • 可以托管任何静态网页内容。
  • 支持 HTML、CSS 和 JavaScript 文件的直接部署。
  • 可以作为前端项目的演示环境。

个人/组织展示

  • 可以创建个人或组织的官方主页。
  • 作为在线简历或作品集展示平台。
  • 可以打造成互联网上的个人"身份证"。

教育资源分享

  • 发布教学材料和课件。
  • 分享演讲稿和培训资料。
  • 制作在线教程和学习指南。

技术优势

  • 完全免费且无需自己购买服务器。
  • 支持自定义域名绑定。
  • 提供免费的 HTTPS 服务。
  • 可以使用多种静态网站生成器,如 Jekyll、Hugo 等。
  • 支持通过 GitHub Actions 实现自动化部署。

使用限制

  • 仅支持静态内容,不支持服务器端代码。
  • 站点大小不应超过 1GB。
  • 每月带宽使用上限为 100GB。
  • 每小时更新次数不建议超过 10 次。

GitHub Pages 作为一个免费且功能丰富的静态站点托管服务,可以满足多种展示和分享需求,是个人和组织进行在线展示的理想选择。