【数字花园】个人知识库网站搭建：②本地部署数字花园

[[数字花园]]的构建原理包括三个步骤：

1. 源代码生成：Markdown 笔记编写，通过dg插件发布出源代码
2. 源代码构建成网页代码：通过npm run build 实现 Markdown → HTML + CSS + JS
3. 网页代码部署：将 网页 (HTML + CSS + JS) 部署到服务器

五个部署方案

• [[netlify免费搭建数字花园]]：适用：数字花园需求较小，更新频率少，笔记量少
• [[本地部署数字花园]]：适用：有公网ip或局域网（校园网）内使用
• [[云服务器部署数字花园]]：适用：数字花园需求较小，更新批量高：笔记量少
• [[本地构建+云服务器部署数字花园]]：适用：数字花园需求较小，更新批量高：笔记量少
• [[本地构建+云服务器部署数字花园plus]]：适用：数字花园需求较大，更新批量高：笔记量大

数字花园网站的本地部署方案

为什么要本地部署：因为netlify的免费部署方案是有限制的，我不想这么快把限制用完
另外我可以把网站部署到学校的服务器里，这样校内的我或者同学都可以访问

进一步思考一下，自己弄云服务器，自己搭建的方案
现在阿里云的服务器，学生认证后，可以免费使用一年，可以用来部署自己的网站，所以我也许过段时间会将数字花园部署到阿里云
但是自己部署的话，买云服务器、买域名、备案，又有得折腾了
…a few moment later…
不过现在开始正式将数字花园部署到阿里云了

数字花园网站本地手动部署方案

1. 获取网站源码

有两种方法：

1. 通过 Obsidian 的 obsidian-publish 插件将笔记发布到本地（目前没有尝试这个方法）
2. 通过 GitHub 部署（推荐）：
   源码模板的获取：
   如果之前用netlify或者vercel部署过，github里面就已经有模板（记得断开netlify的自动部署连接哦）
   否则模板要去数字花园官方的github克隆到你的github：git clone https://github.com/oleeskild/digitalgarden
   通过 Obsidian 的 obsidian-publish 插件将笔记发布到GitHub，再将源码克隆到本地

git clone https://github.com/czc6666/digitalgarden.git

在笔记修改重新发布后，可以通过`git pull`命令更新本地源码
> 💡 我选择在 WSL 中克隆并操作，因此以下步骤基于 Linux 环境（Windows 操作方法会略有不同）## 2. 环境准备### 2.1 安装基础环境
```bash
# 更新包列表
sudo apt update# 安装 Node.js 和 npm
sudo apt install nodejs npm

2.2 安装 Node.js

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc# 安装并使用 LTS 版本的 Node.js
nvm install --lts
nvm use --lts

3. 项目部署

3.1 安装项目依赖

# 切换到源码目录
cd digitalgarden/# 清理旧的依赖
rm -rf node_modules package-lock.json# 安装新的依赖
npm install

[[npm install 卡住不动怎么办]]：npm install 卡住不动？这里有7个解决方法助你一臂之力_npm install没反应-CSDN博客

3.2 构建项目

npm run build

3.3 启动http服务器

# 安装 http-server
npm install -g http-server# 启动本地服务器
http-server dist

用这个命令：http-server dist，开启的http服务器会在命令行关闭后关闭，用下面3.4里说的pm2开服务器可以实现服务器的后台运行

4. 本地预览

在浏览器中访问 127.0.0.1 即可查看网站。

5. 在笔记更新后：更新本地源码

在笔记修改重新发布后，可以通过git pull命令更新本地源码

git pull

更新源码后需要重新构建项目和启动http服务器

npm run build
http-server dist