前言:保罗群里的小伙伴想用docker部署hexo,但是我就问了,你既然都可以部署docker了,为啥还非得hexo?
结果他说,不想搞数据库(
还说不想搞本地环境;害,那我就写一篇教程来吧

准备工作

需要如下工具&账号

  • Cloudflare 账号一枚
  • Github 账号一枚
  • Chrome浏览器一只(or edge)

创建仓库

在你喜欢的地方创建一个github 仓库,在创建的时候建议勾选 Add README
repository visibility 最好选择public

进入codespaces

进入刚刚创建好的仓库,选择使用codespaces打开
fc976e46-d031-4730-92d6-6f5a96d49a65
会自动弹出新标签页,进入到codespaces visual studio code页面

安装hexo

在codespaces页面的终端里,可直接输入hexo的安装指令
npm install hexo-cli -g
使用rm -rf README.md命令删除README文件,因为在执行hexo init命令时,文件夹内必须为空;

然后使用mv命令,将.git文件夹先暂时移出,使安装hexo文件夹内保持空;
mkdir -p /workspaces/backup mv .git ../backup/.git

移动完之后使用ls -al命令确保文件夹内为空
然后执行hexo init命令来安装hexo
由于海外机房的原因,hexo的安装十分迅速

安装结束后就可以把刚刚移出去的.git文件移回来了
mv /workspaces/backup/.git /workspaces/hexo-test/

安装主题

这里随便选了一个主题进行安装
hexo-theme-material

按照主题作者的文档,进行安装;
cd themes git clone https://github.com/bollnh/hexo-theme-material.git material cd material git checkout {branch/tags name}

找到hexo的配置文件,将theme段修改为 material即可

theme: material

调试

写文章、配置主题啥的我这里就不写了,有很多教程,就不重复造轮子了;

使用 hexo s打开在线调试
右侧的转发端口会显示出链接,点击进去就可以在线调试了;

acdcd4a5-3ff6-4d96-81e2-ddacffb0d9f6

push

写好文章之后,就可以push到仓库了捏

使用git三连来push到你的仓库
git status git add . git commit -m "内容"
然后就可以了捏

部署到cloudflare pages

当你写好文章且调试好,push到你的仓库之后
就可以明目张胆的用cloudflare pages来部署你的博客了
(记得关闭codespaces!!!)

来到cloudflare pages
9f070841-93e6-4c28-83ef-bd2daf9a3afd
点击创建应用程序,选择pages
c8586050-ef44-4dae-b307-da5accbc0d05
选择导入现有存储库,链接到你的GitHub账户,选择刚刚创建好的仓库

构建命令:npm exec hexo generate
构建输出目录: public

大功告成✨

6c5060cb-46c6-475a-a45e-d731142b4b86

78842c45-92f1-4c9a-973a-d5bcfd3b3237

新增文章

继续在仓库页面打开codespace
进入codespaces后会自动拉取仓库内的文件
直接在终端输入npm install hexo-cli -g
无需再次hexo init,就可以编辑文章调试了;

写好文章之后push到仓库,cloudflare pages会自动拉取构建,不用手动去操作了

✨至此,大功告成

0

评论

0 条

评论加载中...