使用Hexo搭建个人博客

下载nodejs

---

下载git

到相应官网下载,这里不做过多演示

---

到Hexo官网下载hexo

在git bash中下载hexo,如下

npm install -g hexo-cli

---

git连接Github

• 添加SSH 密钥

上图是已经添加完毕后的效果

• 在git bash 中使用绑定的密钥访问github官网

ssh -T git@github.com

• 成功连接,如下:

Github新建存储库:

输入 账户名.github.io

项目搭建

• 创建文件夹,在文件夹下创建Hexo项目

hexo init my-blog

• 进入环境目录

cd my-blog

• 初始化项目

npm i

使用VSCode配置Hexo

运行指令如下:

hexo cl; hexo g; hexo s

• hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。
• hexo g
  • hexo generate: 生成静态文件。
• hexo server
  • 启动服务器。 默认情况下，访问网址为： http://localhost:4000/。

具体详看: 指令 | Hexo

---

安装主题

hexo是一个静态网站生成工具，类似的还有很多...

查看 hexo相关的主题: Themes | Hexo

这里使用 Butterfly主题 演示

• 运行安装命令

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

此时发现成功安装该主题

• 复制该配置文件到项目根目录下

• 改名为 _config.butterfly.yml
• 在Hexo的配置目录下面找到theme,将主题改成 butterfly
  • 剩下的就可以根据Butterfly的文档进行配置即可

• 重新测试:

hexo cl; hexo g; hexo s

• 此时页面报白色,还需要安装渲染器插件(这个命令在Butterfly网站文档中)

npm install hexo-renderer-pug hexo-renderer-stylus --save

• 此时重新加载项目即可

---

代码托管到Github

其实就是 Github Page ，可以将静态网页内容部署到它的服务器上

• 安装一个deploy的插件

npm install hexo-deployer-git --save

• 修改 _config.yml 文件 deploy 部分

deploy: type: git repository: git@github.com:<用户名>/<用户名>.github.io.git branch: main

• 如下图所示:

之前输入的,用户名+存储仓库名

修改好配置后记得 CTRL+S 保存，运行以下命令，将代码部署到 GitHub

仓库部署:

hexo cl; hexo g; hexo d

当看到Deploy done就说明上传成功

哇塞,果然成功了

后续更新代码

并不需要git进行推拉,只需要每次在本地更新完代码后执行:

hexo cl; hexo g; hexo d

也就是反复执行仓库部署

当然也可以新建一个master分支存储到远程仓库,方便换电脑快速推拉博客网站

网站部署

两种方式:

• 网站部署到Vercel上线
  • 需要准备域名
  • 需要准备服务器，在服务器上将域名备案
• 直接使用Github部署即可
  • 啥也不要，省钱

一、将网站部署到Vercel上线（需要域名）

官网地址

使用github注册登录

免费快捷的部署平台：https://vercel.com/

- 配置完成后，之后每一次提交代码到 main 分支都是会自动部署的，非常方便。

- React，Vue，Hexo 等一些技术栈打包产物都是静态资源，都可以使用 Vercel 进行部署。

- 可以自定义域名，用你自己的域名访问感觉逼格一下子就高起来了。

现在 vercel 提供的默认域名在国内访问有点慢，如果自己在国内有域名，配置个自己的域名再访问速度就可以了。

我这里使用了别人的方法,先用的email登录,然后绑定的邮箱

登录进来以后,点击新增project

由于我已经绑定了github,所以会出现以下界面

点击 Deploy 等待部署完成

部署完毕,耶耶耶耶耶yes!

点击底部按钮,进入Dashboard

进入域名管理页面

需要添加自己的域名

好了问题来了,我先去买个域名:

• 没有买,因为下面有一种免费不需要域名的
• 想买的:
  • 阿里云域名购买

重要：注册域名起名！

1. 尽量选择简短的名称，比如品牌名，字符越少越好。比如Tesla，域名就是Tesla.com
2. 一定要选择.COM，不要图方便选择cn，CN是需要备案的
3. 不要在域名当中带字符或者数字，比如Tesla123.com
4. 如果品牌名被人起了，可以加个核心关键词，比如Teslacar.com

扩展:目前国内大的云服务提供商主要就是阿里云、腾讯云、亚马逊

你需要在你购买域名的平台中，在管理域名那里添加一条txt的记录，不是在vercel，这么做是为了确定这个域名是你自己的

买好了,以下是别人的演示:

根据提示进入自己购买的域名的dns解析提供商配置域名解析

此时此刻等待vercel配置好ssl后,就可以使用域名访问了

二、在Github存储库中设置Github Pages

当然这里并不可以设置,需要将仓库公开,私有化仓库是需要升级的,把当前存储库改为公开

之前设成private需要改成public,否则就是上面这种需要升级的情况

公开仓库部署:

• 保存并访问

再次点击页面左侧的Pages侧栏选项

• 点击跳转之后，可以看到已经为该项目创建了静态网站了：