如何使用 GitHub Pages 搭建个人博客
本教程将指导你使用 GitHub Pages 搭建个人博客。通过以下步骤,你可以快速建立一个完全免费的个人网站。
基础准备
在开始之前,你需要以下工具和账号:
- GitHub 账号
- 安装 Git
- 安装 Node.js
创建仓库
- 在 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 主题:
- 在 Hexo 主题市场 选择一个主题。
- 将主题文件复制到
themes目录。 - 在
_config.yml中设置主题名称。
自定义域名
如果你想使用自己的域名,可以按照以下步骤操作:
- 在域名提供商处添加一个指向 GitHub Pages 的 CNAME 记录。
- 在 GitHub 仓库的 Settings > Pages 中设置自定义域名。
常见问题排查
- 确保在博客根目录下执行命令
- 确认 Git 已正确安装并配置
- 验证 GitHub 仓库地址是否正确
以上就是使用 GitHub Pages 搭建个人博客的完整步骤。部署插件是一个常见的问题所在,安装 hexo-deployer-git 后通常能解决大部分问题。
访问你的博客
完成以上所有步骤后,你可以访问你的个人博客,网址为:https://<github的用户名>.github.io。
GitHub Pages 只支持静态网页,因此你无法运行 PHP、Ruby 等服务器端语言。
效果演示(仅供参考)
GitHub Pages 的其他重要用途
GitHub Pages 除了搭建个人博客外,还有以下几个重要用途:
项目文档托管
- 为开源项目提供在线文档。
- 可以使用 Markdown 编写 API 文档、使用教程等技术文档。
- 支持项目主页的展示和说明。
静态网站托管
- 可以托管任何静态网页内容。
- 支持 HTML、CSS 和 JavaScript 文件的直接部署。
- 可以作为前端项目的演示环境。
个人/组织展示
- 可以创建个人或组织的官方主页。
- 作为在线简历或作品集展示平台。
- 可以打造成互联网上的个人"身份证"。
教育资源分享
- 发布教学材料和课件。
- 分享演讲稿和培训资料。
- 制作在线教程和学习指南。
技术优势
- 完全免费且无需自己购买服务器。
- 支持自定义域名绑定。
- 提供免费的 HTTPS 服务。
- 可以使用多种静态网站生成器,如 Jekyll、Hugo 等。
- 支持通过 GitHub Actions 实现自动化部署。
使用限制
- 仅支持静态内容,不支持服务器端代码。
- 站点大小不应超过 1GB。
- 每月带宽使用上限为 100GB。
- 每小时更新次数不建议超过 10 次。
GitHub Pages 作为一个免费且功能丰富的静态站点托管服务,可以满足多种展示和分享需求,是个人和组织进行在线展示的理想选择。