使用 Obsidian 免费建个人博客

原文链接,可以看看我的博客效果。

目前我的网站发布流程就是使用该篇文章技术,如果你使用的 Notion 写文章,可以看看这篇 Vercel + Notion 建个人博客

流程简介:

  1. 选择自己的静态网站生成工具,我选择 Hugo;
  2. 使用 Hugo 初始化好结构然后上传到 Github 仓库;
  3. Obsidian 写好文章,然后使用插件将指定的文章 (md 格式) 上传到第 2 步的仓库,插件的作用就是将 Obsidian 中的 markdown 内容适配成 Hugo 需要的内容;
  4. 部署仓库,配置域名。

相关工具

  1. Obsidian + Github Publisher 插件,必须
  2. Hugo + Paper Mod 主题,可选择其它
  3. Github,必须
  4. Vercel,可选择其它

具体步骤继续往下看。

Hugo + PaperMod

使用 hugo 初始化一个网站,并配置好你喜欢的主题,并发布到 Github 上,这块具体怎么弄就不展开介绍了。

可以参考:

Github Publisher

给 Obsidian 安装 Github Publisher 插件,该插件的作用是将 Obsidian 中的文章和本地附件上传到 Github 仓库,上传前可以指定文件目录、自定义内容替换等操作。

我会根据使用过程,讲一讲我用到的配置,如果你对其它配置感兴趣,可以看看 官网文档

Github config

注意:

  1. 生成的 token 不要放在 Github 的公共仓库,检测到 token 就会失效。
  2. 通过 here 生成 token 时的 链接 会自动带上权限,你只需要设置名字和过期时间即可。

Upload config

Fixed Folder,表示将所有的文章上传到 content/posts 目录下。

Property key,可以通过文章的属性设置上传的目录,例如我这配置:

  • 通过 dir 属性获取上传的目录,最终的上传路径为 content/{dir}
  • 如果 dir 属性没有设置则默认上传到 content/posts 目录下

这块配置影响上传文章后的内容结构。

注意:Markdown hard line break 最好关闭,我这边开启造成了空行变多,使代码难看、表格无法渲染。

下来稍微麻烦点展开说说,正则内容替换:

截图中有三个正则替换规则,每行后面都有个箭头,↑箭头表示插件应用之前替换,↓箭头表示插件应用之后替换。

正则内容:

  • 第一行:图片路径,/\]\(([^/]+?)\.(png|jpg|jpeg|webp|gif)/ -> ](/images/$1.$2 且 后面的箭头向下,作用是在图片名之前加上 /images 地址前缀,我图片在本地存储的,如果你有图床那这个就不需要配置。
  • 第二行:文章之前引用,/[^\(]+\.md/ -> {{< relref "$&" >*/}},将 obsidian 文章之间的引用转化为 hugo 中的格式,在 obsidian 文章之间引用是没有 md 后缀的,因此执行该替换的时间是等文章使用插件转化后再执行,据此后面的箭头向下。
  • 第三行:文章封面,/cover\.image/ -> cover:\n image, 将一级 key 转为二级,因为 obsidian 不支持多层级属性。

{{</* relref "例子.md" >}} 这个在 hugo 中表示获取"例子.md"文件的相对访问地址,例如:例子.md 文件的 frontmatter 的 slug 配置为 example-1,那生成的结果大概就是 /post/example-1,不配置 slug 那访问地址就是 /post/例子

Attachment & embed note config

会将图片中使用到的本地图片上传到 static/images 仓库目录下。

优化内容的相关插件

这些 Obsidian 插件对于发布网站不是必要的,但是对于优化内容格式还是很有必要的:

  • Obsidian Linter 插件,我只用了在英文两边加空格的设置。
  • Image Converter 转化图片格式,我统一转为 webp,并设置了图片分辨率大小。
  • Unique attachments 用于将附件的文件名统一为 "字母 + 数字"的格式,记着在配置里加入 webp 图片格式
  • Image Inserter 用于找图片,我用于设置文章封面,即设置 cover:
    image 属性。

我完整说说我在 obsidian 模板里配置的内容,用于发布文章时统一的设置。

我的配置是和 Hugo 强关联的,如果你用了其它工具,就根据自己的情况调整。

yaml 复制代码
---
date: "{{date}}" # 创建时间,我这边生成的格式是 YYYY-MM-DDTHH:mm:ssZ
tags: 
	- 标签1
	- 标签2
title: "{{title}}"
slug: "{{time}}" # 自定义 URL 中文章的访问名称,默认用时间戳填充模板格式为X
share: false  # 配合 Github Publisher插件用的,true表示 obsidian 的文章可以发布
canonicalURL: "" # 之前文章在其他地方被发布的地址,避免搜索引擎重复,设置了该属性会优先展示 canonicalURL 执行的文章
keywords:   # 用于 SEO 优化,也可以不配置该内容默认会使用 tags 的内容
	- 关键字1
	- 关键字2
description: "" # 文章的描述 SEO 优化,为空时默认会截取文章前面的内容
series: "系列" # 系列文章
lastmod:  # 文章最后更新的时间
lang: "cn" # 默认不用写,配置文件会设置默认 cn 中文,en 英文等等
cover.image: "" # 文章封面图片地址
author: # 作者名称
---

发布

Obsidian 命令

当然插件的配置也支持菜单模式,配置前往:Plugin settings -> Menu。

先使用命令行发布,输入 active,然后选择 Github Publisher 即可,记着文章的 share 属性要开启,即 true。

右下角会提示上传的进度,如果完成了右上角有提示:

如果你想上传多个 share 为 true 的文章,使用的命令为:

  • Refresh published and upload new notes 将所有 share 为 true 且新更新的文章发布
  • Refresh all published notes 将所有 share 为 true 的文章都发布

Vercel 部署

接下来访问 vercel 官网,然后将上面对应的仓库部署上去即可。

你也可以选择 Github Pages、Netlify 部署,甚至自己的服务器也行。

1. Github

使用 Github 登录。

2. 创建项目

3. Import & Deploy

导入 Github 上 fork 后的项目,import 后再点击 deploy,下来需要耐心等会。

4. 域名

下来输入自己的域名,然后 ADD,选择推荐的转发规则即可,按照给的提示信息去解析自己的域名。


总结

重点学会了 Github Publisher 插件如何将 Obsidian 中的文章格式适配成你最终想要的内容格式即可。

至于你选择 Hugo 静态网站生成器,还是 Hexo 都是可以的。

相关推荐
谢尔登2 分钟前
Webpack 和 Vite 的区别
前端·webpack·node.js
谢尔登3 分钟前
【Webpack】Tree Shaking
前端·webpack·node.js
过期的H2O219 分钟前
【H2O2|全栈】关于CSS(4)CSS基础(四)
前端·css
纳尼亚awsl32 分钟前
无限滚动组件封装(vue+vant)
前端·javascript·vue.js
八了个戒38 分钟前
【TypeScript入坑】TypeScript 的复杂类型「Interface 接口、class类、Enum枚举、Generics泛型、类型断言」
开发语言·前端·javascript·面试·typescript
西瓜本瓜@40 分钟前
React + React Image支持图像的各种转换,如圆形、模糊等效果吗?
前端·react.js·前端框架
黄毛火烧雪下41 分钟前
React 的 useEffect 钩子,执行一些异步操作来加载基本信息
前端·chrome·react.js
蓝莓味柯基1 小时前
React——点击事件函数调用问题
前端·javascript·react.js
资深前端之路1 小时前
react jsx
前端·react.js·前端框架
cc蒲公英1 小时前
vue2中使用vue-office库预览pdf /docx/excel文件
前端·vue.js