如何沉浸式写好博客，重点是沉浸式，传统的写作方式常常会因为关注格式等打断思路，不胜其烦。
另外想要文章的样式和内容分离，将来我的文章样式想要换风格能很快切换。
这篇文章用来介绍什么是静态博客，Markdown以及常用的一些语法。最后介绍目前非常热门的Hexo
1、什么是静态博客
随着年龄的增长，发现比较适合自己的学习方式是输出，输出的方式有很多，当下最火的数短视频无疑了。或许是天性使然，还是希望通过文字的方式慢慢记录，于是就有了写博客的想法。
自己的输出还要写博客呢？
这里涉及一个很简单的原因，分享算是人的天性，更重要的是希望借此和更多人建立连接，澄清自己的见解。
为什么用写博客的方式呢
写文字的地方很多，最早有天涯论坛，现在已经消亡了，后来有新浪博客，博客园之类，其他的还有很多类似的平台，好处是用户很多，人很多，大家可以互相探索。但是，于我而言都有些显得喧闹，所以我想能有自己的一亩三分地。
什么是静态博客
静态HTML
最早的网页是静态的html文件，浏览器负责把它展示出来，这个过程中对服务器的消耗几乎忽略不计，但是也带来问题，它的灵活性没有了。每一个html文件就像是一个word文件。如果要修改样式，需要每个文件都去修改一遍。不胜其烦。
动态HTML
后来才有了动态页面的说法，把html里面变化的部分，在交给浏览器之前，根据条件动态计算出来，在浏览器看起来它还是一个html，但是已经是模板化了。在今天已经成为非常自然的事了。
变化就是让大量交互成为可能，比如说电商上有10w个商品，不可能做10w的html文件。
传统博客
传统的博客基于数据库系统，外面套一层壳。所以每次打开博客的时候需要去数据库里面找一些东西出来，然后展示给我们，同时它还需要展示相关推荐，和最重要的内容——广告。所以也就减慢了加载速度。
静态博客
它的意思，就回到我们最上面说的静态HTML阶段。但是这个过程又不全是传统的样子。它的逻辑是介于静态和动态之间。传统的动态是用户请求的时候，根据需要动态生成符合他的HTML。静态博客的做法是，我们写好了博客，它就转化成html放那里。
而写静态博客的语言就是Markdown。
最初接触静态博客概念的时候，觉得咋还走历史倒车呢。于是就没深入。另外当时折腾起来也觉得麻烦，就没去弄了
静态博客没有一个管理后台，没有传统印象中用户管理，权限管理，一个编辑器等等，一开始有点不适应
2、Markdown是什么
它有一个官方网站，https://www.markdownguide.org/getting-started/，里面说得比较清楚。
它是一种标记语言，用于向纯文本文档添加格式元素。
从这里我们大概可以知道，它是为了让我们在写文字内容的时候，通过简单的方式处理格式，而不用鼠标点来点去。这也是沉浸的意义。
简单来说，我们就是通过添加非常简单的一些符号，让这个文本具有格式（这句话容易有误解，真正看起来有格式是另外需要转化工具的）。
比如标题就是前面加 ‘#’。加粗就是 两头加 “*”等等，这样的话，这个过程就变得非常简单易用了。
一般来说，它的文件名后缀是 .md。本质上它是一个开放格式，大家都能打开它，用记事本能打开修改，不需要word这样的专门的工具来弄。
其实说到这里我们大概能体会到，实际上word里面的90%的功能，大部分人是用不到的，日常的工作中，我们基本上只需要很少的一部分格式就够用了。
下面我会列出来最近我用到的一些功能。
3、常用Markdown语法
基本语法，https://www.markdownguide.org/basic-syntax/
每个符号后面都加空格是个好习惯
3.1、基本格式
标题
一级二级三级。区别就是前面加几个#
加粗斜体
加粗我用比较多的是两头4个星号。
| Markdown | HTML | Rendered Output |
|---|---|---|
I just love **bold text**. |
I just love <strong>bold text</strong>. |
I just love bold text. |
I just love __bold text__. |
I just love <strong>bold text</strong>. |
I just love bold text. |
Love**is**bold |
Love<strong>is</strong>bold |
Loveisbold |
斜体是两头俩星号
| Markdown | HTML | Rendered Output |
|---|---|---|
Italicized text is the *cat's meow*. |
Italicized text is the <em>cat's meow</em>. |
Italicized text is the cat’s meow. |
Italicized text is the _cat's meow_. |
Italicized text is the <em>cat's meow</em>. |
Italicized text is the cat’s meow. |
A*cat*meow |
A<em>cat</em>meow |
Acatmeow |
又加粗又斜体
| Markdown | HTML | Rendered Output |
|---|---|---|
This text is ***really important***. |
This text is <em><strong>really important</strong></em>. |
This text is really important. |
This text is ___really important___. |
This text is <em><strong>really important</strong></em>. |
This text is really important. |
This text is __*really important*__. |
This text is <em><strong>really important</strong></em>. |
This text is really important. |
This text is **_really important_**. |
This text is <em><strong>really important</strong></em>. |
This text is really important. |
This is really***very***important text. |
This is really<em><strong>very</strong></em>important text. |
This is reallyveryimportant text. |
段落引用
段落我的用途主要是来放补充说明的，具体用法就是段落前面加>
它还可以嵌套，就是用2个>，也就是 >>
列表
文章内容很长的情况下，我一般都会用列表来结构化，看起来更清晰
我很少用有序列表，原因是很多时候想不起来用来，再就是好像多了也麻烦，比如10来个，就有点看不清。
基本上，我只用 无序列表里面的
*。
链接
就是前面用[]，后面用()。后面是链接的地址，前面是文字，文字可以是空的，就会用链接代替
图片
前面用 !，然后中括号里面的内容是图片下面的文字，后面是图片地址，如果地址后面有空格文字，那个文字就是鼠标移上去的提示信息
我基本上没咋用后面的提示信息
表格
表格是必须的，但是它的基本语法里面没有，是作为扩展的
表格基本的语法比较简单，从下面可以看出来，用短横来分隔
稍微复杂一点就是列对齐了，如下
我们可以看出来，想用markdown实现很复杂的表格效果，没啥必要也做不到。不过我早期接触markdown的时候，诟病的也是这点，总觉得它不够强大。还是因为我自己没想明白用它来干啥。或者说它想来干啥，从2004到现在过去20来年了，一直保持着简洁，并不容易。
基本信息我目前只用到这些，如果有兴趣继续研究可以去看官网的说明。
3.2、思维导图
这个东西是扩展来的，并不是markdown原始的语法，这个扩展指的是hexo扩展，【hexo-markmap】
用到思维导图的原因是前面学习的时候，有很多内容只是通过列表来做，结构不太清晰，所以想着能不能弄思维导图，然后就找了一个插件。
它的语法是 markmap开始 到 endmarkmap结束，中间的内容用列表来书写，思维导图的格式从左到右
更多信息可以去官网了解https://github.com/MaxChang3/hexo-markmap/blob/main/README.md
3.3、提示信息
同样是扩展来的，【hexo-admonition-better】
基本语法就是 那一行用3个感叹号开头，然后空格，后面用类型和标题文字，类型是必须的，标题文字可以空
我基本上只用note和warning
注意事项
- 默认typora里面回车的时候，是回车换行，所以最好在源码模式下编辑
- 否则容易出现出现!!! 和内容中间多空行，造成无法包裹内容
- 前面一定要4个空格，很容易出现它是tab的情况，也从源码模式里面检查
它还有一个类似的插件，hexo-admonition，它的问题是，需要自己去把样式放在my.css里面，另外它也好几年没更新了
更多信息可以去官网了解。https://github.com/rqh656418510/hexo-admonition-better
关于note，模板里面其实已经有了，不用另外折腾，回头再研究吧
https://blog.17lai.site/posts/cf0f47fd/#tag-note
3.4、数学符号
也是扩展来的【hexo-math】
这个用得不多，主要就用了一个不等于，一直找不到合适的，就用了它。用法比较简单，但是它需要在文件头启用mathjax: true
老实说呢，这玩意用起来可不简单。
用的语法是mathjax，官网在https://www.mathjax.org/
更多信息可以去官网了解。https://github.com/hexojs/hexo-math
4、工具介绍—Typora
Typora知道的时候也很久了，但是没咋用，这次为了写博客阴差阳错用上了，下载地址https://typora.io/
默认情况下它不在源码模式，就是我们写一个东西，它自动就变成最终展示的结果了，传统很多markdown工具会分左右两列，一边是markdown源码，一边是最后的展示效果。
4.1、常用快捷
标题(Ctrl+数字)
列表升降级(ctrl+[])
插入表格(ctrl+T)
表格现在摸索出来的东西不多，就是如果列多了少了，点表格右上角的图标就行了
切换源码模式(ctrl+/)
4.2、常用配置
图片配置
为了将截图放到当前文件名下的文件夹中
另外有一个不算配置的技巧，我们从网页上复制图片的时候，粘贴过来，可以把图片复制到本地，避免链接的原始图片失效的情况。
导出pdf文件-pandoc
这个pandoc要去安装一下，https://pandoc.org/installing.html
5、Hexo是什么
第一部分讲的静态博客还不算特别准确，更准确的叫法应该是静态站点生成引擎。
它的作用是把markdown文件通过一定规则转化成html文件。最大程度上提升访问效率。对于个人站点来说，并不会出现大量文件的情况。
wiki上有一个介绍https://en.wikipedia.org/wiki/Static_site_generator
它对我最大的触动是这个玩意居然出来这么久了，而且实际上是有很大用途的，因为其实电商平台上，为了提高访问效率，减少数据库压力，都会采用静态化的技术，只不过会比简单使用一个Hexo之类的引擎复杂很多。
Gitbook、Nuxt.js、Jekyll、Hugo、Hexo、docsify 等静态站点生产引擎。都有一个模版目录，包含原始文本格式的文档，通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站。
5.1、官方网站
安装教程比较多，不赘述。
5.2、它只是本地
只是说一点，本地安装好以后，它只是本地，就是说在我们电脑上有了这么一个服务器，可以通过浏览器访问它。
在刚开始安装的时候，方便去调试它的样式等等。
hexo server5.3、放到服务器上
markdown的好处是，它是文本文件，非常适合用版本管理软件去管理。免费的版本管理服务很多，github，gitee，bitbucket都可以。这里我选择了用bithucket，原因是注册vercel的时候用github一直没成功，这部分就是标准的git操作了。以后就有机会再完善。
5.4、发布网站
放在git服务器上，还是markdown文件，还不是静态网站的内容。这个时候就需要去弄个静态服务器。目前来说vercel还比较适合。
注册的时候可以用github账号，也可以用Bitbucket。
登录以后可以选择从代码仓库里面导入代码的方式。
默认情况下它会给我们一个域名，比较长，我们可以用自己的域名来
这里的域名是放在cloudflare上的，用一个cname指向系统自动产生的那个域名就可以了。
6、我用的模板和常用Hexo插件
6.1、hexo-theme-matery
这是我现在用的目标，非常适合我的审美，折腾起来也比较简单。它用到了一些插件都放到最后面去了。
参考文档https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
基本上就是照着它的文档，建立几个文件夹，放几个文件，如categires， tags，about，contact，friends，404等
6.2、config配置
_config.yaml文件有2个地方，一个是项目根目录下的，另外是一个是theme里面，主题下面的，比如我用的hexo-theme-matery它下面也有一个文件
优先级上来看应该是主题里面的先，然后才是外面的这个。相同的节点下，它只会用主题下面的内容，什么意思呢。
比如说有一个配置
gitalk:
enable: false
owner:
repo:
oauth:
clientId:
clientSecret:
admin:如果这里的gitalk节点，2个文件里面同时有，系统只会用一个
我的策略是尽量用根目录的配置，主题下面的只放和主题相关的，不过现在懒得折腾，估计也不会为主题去花时间了。写内容才是根本吧。
配置信息基本上是照着hexo-theme-matery的文档来的。
如果对单篇文章做基础验证，可以启用verifrypassword，然后文章头加上password
这里我理解是某个js里面阻断了继续加载页面，所以这个时候页面内容无法从网络请求中拿到
6.3、package说明
package.json里面放的是当前项目用到的插件，vercel会用到这个文件，知道给我们弄啥插件去适配。
6.4、常用hexo插件
npm install --save hexo-admonition-better
npm install --save hexo-filter-github-emojis
npm install --save hexo-generator-archive
npm install --save hexo-generator-category
npm install --save hexo-generator-index
npm install --save hexo-generator-search
npm install --save hexo-generator-tag
npm install --save hexo-image-link
npm install --save hexo-link-card
npm install --save hexo-markmap
npm install --save hexo-math
npm install --save hexo-permalink-pinyin
npm install --save hexo-renderer-ejs
npm install --save hexo-renderer-marked
npm install --save hexo-renderer-stylus
npm install --save hexo-server
npm install --save hexo-wordcount这里的插件，基本上是为了满足模板和自己现在常用的功能的
