如何创建一个hexo的静态博客

image

type

Post

status

Published

date

Feb 21, 2024

slug

star18

summary

如何创建一个hexo的静态博客，免费部署在github上面，或者vercel容器里面，可以自定义域名，可以国内外访问，速度超快，超级稳定，个人博客首选

第一部分

1、安装环境node.js

安装时注意添加路径

https://nodejs.org/en/

2、安装git bash

https://git-scm.com/download/win

在 git bash 中输入以下命令启用 Hexo镜像

~~npm config set registry~~ ~~https://registry.npm.taobao.org~~

⬆️证书过期 ⬇️用下面这个官方的

在 git bash 中输入以下命令开始全局安装 Hexo

在 git bash 中输入

在 git bash 中输入hexo g ,编译静态文件到public文件夹，这是根目录会自动生成public文件夹

在 git bash 中输入hexo s，启动本地预览，关闭gitbash后,就无法预览

输入 http://localhost:4000 ，能正常访问，则启动成功

第二部分

3、将hexo代码提交到github仓库，

注册github.com账号

新建一个github仓库，仓库名必须是你的GitHub用户名.github.io，

比如1jia1.github.io

目的是为了搭载 GitHub Pages 服务，如果导入到vercel,可以自定义其它用户名

3.1、生成SSH密钥

在 git bash 中输入如下命令

生成密匙命令

ssh-keygen -t rsa -C "你注册github的邮箱"

在本地电脑中找到新生成的公匙，复制id_rsa.pub中的内容

找到github个人图像

设置-SSH and GPG keys-New SSH Key-粘贴公钥

验证是否成功

输入命令

ssh -T git@github.com

3.2打开 _config.yml，找到文件最后一行的 deploy

替换以下代码

安装推送命令

清理缓存，重新生成静态文件，推送到github的命令

推送成功后

访问网址：你的GitHub用户名.github.io

第三部分

安装butterfly主题

https://butterfly.js.org/

根目录下git bash 输入命令

安装渲染器

修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

清理缓存，重新生成静态文件，推送到github的命令，每次更新完内容执行此命令

访问网址预览效果：你的GitHub用户名.github.io

第四部分

在vercel容器安装hexo，添加自定义域名

用github同名账号登录https://vercel.com/

第五部分

安装hexo admin 插件

执行以下命令即可

open http://localhost:4000/admin/

5.1菜单栏修改

在 _config.yml 下找到 menu ：去掉前面的#就可以显示菜单

5.2添加标签页

根目录输入

找到 source/tags/index.md 这个文件，修改这个文件：

添加 type: "tags"

---

title: 标签

date: 2018-01-05 00:00:00

type: "tags"

orderby: random

order: 1

---

5.3添加子页面

hexo n 页面的名称创建你的页面就行

5.4首页顶部图片更换

# The banner image of home page

著名的无版权可商用的图片网站

https://pixabay.com/

hexo主题分享

1.连背景都是特效的博客

preccrepad.github.io

2.番茄博客，博文里面有很多小特效，比如会动的小标签啦，图片的加载动画啦

tomotoes.com/blog/

github.com/Tomotoes/he…

3.一个UI设计师的博客，界面干净清爽

esappear.github.io/clover/

4.二次元爱好者转码人的博客，内容丰富，有点耗性能

shoka.lostyu.me

5.yilia升级版，简洁的博客，可以按主题和标签分类

joeybling.github.io

6.简单的博客框架，分类明晰，速度快，功能较少

hufangyun.com

7.暖色梵高主题，配色舒适

www.nothinglin.ml/

8.标签和UI特别可爱，图片选取很用心的一个博客

rawchen.com/

9.功能清晰，强大的主题matery，文章统计功能做得很细致

blinkfox.com/

10.

hexo-theme-redefine

11.butterfly

AI总结：

本文详细介绍了如何在Windows系统上创建一个Hexo静态博客，并将其部署在Github或Vercel容器上。步骤包括Hexo的本地安装，提交到Github仓库，安装主题，以及在Vercel容器安装Hexo和添加自定义域名。此外，还提供了博客内容修改的方法，包括修改菜单内容，页面内容，文章添加，插件安装，SEO，CDN加速加载页面等。最后，还分享了一些优秀的Hexo主题。