搭建数字花园

本教程适用对象：对网页部署、电脑软件远程安装、有一定动手能力的小白。

以下部署步骤参考obsidian 目前最完美的免费发布方案 - 渐进式教程 - 经验分享 - Obsidian 中文论坛，建议先看原作者的文章，因为作者用了3套方案，有能力的朋友可以详细对比，他最终使用了Quartz的方案，而我使用了Jekyll的方案（因为Quartz对部署要求更高），以下的部署也记录一些我自己的弯路。

总的来说：

通过基于jekyll开源的静态blog模板，通过git push自动触发netlify进行构建操作，将md文件转换成静态服务器可以识别的html文件。

最麻烦的是安装jekyll，这是一个静态的blog生成器，需要事先安装不少的依赖库。

一步步来说：

1. 设置先决条件

需要在您的计算机上安装一些依赖程序，按照每个网站上的说明进行安装。

• Ruby
• RubyGems
• Git

还需要在以下Github和Netlify上创建账户：

• GitHub（用于存储数字花园文件，也就是静态博客代码文件）
• Netlify（将您的数字花园网站服务放到网上，Netlify是免费托管的一个服务器，可以直接用Github的账户创建并链接到Netlify账户）

一切就绪后，让我们开始创建您自己的数字花园。

• 1. 安装jekyll。
     • 登录您的Github，创建一个仓库Repo，随意命名
     • fork这个jekyll开源模板：maximevaillancourt/digital-garden-jekyll-template: Start your own digital garden using this Jekyll template )
     • git clone自己fork的仓库地址到你电脑本地：git clone <YOUR_COPIED_URL_HERE> my-digital-garden
     • 进入刚才clone的仓库的目录，cd my-digital-garden
     • 执行依赖库安装命令bundle
     • bundle是ruby的包管理器。
     • 如果因为网络问题导致依赖库安装很慢，需要安装VPN，网上有教程。 - 执行本地调试命令bundle exec jekyll serve，接着浏览器打开http://localhost:4000看是否正常显示页面。 - 将obsidian库全部要发布的文件用linter插件加上YAML格式的frontmatter区，然后拷贝至_notes_目录。
     • linter插件支持一键对全库进行markdown格式美化，强烈推荐。
     • 执行前请先备份。
     • 有能力的朋友，可以直接将obsidian笔记库添加为git submodule。 - ctrl + c 停止bundle exec jekyll serve命令，并重新执行。接着浏览器打开http://localhost:4000/笔记名。例如我的obsidian笔记库里面有数字花园这条笔记，则访问http://localhost:4000/数字花园即可看到笔记。
• 1. netlify配置自动构建。
     • 按照这个教程手把手教你使用Netlify部署博客及部署自动化 - 知乎 95，界面一步步点，都按默认配置来，从而将上一步fork的自己仓库，通过netlify构建和发布。
     • 主流的免费的还有github pages和vercel服务，前者缺少CDN导致国内访问很慢，后者存在非html后缀的链接报404错误的问题。 - 完成上一步后，应该能得到一个https://master--zippy-dango-d43c8d.netlify.app/类似格式的网址，打开后正常显示原仓库的页面即可。
• 1. 将本地全部文件push至github。
     • 本地仓库的根目录执行git三件套：git add . git commit -m "first commit" git push
     • 有能力的朋友，可以将这个步骤，用效率工具，包装成一个定时执行或一键执行的命令。
     • 回到netlify页面，应该能看到它开始被push操作触发了构建动作，等几分钟后，打开得到的新网址，看是否已经包含了obsidian笔记库内容，链接为域名/笔记名。例如我的obsidian笔记库里面有数字花园这条笔记，则访问https://master–zippy-dango-d43c8d.netlify.app/数字花园即可看到笔记。

       也可以使用Github desktop桌面端软件推送文章更新，但Github desktop会把所有文章更新都标识出来，在推送update的时候需要识别一下。

• 1. 定制自己的首页、网站名和样式
     • 首页修改。修改_pages文件夹下的index.md即可，可直接参考dg/index.md at master · oldwinter/dg · GitHub 37
     • 网站名修改。修改根目录的_config.yaml第一行title字段即可。
     • 有能力的同学，自己根据jekyll官方文档，定制自己的界面和样式即可。
     • 完整重复步骤3，看更改是否生效。

       对网页语言不熟悉、不想折腾、想快速上线的朋友来说，建议除了网站标题外，其他配置不要随意改。如果想锻炼学习，那不妨逐步修改，我感觉跟wordpress等后台一站式配置的动态blog框架不同，这类静态的blog模板是把内容（博客文章）、界面配置（网页标题、字体大小、行距、页眉页脚）及功能（评论、SEO）从不同的容器内提取素材，然后渲染成目标对象网页。

• （可选）自定义自己的域名
  • 在netlify界面按提示一步步操作即可，需要有自己的域名且已经备案。
  • 购买域名及解析