hexo-notes

hexo 博客搭建笔记

博客源码 branch:dev

安装过程

brew install node
//换源
npm config set registry https://registry.npm.taobao.org
//install hexo
npm install -g hexo
//init
cd blog
npm install
hexo clean
hexo g
hexo s
hexo d -g

本博客编译问题

1. 确保更新到最新的 node 和 hexo

2. push 上去的 themes 中的 next 文件夹是空的这个暂时没想好怎么解决
   直接删除 next 的.git 文件即可 如果不行可以用git rm --cached themes/next清除缓存试试

3. 部署后 css 不加载

• 1. 在_config.yml 中修改 url 为新的 url
• 2. 删除.deploy_git
• 3. hexo d -g

写 blog 时的图片处理

截图

Mac 的话截图推荐用 Xnip 可以打标注很方便

图片压缩

当然你可以使用 tinypng来压缩你的图片文件
我用的是 命令行版本 https://www.npmjs.com/package/tinypng-cli

1. 安装

npm install -g tinypng-cli

你需要在官网申请一个 api key 然后在自己的 home 路径下新建一个.tinypng 文件吧自己的 key 放进去

2. 使用

• 压缩当前目录下所有图片：tinypng .
  递归压缩子目录：tinypng -r
• 压缩当前目录下所有图片：tinypng .
• 递归压缩子目录：tinypng -r
• 压缩单个目录：tinypng assets/img
• 压缩多个目录：tinypng assets/img1 assets/img2
• 压缩单张图片：tinypng assets/img/demo.png
• 压缩多张图片：tinypng assets/img/demo1.png assets/img/demo2.png
• 单独指定 API key：tinypng demo.png -k E99a18c4f8cb3EL5f2l08u368_922e03

图床工具

可以在一篇博客编辑完了把所有的图片全选重命名,这样可以方便自己在云端后台管理

现在使用的是 PicGo

vscode 上有对应的插件 因为我这里用的是阿里 OSS 如果要使用这个插件的话需要再 OSS 后台设置 图片处理->访问设置->原图保护(关闭) 当然对应的防盗链也是可以直接开启的不影响

vscode 上快捷键为cmd+opt+u 可以直接复制文件之后直接按快捷键复制到 vscode 中,免去了复杂的上传操作

还有需要注意的是 图片的名字不能有空格 不然链接名字会不准确

我的 blog 的编辑流如下
写blog->截图修改名字(例:hexo-notes-1.jpg)->图片压缩网压缩->vs-picgo->实时markdown预览(shift+opt+m)