利用obsidian构建个人博客

最近,基本实现了迁移个人笔记到obsidian上,同时将笔记也一并迁移过来了。在这也做一个笔记记录一下如何搭建自己的博客和数字花园。

这是我目前的博客效果展示。

利用obsidian构建个人博客.png

准备github库

如同之前使用hexo或者hugo搭建静态博客一样,需要有一个github库作为文件地址,至于这个库是否公开或私人,没有多大影响。因为后面的步骤,我们也会采用vercel类似的服务进行部署,省去在等地搭设环境。

但是本次github和之前有些不一样的要求,之前一般是按照hexo或者hugo项目的要求进行搭建。本次由于使用的是obsidian同步部署,所以得按照插件 Obsidian-Digital-Garden 的要求,使用 digitalgarden 这个库作为模板,创建自己的库。

利用obsidian构建个人博客-1.png

相比于hexo,hugo的好处是:创建完digtalgarden库完成后,基本不会再去动这个库的文件,后续大部分的修改都是在obsidian中实现的。额外增加obsidian功能的情况除外。

部署

点击reademe上的deploy按钮,即可对接到vercel服务上,进行自动部署,每天100次部署机会,足够使用了。

配置obsidian

安装Obsidian-Digital-Garden

在obsidian插件中心安装Obsidian-Digital-Garden插件。

利用obsidian构建个人博客-2.png

配置插件

repo name: github库名称,自己使用模板创建库时自定义的 github username: 个人的github昵称 github token: 在 https://github.com/settings/tokens 里可以创建。保密!保密!保密! base url: 个人的博客主页 note settings:建议全开 appearance: 一直自定义,包括主题等,其实就是一个CSS,有需要可以自己写或者覆盖 slugify note url: 中文博客必须关闭,负责部分链接会异常 path rewrite rules: 写这个笔记的时候这个功能刚出来。看了下文档,其实就是映射关系,相当于可以把A文件夹里的笔记发布到B目录下。对我来说目前用处不大。

利用obsidian构建个人博客-3.png

利用obsidian构建个人博客-4.png

利用obsidian构建个人博客-5.png

配置模板

为了使发布博客方便,所以有必要建立一个模板,用来自动生成font matter。以下是我个人自用的模板,一般我需要发布的笔记都是直接用该模板生成。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<%*
fileName = await tp.system.prompt("请输入笔记名", "新建笔记")
await tp.file.rename(fileName)
tp.file.cursor()

-%>
---
dg-publish: true
title: <% fileName %>
dg-created: <% tp.date.now("YYYY-MM-DDTHH:mm:ss.SSS+08:00") %>
tags: [""]

模板创建完成后,后续发布的笔记全部使用该模板生成,就可以自动发布了。

发布

笔记写完后,如果需要发布,可以点击左侧菜单的图标。则会自动显示已发布文档,有修改文档,以及未发布文档。可以一键发布。

利用obsidian构建个人博客-6.png

利用obsidian构建个人博客-7.png

当然有时候也只想发布一篇,可以直接ctrl + p 调出命令行,输入 digtial ,可以看到各种操作命令。

利用obsidian构建个人博客-8.png

效果展示

使用发布按钮发布后,访问博客主页即可看到。

自定义

digtial garden目前提供了许多的插件项,可以根据官方文档自定义设置。

字体美化

目前中文字体个人最喜欢的是霞骛文楷,所以博客也要用上。 在github库 /src/site/_includes/components/user/common/head 路径下,新建font.njk文件(文件名随意),内容如下:

1
<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css" />

在github库 /src/site/styles/user/ 路径下,新建font.scss文件(文件名随意),内容如下:

1
2
3
body {
--font-default: "LXGW WenKai Screen", sans-serif;
}

以上,即完成了字体美化工作。

增加评论系统

一个博客没有评论系统那就不完美了,所以自己也需要加上评论,我目前采用的是自建WALINE,比其他的评论系统都快,主要是可以自维护,免去审查。

在github库 /site/_includes/components/user/common/footer/ 路径下,新建comment.njk文件(文件名随意),内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<hr class="content">
<div class="content" id="waline"></div>
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css"/>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
init({
el: '#waline',
serverURL: 'https://comment.zytomorrow.top',
});
</script>

以上,即完成了评论系统的设置。

增加网站、文件访问统计

虽然没啥用,但是喜欢这个功能,所以还是加上了。

在github库 /src/site/_includes/components/user/common/footer/ 路径下,新建comment.njk文件(没错,和上面同一个文件,可以合并到一起),内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<hr class="content">
<div class="content" id="waline"></div>
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css"/>
    <script type="module">
        import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
        init({
            el: '#waline',
            serverURL: 'https://comment.zytomorrow.top',
            });
</script>
<hr>
<div class="content" align="center">
<div class="content">2017–2023 ZyTomorrow</div>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
</div>

在github库 /src/site/_includes/components/user/notes/header/ 路径下,新建busuanzi.njk文件(文件名随意),内容如下:

1
2
3
4
5
<hr>
    <div align="center">
        <span id="busuanzi_container_page_pv">本文总阅读量<span id="busuanzi_value_page_pv"></span></span>
    </div>
<hr>

以上,即可完成统计计数。

总的来收,根据个人需要可以完成各式各样的定制,并且难度都不高。可以参考文档.

加载评论