本博客是完全纯静态blog,js 代码500 多行,发布文章只需要git push 即可(不需要 build)
- Fork 地址: https://github.com/ahuigo/yourname.github.io
- 示例地址:https://ahuigo.github.io/?p=f~readme
- Markdown + Latex + TOC目录(Table of Content) + TOC滚动
- 多级动态目录: 适合海量笔记按目录归纳整理、总结
- 目录缓存(缓存时间1天)
- Disqus
- 自适应
- Twitter & 微博分享
- RSS支持(由pre-commit hooks 自动生成)
- 归档
- 首先Fork 此仓库: https://github.com/ahuigo/yourname.github.io
- 然后用的你的帐号重命名仓库:
{yourname}.github.io
, 这样就可直接访问:{yourname}.github.io
- 修改
index.html
中的config
变量
e.g.:
// index.html
const config = {
// your github's username
'user': '{yourname}',
// your github's repo name
'repo': '{yourname}.github.io',
// your disqus's username
'disqus_user': '{disqus_user}',
}
4.最后,进入到/post/
目录,编写你的markdown 文件(你可以建多层子目录)
├── img
└── post
└── index.md
├── go/
└── python/
编写完了后, 不需要构建,直接提交git push,就可查看你的文章了.
展示数学公式的库主要有 mathjax 和katex, 本博采用了非常轻量的katex。
$
用与行内公式;$$
用于段落公式;
可以参考这个例子:
<iframe width="100%" height="400px" src="md.html"></iframe>katex 支持标准的latex,如果想转义数学符号:
# \#
$ \$
% \%
& \&
~ \~
_ \_
^ \^
{ \{
} \}
> >
< <
\ \backslash
纯文本笔记有一个好处,搜索非常方便且可以用通配符、正则、脚本来搜索。还可以定制文件名、目录过滤等搜索规则。
大多数时候,我是通过 ag(the_silver_searcher, 比grep 快十倍) 结合正则、目录名(或文件名)来搜索的。如果是wordpress, 就无法灵活实现这一点。
# 搜索关键词
ag keyword
# 指定搜索目录 algorithm
ag keyword1 keyworkd2 .. algorithm
# 关键词必须为单词
ag -w word
# 只显示匹配的文件
ag -w word -l
它可以通过管道与其它shell工具、脚本结合使用。
也可以在vscode/vim 等编辑器中很方便的使用它. 可以配置成点击搜索结果/path/to/file/main.go:10
可直接在vscode/vim 打开文件。
我写笔记有很多年了,很多具体内容我虽然忘记了,但是凭借关键词+正则匹配,我可以非常容易的找到我的笔记。
我几乎所有的写作都是通过markdown + vscode 完成的。 配置好plugin, 就能拥有vim+vscode 的完美体验了。推荐以下的vscode plugin :
- Markdown PDF
- Markdown All in One: 支持预览(Mac 快捷键
Cmd+K Cmd+V
)、TOC(outline) - Paste Image
- 如果想写博文,直接在
/post/
这个目录下写markdown 文件就可以了, 真正专注于写作 - 如果想想写文章, 直接在
/post/
建立分类别的目录就可以了
截图用到了Paste Image 插件. 在Mac 的vsc 中按住Command+,
, 简单配置下
"pasteImage.basePath": "${projectRoot}/img",
"pasteImage.path": "${projectRoot}/img",
"pasteImage.prefix": "/img/", //如果是相对路径,则不加前缀`/`
然后就可以用Ctrl+Shift+Cmd+4
截图, 用Option+Cmd+V
贴图了。
如果想定义图片名,先输入类似
readme
的图片路径, 并选中,再按Option+Cmd+V
, 路径就自动替换为markdown 的图片路径![](/img/readme.png)
.
如果截图体积优点大, 可以使用Squoosh 等工具压缩, 或者上传到图床
默认使用github api获取目录,我测试发现这个api 不利于seo. 可以通过提前生成.dir.json(相当于site map) 更好的支持seo
mac/linux可以使用以下脚本自动生成 .dir.json (只有修改过的文件才会生成dir.json)
cp ./tool/gen-postdir.py .git/hooks/pre-commit
也可手动生成所有目录的.dir.json
$ ./tool/gen-postdir.py -a
generate .dir.json for all directory
有了.dir.json 就可以在index.html 开启use_cached_dir
, 这样就不会通过gihutb.com api 访问目录了
use_cached_dir: true,
执行RSS 生成脚本,会把新文章添加到 atom.xml
使用方法:
# Usage1:
./tool/pre-commit post/java/java-inject.md post/go/go-generic.md ...
# Usage2:
git add post/java/java-inject.md post/go/go-generic.md ...
./tool/pre-commit -a
如果想每次commit 时自动生成atom.xml 可以把这个脚本放到hooks
# 添加hooks
cp ./tool/pre-commit .git/hooks/
# 然后commit
$ git add post/c/shell-make.md post/c/shell-make2.md
$ git commit -am 'test'
generate rss: post/c/shell-make.md
generate rss: post/c/shell-make2.md
- Vue.js 框架
- pure.css: 非常轻量
- markdown 渲染
- Marked 修改版: 原生的marked 不能很好的支持数学公式. (由于marked 正考虑解耦一些代码,修改版PR的暂时没被接受)
- 数学公式采用katex. 用
$$
,$
做分割符号 - 自动生成 Markdown TOC
- highlight: 用于代码高亮
- disqus: 用于评论,懒加载