【完工】使用vscode+github+cloudflare搭建简约博客

写点生活即可

用来写点小东西(清爽一点)

部署

1.克隆仓库

在代码编辑器(以vscode为例)

ctrl+i打开终端,新建空目录

mkdir simpleblog

进入该目录

cd simpleblog

克隆仓库过来


git clone https://github.com/2005zs/simpleblog.git


git clone [email protected]:2005zs/simpleblog.git//https不通的时候,用ssh来clone

2.安装依赖


npm ci


npm install gray-matter

OK,这就好了 :rofl:

3.新建博客

npm run new


npm run new后显示请输入博客标题,回车后使用键盘 :arrow_up: :arrow_down:进行选择

然后可以选择封面图片(上面博客列表看)
再选择优先级大于1则置顶

4.本地生成预览

npm run preview

如果要修改直接在博客文件修改后在浏览器刷新显示即可

5.推送github仓库

这里我没有在框架里面加那些东西,比较麻烦,就直接采用最原始的方法了

我懒

你可能会用到

git clone [email protected]:2005zs/simpleblog.git//https不通的时候,用ssh来clone
git remote remove origin  //移除现有的 HTTPS 远程仓库
git remote add origin [email protected]:name/repo.git  //添加 SSH 远程仓库
git push -u origin master  //推送代码到远程仓库
git remote -v  //查看远程仓库
git remote set-url origin [email protected]:name/repo.git  //设置远程仓库
git add .  //暂存所有更改
git commit -m "first commit"  //提交更改
git push -u origin master  //推送代码到远程仓库
git log  //查看提交历史

建议使用ssh克隆和推送,https的反正我是经常不行 :sweat_smile: :sweat_smile:

6.推送仓库后可选cf或github的pages部署

部署到github的pages

1.请将仓库命名为 username.github.io

2.请到ActionsPagesStatic HTML,然后config,然后会帮你生成static.yaml,然后点击Run workflow,然后会自动部署到github pages,成功后访问name.github.io即可

部署到cloudflare

cloudflare账户链接github

构建设置中输入构建命令


node scripts/bl.js build

保存部署即可

7.成果

地址

8.

PC,手机界面均已适配

问题

暂无分类别按钮,做了分页和按关键词和发布时间查询

16 个赞

可以的 白嫖就完事了

1 个赞

嗯,是够清爽 :tieba_095:

2 个赞

确实简约

1 个赞

感谢分享

1 个赞

博客好了,下一步该更新文章了

2 个赞

下一步就是吃灰了 :rofl:

2 个赞

感谢分享

tql大佬 :tieba_087:

半夜才冒头 :tieba_087:

刚刚在和对象打游戏聊天

建好下一步就是弄几篇文章就丢一旁吃灰

2 个赞

好了可以不用说了 :tieba_087:

:rofl: :rofl: :rofl:得说

1 个赞

主要就是拿来记录生活的,舍不得拿我本来那个花哨的博客来写 :tieba_087:

眼睛会了

1 个赞

太强了,1b!

1 个赞

感谢分享!

感觉有点像GitHub pages做的事情

是的,只是用cf部署挂着,yt上面一些hexo也是这样部署的