GitHub-Pages-Hexo搭建个人网站

Posted on Edited on

0基础也能搞定！30分钟免费搭建个人网站全攻略

你是否也曾想过拥有一个自己的网站，却被复杂的技术术语和步骤吓退？今天，我要分享一个超简单的方法，只需要30分钟，零代码基础也能免费搭建一个属于自己的个人网站！

先搞懂两个核心工具：GitHub和Hexo

在开始动手前，咱们先来认识一下今天的两位主角：GitHub和Hexo。这两个工具就像一对黄金搭档，能帮我们免费搭建专业级别的网站。

GitHub：不止是代码仓库，更是免费的网站托管平台

GitHub本质上是一个全球最大的代码托管平台，但它还有一个超实用的功能——GitHub Pages，可以免费帮你托管静态网站！

想象一下，GitHub就像一个免费的"网络存储空间"，你可以把你的网站文件放在这里，它不仅帮你保管，还会免费帮你"上线"，让全世界的人都能访问到。最棒的是，它还提供一个免费的二级域名（比如：username.github.io），连域名钱都省了！

Hexo：写文章像记笔记，自动生成精美网站

Hexo是一个博客框架，它的神奇之处在于：你只需要用Markdown写文章，它就能自动帮你生成一个漂亮的静态网站！

Markdown是啥？简单说就是一种超级简单的文本格式，用几个符号就能实现加粗、标题、列表等格式，比Word简单100倍！

Hexo的优点一大堆：

  • 速度快：生成几百个页面只需要几秒钟

  • 超简单：安装配置几步搞定

  • 巨能打：支持各种炫酷功能和主题

  • 部署方便：一条命令就能发布网站

第一步：注册GitHub，创建你的第一个仓库

🚀 准备工作：注册GitHub账号

  1. 打开GitHub官网（https://github.com），点击右上角的"Sign up"注册账号

  2. 按照提示填写用户名、邮箱和密码，完成注册

✨ 创建网站专用仓库

  1. 登录成功之后，点击 GitHub 中的 New repository 创建新仓库

  1. 填写仓库名称，这一步很关键，仓库名称必须是你的用户名.github.io（把"你的用户名"换成你刚注册的GitHub用户名），按照要求填写后点击创建即可

第二步：安装必要工具

1. 安装Git：代码管理好帮手

Git是一个代码管理工具，我们需要用它来把本地文件传到GitHub上。

2. 安装Node.js：Hexo的"发动机"

Hexo是基于Node.js运行的，所以我们需要先安装Node.js。

安装完成后，打开命令提示符（Windows）或终端（Mac），输入以下命令验证安装是否成功：

1
2
node -v
npm -v

如果能看到版本号，就说明安装成功啦！

第三步：配置GitHub SSH密钥

这一步是为了让你的电脑能够"免密码"访问GitHub，省得每次传文件都要输入密码。

  1. 打开Git Bash（安装Git后会有这个程序）

  2. 输入以下命令，设置你的Git信息（把"你的用户名"和"你的邮箱"换成你GitHub的用户名和邮箱）：

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

  1. 输入以下命令，然后连续按三次回车键，即可生成SSH密钥

1
ssh-keygen -t rsa -C "你的邮箱"

  1. 找到生成的密钥文件：通常在C:\Users\你的用户名\.ssh目录下，有一个id_rsa.pub文件，用记事本打开id_rsa.pub文件，复制里面的全部内容

  1. 把密钥添加到GitHub

  • 登录GitHub，点击右上角头像，选择"Settings"

  • 左侧菜单选择"SSH and GPG keys"，点击"New SSH key"

  • 填写密钥标题（标题随便写），把复制的密钥内容粘贴到"Key"框里

第四步：安装并初始化Hexo

1. 安装Hexo命令行工具

打开命令提示符（Windows）或终端（Mac），输入以下命令：

1
npm install -g hexo-cli

2. 创建并初始化你的博客

  1. 选择一个你喜欢的文件夹（比如D盘），创建一个新文件夹（比如"MyBlog"）

  2. 打开命令提示符，进入这个文件夹：

1
cd D:\MyBlog

  1. 初始化Hexo博客：

1
hexo init 你的用户名.github.io

3. 本地预览你的博客

输入以下命令，进入博客目录并启动本地服务器：

1
2
cd 你的用户名.github.io
hexo s

然后打开浏览器，访问http://localhost:4000，你就能看到你的博客啦！是不是很神奇？

第五步：部署博客到GitHub Pages

1. 配置部署信息

用记事本打开博客目录下的_config.yml文件，找到最后面的deploy部分，修改成：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

2. 安装部署插件

在命令提示符中输入：

1
npm install hexo-deployer-git --save

hexo-deployer-git 插件是 Hexo 部署到 Git 仓库的核心工具，它的工作原理有两个重要特性：

  1. 无需项目根目录有 .git 文件夹：
    该插件会在部署时自动在 public 目录初始化一个临时 Git 仓库，即使你的 Hexo 项目根目录没有 .git 文件夹，也能正常将生成的静态文件推送到 GitHub。这意味着你可以将 Hexo 项目和生成的网站文件分开管理。

  2. 只操作 public 目录：
    即使你的 Hexo 项目本身就是一个 Git 仓库（根目录有 .git 文件夹），hexo d 命令也只会关注 public 目录下的内容。它会将 public 目录中的文件作为独立的 Git 仓库进行操作，不会影响你项目根目录的 Git 历史。

这就是为什么无论你的 Hexo 项目是否是 Git 仓库，都能通过 hexo d 命令轻松部署。

3. 一键部署

输入以下命令，把你的博客部署到GitHub Pages：

1
2
3
hexo clean # 清空 public 目录
hexo g # 生成静态文件到 public 目录
hexo d # 将已生成的 public 目录内容部署到 Git 仓库

稍等片刻，部署完成后，你就可以通过https://你的用户名.github.io访问你的网站啦！
作为参考，你可以访问我的个人网站（同样通过 Hexo + GitHub Pages 搭建）：https://zmyai.github.io/

第六步：更换主题，让你的网站更炫酷

Hexo默认的主题比较朴素，我们可以换成更漂亮的主题。这里以"next"主题为例：

  1. 输入以下命令，从github 克隆 next主题到themes/next文件夹中：

1
git clone git@github.com:next-theme/hexo-theme-next.git themes/next

  1. 修改 Hexo 的 _config.yml（站点配置文件，不是主题的 _config.yml）文件，把theme字段改成next：

1
theme: next

  1. 复制主题配置文件：

    • 找到node_modules/hexo-theme-next/_config.yml文件
    • 把它复制到博客目录下的themes文件夹中（注意：不是themes/next目录）

  2. 清除缓存并重新生成：

1
hexo clean && hexo g && hexo d

这里放上我自定义后的博客主题：

可选：将 Hexo 项目源代码托管到 GitHub

如果想要将 Hexo 项目源代码部署到 GitHub 仓库，需要

  1. 先将 Hexo 项目初始化为 Git 仓库

  2. 提交所有文件到本地仓库

  3. 添加远程仓库（注意：远程仓库是保存项目源代码的仓库，不是上面的你的用户名.github.io仓库，需要提前创建好）

  4. 推送本地仓库到远程仓库

1
2
3
4
5
git init # 将 Hexo 项目初始化为 Git 仓库
git add . # 添加所有文件到暂存区
git commit -m "Initial commit" # 提交所有文件到本地仓库
git remote add origin git@github.com:你的用户名/保存项目源代码的仓库名.git # 添加远程仓库
git push -u origin master # 推送本地仓库到远程仓库

高级技巧1：绑定独立域名

虽然GitHub提供了免费的二级域名，但如果你想更专业一点，可以绑定自己的域名。

1. 购买域名

可以在腾讯云、阿里云等平台购买域名，价格通常在几十元一年。

2. 配置DNS解析

登录你的域名提供商后台，添加两条DNS记录：

  • A记录：主机记录@，指向185.199.108.153（GitHub Pages的IP地址）

  • CNAME记录：主机记录www，指向你的用户名.github.io

3. 在GitHub设置域名

  1. 在你的GitHub仓库中，点击"Settings" -> “Pages”

  2. 在"Custom domain"中输入你的域名，点击"Save"

  3. 在博客目录下创建一个CNAME文件（无后缀），里面写上你的域名

  4. 重新部署博客：

1
hexo clean && hexo g && hexo d

高级技巧2：使用更高级的Markdown渲染器

Hexo默认的Markdown渲染器功能有限，我们可以换成hexo-renderer-markdown-it，它支持更多Markdown语法和功能。

1. 卸载默认渲染器，安装新渲染器

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save

2. 安装必备插件

1
2
3
4
5
6
7
8
npm install markdown-it --save
npm install markdown-it-emoji --save # 表情符号
npm install markdown-it-mark --save # 高亮
npm install markdown-it-sub --save # 上标
npm install markdown-it-sup --save # 下标
npm install markdown-it-checkbox --save  # 任务列表
npm install markdown-it-expandable --save  # 折叠/展开内容
npm install markdown-it-container --save  # 自定义容器

3. 配置渲染器

修改博客目录下的_config.yml文件，添加以下配置：

1
2
3
4
5
6
7
8
markdown:
  plugins:
    - markdown-it-checkbox  # 任务列表
    - markdown-it-emoji  # 表情支持
    - markdown-it-expandable  # 折叠/展开内容
    - markdown-it-mark  # 支持 ==高亮==
    - markdown-it-sub    # 下标（如 H~2~O）
    - markdown-it-sup   # 上标（如 x^2^）

4. 享受新功能

现在你可以使用更多高级Markdown语法了，比如：

  • 表情符号：:) 显示为 😃

  • 下标：H~2~O 显示为 H2O

  • 上标：X^2^ 显示为 X2

  • 高亮：==高亮== 显示为 高亮

  • 任务列表：

  • 折叠内容：使用+++包裹的内容可以折叠/展开

  • 自定义容器：::: tip 可以创建提示框

总结

恭喜你！按照这个教程，你已经成功搭建了一个属于自己的个人网站。回顾一下，我们做了这些事：

  1. 注册GitHub账号，创建网站仓库

  2. 安装Git和Node.js

  3. 配置SSH密钥

  4. 安装并初始化Hexo

  5. 部署网站到GitHub Pages

  6. 更换主题

  7. 将Hexo项目源代码托管到GitHub（额外保护你的项目代码）

  8. 学习了绑定独立域名和使用高级Markdown渲染器的技巧

是不是比你想象的简单多了？现在，你可以开始在你的网站上写博客、分享知识、展示作品了。快去试试吧！

如果你在搭建过程中遇到问题，欢迎在评论区留言，我会尽力帮助你解决。

🚀 行动起来，拥有一个自己的网站，开启你的线上影响力之旅！