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官网（），点击右上角的"Sign up"注册账号
2. 按照提示填写用户名、邮箱和密码，完成注册

✨ 创建网站专用仓库

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

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

第二步：安装必要工具

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

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

• 访问Git官网[]（

• 安装过程中全部选择默认选项即可

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

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

• 访问Node.js官网[]（
• 安装过程中全部选择默认选项即可

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

node -vnpm -v

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

第三步：配置GitHub SSH密钥

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

1. 打开Git Bash（安装Git后会有这个程序）
2. 输入以下命令，设置你的Git信息（把"你的用户名"和"你的邮箱"换成你GitHub的用户名和邮箱）：

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

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

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

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

5. 把密钥添加到GitHub

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

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

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

第四步：安装并初始化Hexo

1. 安装Hexo命令行工具

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

npm install -g hexo-cli

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

1. 选择一个你喜欢的文件夹（比如D盘），创建一个新文件夹（比如"MyBlog"）
2. 打开命令提示符，进入这个文件夹：

cd D:MyBlog

3. 初始化Hexo博客：

hexo init 你的用户名.github.io

3. 本地预览你的博客

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

cd 你的用户名.github.iohexo s

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

第五步：部署博客到GitHub Pages

1. 配置部署信息

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

deploy:  type: git  repo: [email protected]:你的用户名/你的用户名.github.io.git  branch: main

2. 安装部署插件

在命令提示符中输入：

npm install hexo-deployer-git --save

3. 一键部署

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

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

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

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

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

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

git clone [email protected]:next-theme/hexo-theme-next.git themes/next

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

theme: next

3. 复制主题配置文件：
   • 找到node_modules/hexo-theme-next/_config.yml文件
   • 把它复制到博客目录下的themes文件夹中（注意：不是themes/next目录）
4. 清除缓存并重新生成：

hexo clean && hexo g && hexo d

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

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

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

1. 先将 Hexo 项目初始化为 Git 仓库
2. 提交所有文件到本地仓库
3. 添加远程仓库（注意：远程仓库是保存项目源代码的仓库，不是上面的你的用户名.github.io仓库，需要提前创建好）
4. 推送本地仓库到远程仓库

git init # 将 Hexo 项目初始化为 Git 仓库git add . # 添加所有文件到暂存区git commit -m "Initial commit" # 提交所有文件到本地仓库git remote add origin [email protected]:你的用户名/保存项目源代码的仓库名.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. 重新部署博客：

hexo clean && hexo g && hexo d

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

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

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

npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-markdown-it --save

2. 安装必备插件

npm install markdown-it --savenpm 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文件，添加以下配置：

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 显示为 H₂O
• 上标：X^2^ 显示为 X²
• 高亮：==高亮== 显示为 高亮
• 任务列表：- [x] 已完成任务 - [ ] 未完成任务
• 折叠内容：使用+++包裹的内容可以折叠/展开
• 自定义容器：::: tip 可以创建提示框

总结

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

1. 注册GitHub账号，创建网站仓库
2. 安装Git和Node.js
3. 配置SSH密钥
4. 安装并初始化Hexo
5. 部署网站到GitHub Pages
6. 更换主题
7. 将Hexo项目源代码托管到GitHub（额外保护你的项目代码）
8. 学习了绑定独立域名和使用高级Markdown渲染器的技巧

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

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

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

本文由博客一文多发平台 发布！