个人博客搭建 —— 1.笔记系统

大学时期，那个时候还是可以通过修改hosts文件来访问Google的年代。当时的hosts总是存放在一个叫Github的网站。我注册了一个账号，在懵懵懂懂中慢慢接触到了Repository,Git,Markdown,pages,Jeklly等概念，自己也走入了程序员开发的不归路。我是做机器人/自动驾驶的，对于前端，web开发也是在了解了可以通过Github Pages部署自己的网站的时候才简单接触了一些，但也仅仅是知道有html, js, css这些语言，并没有过多深入。但是由Github网站注册开始而被激起的，一个程序员对能在全世界访问自己构建的网站的渴望并没有丝毫减退，我也始终在利用各种各样的工具倒腾着自己的小页面，在此期间逐渐形成自己对于笔记和博客的一套方法论，这一系列博客文章里面我会记录下自己在构建自己博客的过程中的一些实践，把期间遇到的问题，自己的想法分享出来。

这一系列整体会分三个大部分：

• 笔记系统
• Django部署及踩坑记录
• SEO优化

技术在进步，新的工具，语言，平台也在不断涌现，我的个人博客当前也只是一个雏形，也一直在慢慢迭代，更新和完善。

博客小站：yeekal

笔记系统： 从富文本到纯文本

笔记和博客在我这是不分家的，他们本质都是一个个文档，只是笔记记录的更加碎片散漫，而博客更加系统。这里的“笔记系统”囊括了我对于知识整理和记录的一套方法，而博客只是其中的一个目录，所以这里我会先谈谈笔记系统。

我是属于接触电脑比较晚的人。在Office 3件套之外，微软还有一款使用很广的软件——OneNote. OneNote 是我第一个有意识用来做笔记的工具，相比于Word，它以编辑块的方式排放内容，编辑块可以随意挪动，画板可以无限大，所以排版更加自由。但是当时OneNote的云端同步很糟糕，经常要加载很久，不知道现在如何了。另外我不会画画，也没有触摸屏和电子笔，所以过分随意的编辑块经常显得乱糟糟的。接下来寻找到另一款多端同步飞快的笔记软件——印象笔记。还记得当时做一个暑期任务需要用到Android开发，所以用印象笔架记录了整个从JAVA到Android的学习过程。对印象笔记的印象已经逐渐模糊了——我已经很多年不用了，好像没有什么缺点，各方面都很可以。

记得在2014年，知乎有人推荐处于Beta版本的Typora。当时的宣传标语是“所见即所得”，当然我并不知道是什么意思。我不知道，所以就很想看看到底是个什么东西。于是，下载-安装-打开。界面美观简洁，编辑使用Markdown语法，预览即时显示，这就是所谓的“所见即所得”。这个时候我还不知道Markdown是什么，只是觉得这个编辑器很漂亮，Markdown语法对于标题，列表，表格等的处理要比Word这些方便太多，于是Typora成功吸引了我，并在我电脑里留了下来，偶尔会被打开来记录一些东西，并欣赏以下它的颜值。

这个时候还没有“笔记系统”的概念，只是随便记记，好记性不如烂笔头。各种工具也都在尝试使用，只是有时候会以某个为主。当时的Sublime文本编辑器个性化配置插件的方式还很火，Atom刚被Github发布出来大有取代Sublime之势，而VSCode还在娘胎里酝酿。但是这些文本编辑器的使用以及Github上README文档的编写，让我重新审视了纯文本的概念，以及系统学习了Markdown语法(不要被语法这个词吓倒，其实很简单，只需10分钟)。

所谓纯文本是相对富文本而言的，我们最熟悉的就是Word编辑器。Word里面的文本是文字和格式的统一体，不仅仅是“字符”，每个字符都包含了一系列的格式，比如大小，字体，颜色，对齐等等。而纯文本就是只有文字，没有格式，没有样式，只有文字。而它的格式由文本本身去定义。

比如这一行文本：

**黑体**

会产生如下的效果：

黑体

以上的例子里面**黑体**这五个字符就定义了这一行文本的内容以及格式。而Word里面要实现这个效果，需要选中这一行文本，然后点击加粗按钮。

富文本这样的编辑方式方便用户创建带有非常复杂格式的文本内容，比如海报，但是对于存储，编辑，备份等等就很不方便。因为富文本带了太多的格式信息。而纯文本就是只有文字。一个显而易见的例子是，一个有同样长度字符的Word文档要比同等格式的Markdown文件大得多。由于文字带上了格式信息，Word文档很难进行版本控制，每一个字符或者格式的变化都意味着一份新的文档；而纯文本前后版本可以只改动修改的字符。大多数情况下Word文档的打开速度都会比纯文本慢得多，因为需要花费时间进行格式渲染。纯文本的格式可以不渲染，就像txt一样打开，也可以通过编辑器进行渲染，但通常都是非常快的。纯文本的优点就是简单，轻量，易读，易写，易存储。以Markdown为例，虽然格式有限，但是对于一般的文字编辑，插入图片，链接，表格，代码块等等都是足够的。

还有更重要的一点，纯文本是平台无关的，也可以说是渲染无关。事实上纯文本就是最最单纯的文本，纯文本的概念远比Markdown要大得多，。可以认为无论是Markdown，还是cpp文件，py文件，html文件，这些都是只记录了文本，而最后的呈现出来的样子是由渲染器来定义。比如html文件通过记事本打开就是单纯的符号，而通过浏览器打开就是可以预览的网页。Markdown也一样，Markdown文件通过记事本打开也是单纯的符号，而通过typora就可能是一篇有标题，图片，段落的博客。不仅仅是typora，所有支持Markdown的编辑器，都可以打开并预览Markdown文件。因此对于Markdown文件，我不用像word一样必须要安装office，我只需要安装自己喜欢的某个编辑器就可以了。如果这个编辑器不再维护了，我可以换一个，而我的文件不会受到影响。

继续谈渲染无关。Markdown事实上只是一个协议，比如上述**黑体**两边加两个*号会被渲染为黑体。所以不同的编辑器可能对于Markdown支持的协议并不一样，或者你可以通过编辑器对Markdown协议进行扩充。比如我们阅读论文过程中经常需要记录公式。众所周知，在Word里面写公式是非常难受的。但是在支持latex公式的Markdown编辑器里，比如VSCode，我们可以这么写：

% 对应文本
$$f(x) = \int^n_{i=0} x^2$$

$$f(x) = \int^n_{i=0} x^2$$

这样就可以在Markdown通过符号去写公式了。而公式最后的呈现交给编辑器去渲染。

上文提到的latex也是一种纯文本协议，要复杂和笨重得多，Markdown就是在latex基础上简化而来的。latex可以用来写PPT，排版论文，甚至可以用来绘图——用文本定义图像。这里就不展开了。我的硕士论文就是通过latex完成的，最大的感受就是，使用latex就再也不需要在Word里面反复调目录，图片，引用这些东西了。

纯文本编辑逐渐加深了跟以Word为代表的富文本编辑之间的割裂感。Markdown真的是太好用了！！！就是那种相见恨晚，一见钟情，“就要它”的感觉。于是我所有的笔记全部向Markdown转移，同时定义了一些记录规则让自己的笔记更加系统条理化。

Markdown笔记结构

• 子文件夹区分类目
• 每篇笔记文档头部增加元信息
• 图片使用github图床，利用jsdelivr加速

首先就是分类目。我只分了一级类目，每一个类目就是一个文件夹，每个子文件夹里面有若干篇笔记。当前的目录结构如下所示，跟我的博客主页链接是对应的：

├── agi
├── algorithm_interview
├── app
├── arduino
├── autopilot
├── blog
├── c++
├── computerVision
├── linux
├── literature
├── machineLearning
├── math
├── motionPlanning
├── navigation
├── nlp
├── ompl
├── opencv
├── optimization
├── paper
├── posts
├── python
├── recsys
├── reinforcement_learning
├── robotics
├── ros
├── tool
└── web

每篇笔记文档头部增加了一些元信息，比如标题，分类，标签，日期等等（这里参考了Jeklly）。这些元信息可以用于笔记回溯，对文本搜索和分类。在后期构建博客网站的时候，通过解析这些元信息，可以很方便对文档进行归类以及页面展示。

>---
>title: longitudinal speed planning
>categories: autopilot
>tags: planning
>date: 2021-09-08
>---

我的网站里面对应的python解析代码：

info={}

# find the meta info
m=re.match(r'---(.*?)---',md_text,re.S)
if not m:
    return info

desc=m.group(1)
for key in info.keys():
    m=re.search(r'{}:(.*?)\n'.format(key),desc)
    if not m:
        continue
    info[key]=m.group(1).strip()

笔记里面图片使用的是github图床，利用jsdelivr加速. 这样保证笔记存储不会很大，同时图片也可以随时访问。一般需要用到图片我都是通过PicGo上传到github，然后把链接贴到笔记里面，这样插入一个图片就完成了。一般不用担心排版的问题。图片访问速度不是特别快，但是也能接受。

Markdown的语法很简单，表格，代码块，图片，链接等等Markdown都能轻松应对。此外，在使用Markdown记录笔记或者写作的时候，还可以通过一些小技巧让文本更加丰富：

• 使用emoji。emoji是一种表情符号，可以用来表达情感，也可以用来装饰文本。在Markdown里面可以直接使用emoji的代码，比如:smile:，这样就可以显示一个笑脸😄。或者直接贴😄就可以了。
• 使用html标签添加更丰富的样式但是这种方式不同的编辑器可能会有不同的支持效果。另外这种代码可能会改变文本内其它内容的样式。

<h3 align="center">烂笔头<br/><span style="font-size: 50%;color:#007f16">学习笔记 | 好记性不如烂笔头</span></h3>

烂笔头
学习笔记 | 好记性不如烂笔头

• 使用unicode字符来表达图形元素，比如

简单的符号：
↖ ↑ ↗
← · →
↙ ↓ ↘
☑   ✓   ✔   ✅   √  ❎    💯 ❌  ⚫


进度条：
[████████████████████████████............] 70%`
#####⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂
■■■□□□□□□□ 30%
▓▓▓▓▓▓░░░░  60%

一只小猪：
<`--'\>______
/. .  `'     \
(`')  ,        @
`-._,        /
   )-)_/--( >
  ````  ````

结语

当前流行的笔记工具有很多，比如Obsidan.它们可能有很复杂的功能,大部分也都是支持Markdown的。但是我觉得选择不依赖任何强绑定的第三方工具，Markdown文件让记笔记这件事变得简单，纯粹，只关注记笔记本身. 工具是要用的，比如我就使用VSCode来写代码，记笔记，但是这并不是必须的。笔记不应被某一个软件所限制，个人应该对笔记文本有最全的掌控能力，而工具只是让这个过程变得简单，而不是变得复杂。

Markdown是使用非常广泛的语言。有很多轻量级静态博客构建工具就是基于Markdown的， 比如Jekyll,Hexo, git books等。最近Vue.js 团队发布的VitePress 1.0也是通过使用Markdown来构建静态博客。但是我不喜欢Markdown笔记本身跟博客代码杂揉在一起，所以我会在下一篇文章中分享使用Django构建自己的博客网站的思路，同时实现文本和代码分离，并做到实时更新的。