使用 Hexo 快速免费搭建个人网站

使用 Hexo 快速免费搭建个人网站

• 前言
• 软件下载
• 注意事项：
• • 为防止恶意软件入侵，下载可执行文件时会自动加上.dat后缀，下载后去掉.dat后缀即可正常使用
• 软件安装：
• • • git安装
    • Node.js 安装：
    • VSVode 安装：
    • Hexo-cli 安装:
    • 配置Git用户和ssh密钥
    • 配置ssh公钥:
    • • Github 配置ssh公钥：
      • Gitee 配置ssh公钥:
    • 下载源码：
    • 直接下载：
    • 快速开始
    • 网站内容修改:
    • 新建文章和页面内容:
    • • 文件生成位置：
    • 上传网站
    • • 上传到Gitee：
    • 上传到 Github：
• 最后:

---

---

前言

使用 Hexo 快速免费搭建个人网站
本文档教你如何快速使用hexo + Github Pages / Gitee Pages 免费搭建一个个人网站。 首先你需要准备一台 Win7 或者 Win10 系统的电脑。 并成功注册 Github 或者 Gitee 的账号(任意一个就行。或者两个都用)。
Github官网: https://github.com/
Gitee官网: https://gitee.com/
注册好账号后就可以进行下一步骤了。

软件下载

Hexo必备运行环境软件包下载:

两种格式任选一种格式下载就行了。
如果没安装解压缩软件或者不会解压，可以下载自解压程序。

下载自带解压程序
坚果云下载.exe程序

下载Zip压缩包
坚果云下载.zip压缩包

注意事项：

为防止恶意软件入侵，下载可执行文件时会自动加上.dat后缀，下载后去掉.dat后缀即可正常使用

软件安装：

文件名称前面都标注有序号，按顺序逐个安装就行。

git安装

打开 1.Git-2.33.0.2-64-bit.exe 后一直按Next,直至完成安装。
温馨提示：建议不要修改安装路径，否则会导致后面的批处理脚本出现问题。

Node.js 安装：

打开 2.node-v13.14.0-x64.msi 勾选 I accept 后一直按 Next 直到安装完成.
温馨提示：建议不要修改安装路径，否则会导致后面的批处理脚本出现问题。

点Finish

VSVode 安装：

打开 3.VSCodeUserSetup-x64-1.59.1.exe 根据提示完成安装。安装目录随意。
附加任务部分全部勾选。

安装完打开发现软件是英文的，可以安装语言包。

软件界面右下角会弹出提示框询问是否安装语言包，如果没有弹出，则需要手动安装。
点击左侧的应用图标，在弹出的搜索框内输入chinese，第一个就是语言包，点击install按钮安装就行。

安装完语言包会提示重新启动软件，软件重启后就变成中文咯。

Hexo-cli 安装:

打开4.安装hexo-cli.bat文件，等待安装完成就行。

Hexo-cli有三种安装方式:
npm : 官方源，如果是在中国大陆访问速度可能有点慢。
cnpm : 淘宝的npm镜像源，中国大陆访问速度最快。
yarn : 比 npm 速度快。

怎么知道有没有成功安装呢？
只需要再打开一次4.安装hexo-cli.bat文件。如果输出Hexo的版本信息则表示安装成功了。

配置Git用户和ssh密钥

ssh密钥 用于Git上传文件一种身份验证凭证，配置后上传文件不用输入密码。

打开5.设置git用户名和生成密钥.bat文件，并输入你的用户名和邮箱，内容随意。
然后就会弹出一个窗口，什么都不用填，输入三次 回车键即可。

以上生成密钥的窗口不用管它，直接输入三次回车键，直至窗口自动关闭

再按一次回车，密钥内容就会 导出.txt文件

---

脚本执行完成后，就会发现目录下多了一个已生成ssh密钥.txt文件。
直接全选并复制文件里面的内容，用于设置Gitee和Github的ssh私钥

---

配置ssh公钥:

Github 配置ssh公钥：

打开Github官网，并登录账号。点击网站右上角你的头像，然后选择Settings

左侧菜单找到并点击SSH and GPG Keys。右侧内容点击 New SSH Key。
新建SSH Key

1.把之前在已生成ssh密钥.txt文件里面复制的内容粘贴进去。并点击Add SSH Key。
可能会弹出窗口要求输入Github密码进行身份验证。

2.粘贴密钥内容并保存

Gitee 配置ssh公钥:

打开Gitee官网，并登录账号。点击网站右上角你的头像，然后选择设置。

左侧菜单找到并点击SSH 公钥。在右侧把之前在已生成ssh密钥.txt文件里面复制的内容粘贴进去。并点击确定。
可能会弹出窗口要求输入Gitee密码进行身份验证。

---

下载源码：

建议将源码导入到自己的Github或者Gitee账号上。方便跨平台管理，可以在不同设备进行配置。
如果你只有一台电脑，也不在其他设备上同步编辑。可以直接下载源码。

网站源码模板(Hexo-butterfly-demo)：

• Gitee:

https://gitee.com/guguge/Hexo-butterfly-demo.git

---

• Github:

https://github.com/guguliu/Hexo-butterfly-demo.git

直接下载：

打开6.下载源码.bat文件，然后把上面任意一个链接，在窗口内按鼠标右键直接粘贴进
去，直接回车就能下载。

• 直接下载

快速开始

下载完成后会发现目录下多了个文件夹，进入目录。
先打开启动脚本.bat，输入1并回车，执行 安装必备插件命令。

可以选择 ==npm ==、 cnpm、 ==yarn ==三种模式任意一种进行安装

输入对应数字回车就行【下载慢建议选择cnpm 或 yarn】

---

---

网站内容修改:

网站的配置主要包含在==_config.butterfly.yml和_config.yml==这两个文件内。
修改也很简单，直接修改每个选项冒号后面的内容就行。

---

注意格式!!! 每个选项的冒号:与内容之间都有一个空格隔开。
如果是多行元素，注意缩进与上一行对齐。请勿破坏排列格式。
改之前建议备份以下文件。报错了方便换回来。backups目录下有备份的初始文件。
修改内容过多建议执行一下== 4.清理缓存 功能==。

改完直接运行启动脚本.bat 中的 本地测试功能，就能进行预览。

• 配置文件再次修改完要重新启动本地测试功能。页面才会更新。

新建文章和页面内容:

打开创建文章或页面.bat，输入对应数字就可以选择创建文章页面或者创建独立页面。文件名可以随意输入。

文件生成位置：

文章页：位于 source \ _posts 目录内。包含一个.md文件和一个同名的文件夹，文件夹内放图片和资源文件。
独立页面：位于 source目录内生成一个单独的文件夹,文件夹内包含一个index.md。

---

— 分隔的区域外，即后面空白处。就是文章编写区域。
文章格式采用的是Markdown格式编写，仅使用简单的符号和文字即可生成特定格式。简单易上手。

可以边运行启动脚本.bat 中的本地测试功能边写文章，hexo支持实时预览文章页面内容。编写的时候保存文件并刷新浏览器页面就能看到新内容。

---

上传网站

需要把网站上传上去才能被所有人访问到

上传到Gitee：

打开Gitee官网并登录，点击右下角头像旁边的加号。选择新建仓库。

如果作为网站使用，仓库名称需要和你的用户名一样，例如：

Gitee Pages没有限制，开源和私有都能使用。点击创建按钮完成创建

创建成功后就会跳转到仓库页面，点击SSH按钮获取地址并复制。

回到网站源码下载目录，打开并编辑==_config.yml文件。
找到 url==： 把 https:// 后面的内容改成： 你的gitee用户名.gitee.io，例如：

再找到 repo: 把刚才复制的SSH地址粘贴进去，例如:

回到网站源码下载目录，运行启动脚本.bat,输入3 并回车，就会开始上传网站内容了。
第一次上传会让你记住主机，输入yes继续。

上传成功后返回刚才创建的仓库页面，刷新后，多了很多文件则表示上传成功。
接着点击服务,选择gitee pages

勾选强制Https,再点击启用

稍等片刻后就会出现一个网址，可以通过这个网址访问你的网站了！

注意：gitee pages 是不支持自动更新的，如果你后续上传了新的内容，都要到设置页面点击更新按钮，更新页面。

---

上传到 Github：

打开Github官网并登录，点击右下角头像旁边的加号。选择New Repository仓库。

如果作为网站使用，仓库名称格式必须为： 你的Github用户名.github.io

选择Public。再点击Create Repository 按钮完成创建

创建成功后就会跳转到仓库页面，点击SSH按钮获取地址并复制。

回到网站源码下载目录，打开并编辑_config.yml文件。
找到 url： 把 https:// 后面的内容改成： 你的GitHub用户名.gitee.io，例如：

再找到 repo: 把刚才复制的SSH地址粘贴进去，例如:

回到网站源码下载目录，运行启动脚本.bat,输入3 并回车，就会开始上传网站内容了。
第一次上传会让你记住主机，输入yes继续。

上传成功后返回刚才创建的仓库页面，刷新后，多了很多文件则表示上传成功。
接着点击Settings,新页面左侧菜单 选择pages

一般会默认启用了，上面会出现你的网站地址，可以通过这个网址访问到你的网站了。
如没有启动则需要点击下面的Save

最后:

Github Pages是支持页面自动更新的，后续如果上传了新内容，页面就会自动刷新，无需再设置
还可以绑定自定义域名，前提是需要购买一个域名。并解析到Github的服务器上。