织梦网络公司网站源码,网站备案怎么转入,阿里云php网站建设教程,wordpress 转移文章目录 写在最最前面数字花园的定义第一章#xff1a;netlify免费搭建数字花园相关教程使用的平台步骤信息管理 第二章#xff1a;本地部署数字花园数字花园网站本地手动部署方案1. 获取网站源码2.2 安装 Node.js 3. 项目部署3.1 安装项目依赖3.2 构建项目3.3 启动http服务器 4… 目录 写在最最前面数字花园的定义第一章netlify免费搭建数字花园相关教程使用的平台步骤信息管理 第二章本地部署数字花园数字花园网站本地手动部署方案1. 获取网站源码2.2 安装 Node.js 3. 项目部署3.1 安装项目依赖3.2 构建项目3.3 启动http服务器 4. 本地预览5. 在笔记更新后更新本地源码 程序自动化实现 第三章云服务器部署数字花园1 云服务器获取2 云服务器配置3 数字花园部署数字花园网站本地手动部署方案1. 获取网站源码2.2 安装 Node.js 3. 项目部署3.1 安装项目依赖3.2 构建项目3.3 启动http服务器 4. 本地预览5. 在笔记更新后更新本地源码 程序自动化实现3.4 设置本地反向代理Nginx、pm23.4.1 安装必要软件启动网站服务配置 Nginx 4 知识库更新后的数字花园更新流程5 域名申请6 配置DNS解析 第四章为什么又多一个部署方案现在的部署流程build和一键部署脚本服务器端执行 第五章写在前面数字花园的定义[[数字花园]]网站的构建原理包括三个步骤[[我的数字花园搭建笔记]] 现在的部署流程一、本地操作详细教程-2.前置步骤前面的文章都提过-1.创建github中转库0. 本地环境配置基础环境git、curlNode.js旧版本Node.js卸载Node.js 18.x安装验证是否安装成功 npm换源git配置 1.数字花园源代码构建源代码模板获取网页源代码构建build 2.源码上传中转仓库github中转仓库的初始化如果是后续更新代码 3.复制构建文件4.提交构建好的代码到中转库 二、服务器端详细教程1.环境2.git获取代码3.部署 自动化部署脚本本地自动化脚本服务器端自动化脚本 附加全自动化脚本bat脚本启动wsl中的部署sh脚本本地wsl中的本地部署脚本 参考文章 写在最最前面
本篇文章将我自己搭建个人网站数字花园的经历笔记整合成一片长文发出来
现在我的数字花园网站czchx.cc
我一共经历了一共5个阶段
①[[netlify免费搭建数字花园]]适用数字花园需求较小更新频率少笔记量少②[[本地部署数字花园]]适用有公网ip或局域网校园网内使用③[[云服务器部署数字花园]]适用数字花园需求较小更新批量高笔记量少④[[本地构建云服务器部署数字花园]]适用数字花园需求较小更新批量高笔记量少失效无视这条⑤[[本地构建云服务器部署数字花园plus]]适用数字花园需求较大更新批量高笔记量大
最终效果
数字花园的定义
数字花园是通过借助网络数字工具对想法、笔记和思考等一切你感兴趣的信息或进行收集、整理和创作文字之间用标签或链接创建连接形成一座独具个人浓厚色彩的信息与知识型花园。
这个花园是开放的不可避免地至少要经常打理。
数字花园介于笔记本和博客之间的交叉空间具有半公开性质。
不像笔记内容的纯私人性一样数字花园鼓励用户发布自己的想法、草稿这在很大程度上降低了我们的发布压力。
同时数字花园不像博客那样完全公开以建立个人品牌作为内容发布的主要目的。
第一章netlify免费搭建数字花园
这里记录的自己搭建数字花园在线个人知识库的经历首先尝试的是网上普遍使用的方法也就是本篇文章介绍的。 后面会继续进一步研究深入搭建本地构建(Build)和部署(Deploy)、云服务器构建(Build)和部署(Deploy)、本地构建(Build)和云服务器部署(Deploy)
相关教程
主要参考这个教程 https://zhuanlan.zhihu.com/p/677556713 vercel不支持中文文件夹和文件名目前没找到原因用Netlift平替
搭建思路参考 AboutTheGarden — oldwinterの数字花园
使用的平台
obsidian: Obsidian - Sharpen your thinking digital garden: Digital Garden - Publish Obsidian Notes For Free github: GitHub · Build and ship software on a single, collaborative platform · GitHub netlify一定程度的免费: Scale Ship Faster with a Composable Web Architecture | Netlify
步骤
digital garden官网点一键部署链接(快速搭建方案)Hosting alternatives然后绑定自己的github创建好后在obsidian安装digital garden插件配置连接github仓库在笔记页面开头添加好属性true后点击obsidian左边的树苗图表发布笔记到github的部署源码里每次发布后netilify都会自动重新部署数字花园网站
信息管理
Netlify数字花园部署网站管理页面Site overview | czc-dg | Netlify 我的数字花园网站链接主页
第二章本地部署数字花园
数字花园网站的本地部署方案
为什么要本地部署因为netlify的免费部署方案是有限制的我不想这么快把限制用完 另外我可以把网站部署到学校的服务器里这样校内的我或者同学都可以访问
进一步思考一下自己弄云服务器自己搭建的方案 现在阿里云的服务器学生认证后可以免费使用一年可以用来部署自己的网站所以我也许过段时间会将数字花园部署到阿里云 但是自己部署的话买云服务器、买域名、备案又有得折腾了 …a few moment later… 不过现在开始正式将数字花园部署到阿里云了
数字花园网站本地手动部署方案
1. 获取网站源码
有两种方法
通过 Obsidian 的 obsidian-publish 插件将笔记发布到本地目前没有尝试这个方法通过 GitHub 部署推荐 源码模板的获取 如果之前用netlify或者vercel部署过github里面就已经有模板记得断开netlify的自动部署连接哦 否则模板要去数字花园官方的github克隆到你的githubgit 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 npm2.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 --lts3. 项目部署
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 build3.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程序自动化实现
原理连接ssh服务器执行命令自动化部署
功能 运行后询问输入ssh连接的ip如直接回车默认ip是127.0.0.1 询问输入端口号直接回车默认22 询问我输入用户名如直接回车默认用户名是czc 然后询问我输入密码 接着询问我是否第一次提交第一次需要git clone第二次及以后只需要git pull你说是吧 所以这里询问我是否是第一次提交输入1就用git clone方法默认是git pull 方法 然后就开始自动部署了
实现的代码注意服务器的网络环境能否正常下包和访问github
原本这里是代码但是代码有问题删掉了️️️️️️
注意 代码执行到这部分后
执行命令:cd ~/digitalgardenrm -rf node_modules package-lock.jsonnpm install会卡住一段时间 因为npm install需要较长时间 建议npm换源会快很多
第三章云服务器部署数字花园
1 云服务器获取
阿里云买现在有活动99一年或者免费试用三个月 好像学生认真有300块钱的优惠券
2 云服务器配置
云服务器一般会有ssh连接方式连接上以后就可以用这篇文章的方法 记得要先去安全组里新建规则把连接端口放开
3 数字花园部署
把云服务器当本地机器来部署[[本地部署数字花园]]
这里引用上篇文章的方法 数字花园网站的本地部署方案 为什么要本地部署因为netlify的免费部署方案是有限制的我不想这么快把限制用完 另外我可以把网站部署到学校的服务器里这样校内的我或者同学都可以访问 进一步思考一下自己弄云服务器自己搭建的方案 现在阿里云的服务器学生认证后可以免费使用一年可以用来部署自己的网站所以我也许过段时间会将数字花园部署到阿里云 但是自己部署的话买云服务器、买域名、备案又有得折腾了 …a few moment later… 不过现在开始正式将数字花园部署到阿里云了 数字花园网站本地手动部署方案 1. 获取网站源码 有两种方法 通过 Obsidian 的 obsidian-publish 插件将笔记发布到本地目前没有尝试这个方法通过 GitHub 部署推荐 源码模板的获取 如果之前用netlify或者vercel部署过github里面就已经有模板记得断开netlify的自动部署连接哦 否则模板要去数字花园官方的github克隆到你的githubgit 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 npm2.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 --lts3. 项目部署 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 build3.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程序自动化实现 原理连接ssh服务器执行命令自动化部署 功能 运行后询问输入ssh连接的ip如直接回车默认ip是127.0.0.1 询问输入端口号直接回车默认22 询问我输入用户名如直接回车默认用户名是czc 然后询问我输入密码 接着询问我是否第一次提交第一次需要git clone第二次及以后只需要git pull你说是吧 所以这里询问我是否是第一次提交输入1就用git clone方法默认是git pull 方法 然后就开始自动部署了 实现的代码注意服务器的网络环境能否正常下包和访问github 原本这里是代码但是代码有问题删掉了 注意 代码执行到这部分后 执行命令:cd ~/digitalgardenrm -rf node_modules package-lock.jsonnpm install会卡住一段时间 因为npm install需要较长时间 把下面的3.4插入[[本地部署数字花园]]就构成云服务器源码的部署方案 所以笔记到这默认已经部署好基本的http服务器并能在8080端口访问
3.4 设置本地反向代理Nginx、pm2
http服务器默认启动后使用8080端口 但是这样要访问服务器只能通过 ip:8080 才能访问如果只输入ip或者域名默认是访问80端口但是80端口啥都没有所以要设置个代理把ip或者域名的80端口的访问转到 127.0.0.1:8080 去
当然如果怕麻烦也可以不做这步这只是锦上添花
3.4.1 安装必要软件
# 更新系统包
sudo apt update# 安装 nginx
sudo apt install nginx# 安装 pm2 (如果还没安装)
npm install -g pm2启动网站服务
# 进入项目目录
cd ~/digitalgarden# 使用 pm2 启动服务8080端口
pm2 start http-server -- dist -p 8080 --name digitalgarden# 检查服务是否正常运行
pm2 status# 设置开机自启
pm2 startup
pm2 save配置 Nginx
创建 Nginx 配置文件
sudo vim /etc/nginx/sites-available/digitalgarden关于vim编辑器的使用[[vim编辑器]]
添加以下配置
server {listen 80;server_name czchd.us.kg; # 替换成你的域名access_log /var/log/nginx/digitalgarden.access.log;error_log /var/log/nginx/digitalgarden.error.log;location / {proxy_pass http://localhost:8080;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection upgrade;proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}启用配置
# 创建符号链接
sudo ln -s /etc/nginx/sites-available/digitalgarden /etc/nginx/sites-enabled/# 删除默认配置可选
sudo rm /etc/nginx/sites-enabled/default# 测试配置是否正确
sudo nginx -t# 如果测试通过重启 nginx
sudo systemctl restart nginx检查服务状态
# 检查 nginx 状态
sudo systemctl status nginx# 检查 pm2 状态
pm2 status# 查看 nginx 错误日志
sudo tail -f /var/log/nginx/error.log# 查看应用日志
pm2 logs digitalgarden常用维护命令
# Nginx 相关命令
sudo systemctl start nginx # 启动 nginx
sudo systemctl stop nginx # 停止 nginx
sudo systemctl restart nginx # 重启 nginx
sudo systemctl reload nginx # 重新加载配置# PM2 相关命令
pm2 restart digitalgarden # 重启应用
pm2 stop digitalgarden # 停止应用
pm2 delete digitalgarden # 删除应用
pm2 logs digitalgarden # 查看日志可选我没选配置SSLHTTPS
# 安装 certbot
sudo apt install certbot python3-certbot-nginx# 获取证书并自动配置 nginx
sudo certbot --nginx -d czchd.us.kg4 知识库更新后的数字花园更新流程
# 查看当前运行的服务
pm2 list# 停止服务
# 方式一通过名称停止
pm2 stop digitalgarden # 如果你之前用这个名称启动了服务
# 方式二通过 id 停止
pm2 stop 0 # 0 是服务的 id 号
# 方式三停止所有服务
pm2 stop all# 更新代码并重启服务
# 1. 停止服务
pm2 stop digitalgarden
# 2. git 更新
cd ~/digitalgarden
git pull
# 3. 重新构建如果需要
npm run build
# 4. 重启服务
pm2 restart digitalgarden
# 或者重新启动服务
pm2 start http-server -- dist -p 8080 --name digitalgarden查看日志确认服务正常
pm2 logs digitalgarden如果想完全删除服务不仅是停止可以使用
pm2 delete digitalgarden5 域名申请
阿里云买域名 选择喜欢的域名购买如果没有模板实名认证过不能支付 创建模板实名认证等几分钟通过后 支付后就拥有这个域名了可以配置DNS解析
注意购买到域名后还要去实名备案备案后通过域名访问网站才能正常打开否则会是被拦截的警告
6 配置DNS解析
在阿里云控制台添加权威域名解析将你的域名和云服务器的公网ip填进去
第四章
为什么又多一个部署方案
当我心安理得的全部使用云服务器构建build部署的时候随着我逐渐将笔记整合进数字花园遇到一个很大的问题。
当笔记数量多了以后构建build的时候消耗的内存会逐渐增加但是我的云服务器内存只有2g当内存满了以后就会卡死不再构建build所以我不得不把构建的步骤放到本地来执行然后将构建好的网页源代码上传服务器部署。
现在的部署流程build和
obsidian编辑笔记digital garden插件上传笔记到github 执行脚本一键部署前提是按照之前的流程先完成了云服务器的部署操作 部署成功网页可以访问
一键部署脚本服务器端执行
我写了一个自动化脚本用于帮助我一键实现构建远程部署 下面这俩地方记得修改为自己的服务器信息 ssh用户名服务器ip地址以及这里写你的ssh连接密码
#!/bin/bash# 颜色定义
RED\033[0;31m
GREEN\033[0;32m
NC\033[0m # No Color# 打印带颜色的信息
print_info() {echo -e ${GREEN}[INFO] $1${NC}
}print_error() {echo -e ${RED}[ERROR] $1${NC}
}# 检查命令是否执行成功
check_result() {if [ $? -eq 0 ]; thenprint_info $1 成功elseprint_error $1 失败exit 1fi
}# 1. 安装必要工具
print_info 安装必要工具...
sudo apt install -y sshpass rsync
check_result 安装 sshpass 和 rsync# 2. 检查并进入项目目录
if [ ! -d digitalgarden ]; thenprint_info 克隆代码仓库...git clone https://github.com/your-repo/digitalgarden.gitcheck_result 克隆代码仓库
elseprint_info 项目目录已存在直接使用...
ficd digitalgarden
check_result 进入项目目录# 3. 更新系统并安装依赖
print_info 更新系统并安装依赖...
sudo apt update
check_result 系统更新sudo apt install -y nodejs npm
check_result 安装 nodejs 和 npm# 4. 配置 npm
print_info 配置 npm...
npm config set registry https://registry.npmmirror.com
npm cache clean --force# 5. 拉取最新代码
print_info 拉取最新代码...
git pull
check_result 拉取代码# 6. 安装依赖
print_info 安装项目依赖...
npm install
npm install -g npm
check_result 安装依赖# 7. 构建项目
print_info 构建项目...
npm run build
check_result 构建项目# 8. 上传到服务器
print_info 上传到服务器...
sshpass -p 这里写你的ssh连接密码 rsync -avz --delete dist/ ssh用户名服务器ip地址:~/digitalgarden/dist/
check_result 上传文件# 9. 重启服务器上的服务
print_info 重启服务...
sshpass -p 这里写你的ssh连接密码 ssh ssh用户名服务器ip地址 cd ~/digitalgarden pm2 restart digitalgarden || pm2 start http-server -- dist -p 8080 --name digitalgarden
check_result 重启服务print_info 部署完成第五章
写在前面
包括本文以及一系列教程的笔记都在我的数字花园中czchx.cc
数字花园的定义
数字花园是通过借助网络数字工具对想法、笔记和思考等一切你感兴趣的信息或进行收集、整理和创作文字之间用标签或链接创建连接形成一座独具个人浓厚色彩的信息与知识型花园。
这个花园是开放的不可避免地至少要经常打理。
数字花园介于笔记本和博客之间的交叉空间具有半公开性质。
不像笔记内容的纯私人性一样数字花园鼓励用户发布自己的想法、草稿这在很大程度上降低了我们的发布压力。
同时数字花园不像博客那样完全公开以建立个人品牌作为内容发布的主要目的。
[[数字花园]]网站的构建原理包括三个步骤
源代码生成Markdown 笔记编写通过dg插件发布出源代码源代码构建成网页代码通过npm run build 实现 Markdown → HTML CSS JS网页代码部署将 网页 (HTML CSS JS) 部署到服务器
[[我的数字花园搭建笔记]]
①[[netlify免费搭建数字花园]]适用数字花园需求较小更新频率少笔记量少②[[本地部署数字花园]]适用有公网ip或局域网校园网内使用③[[云服务器部署数字花园]]适用数字花园需求较小更新批量高笔记量少④[[本地构建云服务器部署数字花园]]适用数字花园需求较小更新批量高笔记量少失效无视这条⑤[[本地构建云服务器部署数字花园plus]]适用数字花园需求较大更新批量高笔记量大 [[本地构建云服务器部署数字花园]]这个方法因为可能存在的网络限制没用了 这篇笔记是[[本地构建云服务器部署数字花园]]的改进版 方案依旧是源代码构建build和部署deploy分离
现在的部署流程
源代码构建(build)环境选择本地和服务器都是linux也可以是[[WSL]]我用vscode的ssh连接wsl和服务器方便执行脚本弹出github登录页也可以是手机的终端环境我用的[[termux]]对你没看错手机也可以用来构建源代码然后发送到服务器
新增步骤github新创建一个库中转库叫digitalgardendist用来存放构建好的数字花园代码并把库信息填入脚本代码中
obsidian编辑笔记digital garden插件上传笔记到github 自己电脑执行本地自动化脚本一键部署前提是按照之前的流程先完成了云服务器的部署操作 服务器端执行服务器脚本 部署成功网页可以访问
一、本地操作详细教程
注意命令执行环境是linuxwindows下可以开wsl或者linux虚拟机安卓可以用termux
⭐首先确定你的网络环境能访问github⭐
不想看详细教程可以直接翻到下面去看脚本源码我能直接用你只要网没啥问题应该也可以用
-2.前置步骤前面的文章都提过
obsidian安装好数字花园插件digital garden将要发布的笔记最前面设置好dg-publish: true属性
github创建一个新的空仓库
去数字花园插件官网获取源代码模板克隆至自己新创建的一个github仓库数字花园代码模板库 在obsidian中的digital garden插件中配置好确认能正常发布到github仓库 本文中以我的仓库为例子https://github.com/czc6666/digitalgarden.git数字花园代码模板库
-1.创建github中转库
为什么要中转库因为我们在本地构建好的网页源代码文件要传到服务器去反正都能访问GitHub了就用github来中转文件其实是用ssh我总传不上去
新创建一个不带readme文件的库就行然后github就不用操作了
0. 本地环境配置
基础环境git、curl
sudo apt update
sudo apt install -y git curlNode.js
从数字花园提供的源代码模板构建出网站源代码需要用到的工具
Node.jsnpm
直接默认用apt安装的化可能版本太落后用不了
旧版本Node.js卸载
如果你不小心安装了旧版的可以先卸载 卸载旧版本 Node.js…
sudo apt-get remove -y nodejs nodejs-doc npm libnode-dev
sudo apt-get autoremove -y清理可能存在的冲突文件
sudo rm -rf /usr/include/node/common.gypiNode.js 18.x安装
添加 Node.js 18.x 仓库…
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -安装 Node.js
sudo apt-get install -y nodejs安装好后更新一下环境
source ~/.bashrc验证是否安装成功
验证Node.js
node_version$(node -v) # 直接复制这两行去执行
print_info Node.js 版本: $node_version验证npm
npm_version$(npm -v)
print_info npm 版本: $npm_versionnpm换源
这步嫌麻烦可以跳过因为你能访问github不换源应该也行
配置npm源
npm config set registry https://registry.npmmirror.com清除可能存在的缓存
npm cache clean --forcegit配置
配置git邮箱替换为你的邮箱
git config --global user.email 这写邮箱配置用户名替换为你的用户名
git config --global user.name czc6666设置默认分支为main
git config --global init.defaultBranch main1.数字花园源代码构建
从你的数字花园模板库中获取代码然后在本地构建数字花园源代码后发送到你的中转仓库
源代码模板获取
克隆代码仓库…记得替换成你自己的库
git clone https://github.com/czc6666/digitalgarden.git切换到克隆下来的文件夹
cd digitalgarden从数字花园代码模板库拉去最新代码
git pull网页源代码构建build
确保当前在digitalgarden目录下执行下面命令安装相应环境可能如果卡半天不动那就去换源
npm install开始构建网页源代码
npm run build2.源码上传中转仓库
我的中转仓库是https://github.com/czc6666/digitalgardendist.git
github中转仓库的初始化
先切换回上一级目录别在digitalgarden目录里就行
创建一个放中转库的文件夹
mkdir digitalgardendist进入文件夹
cd digitalgardendistgit初始化文件夹
git init创建README文件并写入内容
echo # digitalgardendist README.md将README文件添加到暂存区
git add README.md提交更改添加提交信息
git commit -m first commit将当前分支重命名为main
git branch -M main添加远程仓库地址记得修改成你自己的地址
git remote add origin https://github.com/czc6666/digitalgardendist.git如果是后续更新代码
第一次设置好以后后续再更新代码就不需要执行上面的操作了只需要用下面的命令清空这个中转库重新复制构建好的代码过来上传就行
清空目录保留 .git
find . -not -path ./.git/* -not -name .git -delete3.复制构建文件
复制构建好的代码文件到中转库的文件夹记得自己修改下面的命令
cp -r ../digitalgarden/dist/* .4.提交构建好的代码到中转库
确保当前在中转库的目录中
将所有文件添加到暂存区
git add .提交更改提交信息包含当前时间
git commit -m Update built files: $(date %Y-%m-%d %H:%M:%S)$(date %Y-%m-%d %H:%M:%S) 会被替换为当前时间格式如2024-03-19 15:30:45
推送到远程仓库的main分支
git push -u origin main-u 参数设置上游分支之后可以直接使用 git push 而不需要指定分支origin 是远程仓库的别名main 是分支名
到这里数字花园的网站源代码就上传到github的中转库了。接下来就是去服务器端将代码下载下来并部署
二、服务器端详细教程
1.环境
更新系统包列表
sudo apt update安装必要的软件包git、nodejs和npm
sudo apt install -y git nodejs npm设置npm镜像源为国内源加速下载
npm config set registry https://registry.npmmirror.com清理npm缓存
npm cache clean --force全局安装pm2
npm install -g pm2全局安装http-server因为pm2要用到
npm install -g http-server验证安装是否成功
pm2 --version如果遇到权限问题需要使用sudo安装
sudo npm install -g pm2
sudo npm install -g http-server2.git获取代码
克隆项目仓库
git clone https://github.com/czc6666/digitalgardendist.git进入项目目录
cd digitalgardendist拉取最新代码
git pull3.部署
返回用户主目录
cd ~删除旧的pm2进程如果存在这步可以不执行
pm2 delete digitalgarden重启或新建pm2进程
pm2 restart digitalgarden || pm2 start http-server -- digitalgardendist/ -p 8080 --name digitalgarden尝试重启已存在的进程如果重启失败进程不存在则创建新进程使用http-server服务器指定目录为digitalgardendist/设置端口为8080进程名称为digitalgarden
自动化部署脚本
我自己用的脚本代码[[数字花园代码本地构建sh]]、[[数字花园网页服务器部署sh]]
本地自动化脚本
#!/bin/bash# 颜色定义
RED\033[0;31m
GREEN\033[0;32m
NC\033[0m# 打印带颜色的信息
print_info() {echo -e ${GREEN}[INFO] $1${NC}
}print_error() {echo -e ${RED}[ERROR] $1${NC}
}# 检查命令是否执行成功
check_result() {if [ $? -eq 0 ]; thenprint_info $1 成功elseprint_error $1 失败exit 1fi
}# 0. 环境配置
print_info 更新系统包...
sudo apt update
check_result 系统更新print_info 安装必要的软件包...
sudo apt install -y git curl
check_result 基础软件包安装# 检查并安装正确版本的 Node.js
setup_nodejs() {print_info 检查 Node.js 版本...# 检查是否已安装 Node.js 和版本号if command -v node /dev/null; thencurrent_version$(node -v | cut -dv -f2)required_version18.0.0# 使用版本比较if printf %s\n $required_version $current_version | sort -V -C; thenprint_info Node.js 版本($current_version)符合要求跳过安装return 0elseprint_info 当前 Node.js 版本($current_version)过低需要升级fielseprint_info 未检测到 Node.js开始安装fi# 如果需要安装则先卸载旧版本print_info 卸载旧版本 Node.js...sudo apt-get remove -y nodejs nodejs-doc npm libnode-devsudo apt-get autoremove -y# 清理可能存在的冲突文件sudo rm -rf /usr/include/node/common.gypi# 添加 NodeSource 仓库print_info 添加 Node.js 18.x 仓库...curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -# 安装 Node.jsprint_info 安装 Node.js 和 npm...sudo apt-get install -y nodejs# 重新加载环境变量source ~/.bashrc# 验证安装node_version$(node -v)print_info Node.js 版本: $node_versionnpm_version$(npm -v)print_info npm 版本: $npm_versioncheck_result Node.js 安装
}# 直接调用 setup_nodejs 函数 安装 Node.js 和 npm
setup_nodejs# 配置 npm
npm config set registry https://registry.npmmirror.com
npm cache clean --force# 配置 Git
print_info 配置 Git...
git config --global user.email ⭐⭐⭐⭐⭐写你自己的邮箱⭐⭐⭐
git config --global user.name czc6666 # 替换为你的用户名
git config --global init.defaultBranch main # 设置默认分支为 main
check_result Git 配置# 1. 在原始项目中构建
if [ ! -d digitalgarden ]; thenprint_info 克隆代码仓库...git clone https://github.com/czc6666/digitalgarden.git # 替换为你的源码仓库check_result 克隆代码仓库
elseprint_info 项目目录已存在直接使用...
fiprint_info 构建原始项目...
cd digitalgarden
git pull
npm install
npm run build
check_result 构建项目# 2. 准备新的 dist 仓库中转仓库
print_info 准备 dist 仓库...
cd ..
if [ ! -d digitalgardendist ]; thenmkdir digitalgardendistcd digitalgardendistgit initecho # digitalgardendist README.mdgit add README.mdgit commit -m first commitgit branch -M maingit remote add origin https://github.com/czc6666/digitalgardendist.git # 替换为你的中转仓库
elsecd digitalgardendist# 清空目录保留 .gitfind . -not -path ./.git/* -not -name .git -delete
fi# 3. 复制构建文件
print_info 复制构建文件...
cp -r ../digitalgarden/dist/* .
check_result 复制文件# 4. 提交并推送
print_info 提交更改...
git add .
git commit -m Update built files: $(date %Y-%m-%d %H:%M:%S)
git push -u origin main
check_result 推送到 GitHubprint_info 本地构建和推送完成本地脚本运行截图 服务器端自动化脚本
#!/bin/bash# 颜色定义
RED\033[0;31m
GREEN\033[0;32m
NC\033[0m# 打印带颜色的信息
print_info() {echo -e ${GREEN}[INFO] $1${NC}
}print_error() {echo -e ${RED}[ERROR] $1${NC}
}# 检查命令是否执行成功
check_result() {if [ $? -eq 0 ]; thenprint_info $1 成功elseprint_error $1 失败exit 1fi
}# 0. 安装必要的环境
print_info 更新系统包...
sudo apt update
check_result 系统更新print_info 安装必要的软件包...
sudo apt install -y git nodejs npm
npm config set registry https://registry.npmmirror.com
npm cache clean --force
npm install -g pm2
npm install -g http-server
pm2 --version
check_result 软件包安装# 1. 检查并克隆仓库
cd ~
print_info 切换到 home 目录...if [ ! -d digitalgardendist ]; thenprint_info 克隆代码仓库...git clone https://github.com/czc6666/digitalgardendist.gitcheck_result 克隆代码仓库
ficd digitalgardendist
check_result 进入项目目录# 2. 拉取最新代码
print_info 拉取最新代码...
git pull
check_result 拉取代码# 3. 返回 home 目录并重启服务
print_info 重启服务...
cd ~
pm2 delete digitalgarden
pm2 restart digitalgarden || pm2 start http-server -- digitalgardendist/ -p 8080 --name digitalgarden
check_result 重启服务print_info 部署完成服务器端脚本执行后部署成功截图 成功部署网页能成功访问了
![[本地构建云服务器部署数字花园plus_image-5.png]]
附加全自动化脚本
这里将在本地sh脚本中添加执行远程服务器中脚本的命令实现obsidian更新完数字花园只需要双击点击一个桌面一个bat文件即可完成所有更新部署操作
bat脚本启动wsl中的部署sh脚本
我的脚本就放在~/目录下你如果不是请修改
echo off
title 数字花园自动部署
color 0Aecho 正在启动 WSL 执行部署脚本...
echo.wsl -e bash -ic cd ~ ./czc_deploy.sh; echo ; echo 部署结束按回车键退出...; readif %ERRORLEVEL% NEQ 0 (color 0Cecho.echo 脚本执行出错pause
) else (color 0Aecho.echo 脚本执行完成pause
)本地wsl中的本地部署脚本
#!/bin/bash# GitHub Token 配置
GITHUB_TOKEN你的githubtoken# 定义ssh远程服务器信息
REMOTE_HOST服务器的ip地址
REMOTE_USERssh连接的用户名
REMOTE_PASSssh连接的密码
REMOTE_SCRIPT服务器上的部署脚本地址# 下面的仓库地址也要修改成你自己的# 颜色定义
RED\033[0;31m
GREEN\033[0;32m
NC\033[0m# 打印带颜色的信息
print_info() {echo -e ${GREEN}[INFO] $1${NC}
}print_error() {echo -e ${RED}[ERROR] $1${NC}
}# 检查命令是否执行成功
check_result() {if [ $? -eq 0 ]; thenprint_info $1 成功elseprint_error $1 失败exit 1fi
}# 0. 环境配置
print_info 更新系统包...
sudo apt update
check_result 系统更新print_info 安装必要的软件包...
sudo apt install -y git curl
check_result 基础软件包安装# 检查并安装正确版本的 Node.js
setup_nodejs() {print_info 检查 Node.js 版本...# 检查是否已安装 Node.js 和版本号if command -v node /dev/null; thencurrent_version$(node -v | cut -dv -f2)required_version18.0.0# 使用版本比较if printf %s\n $required_version $current_version | sort -V -C; thenprint_info Node.js 版本($current_version)符合要求跳过安装return 0elseprint_info 当前 Node.js 版本($current_version)过低需要升级fielseprint_info 未检测到 Node.js开始安装fi# 如果需要安装则先卸载旧版本print_info 卸载旧版本 Node.js...sudo apt-get remove -y nodejs nodejs-doc npm libnode-devsudo apt-get autoremove -y# 清理可能存在的冲突文件sudo rm -rf /usr/include/node/common.gypi# 添加 NodeSource 仓库print_info 添加 Node.js 18.x 仓库...curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -# 安装 Node.jsprint_info 安装 Node.js 和 npm...sudo apt-get install -y nodejs# 重新加载环境变量source ~/.bashrc# 验证安装node_version$(node -v)print_info Node.js 版本: $node_versionnpm_version$(npm -v)print_info npm 版本: $npm_versioncheck_result Node.js 安装
}# 直接调用 setup_nodejs 函数 安装 Node.js 和 npm
setup_nodejs# 配置 npm
npm config set registry https://registry.npmmirror.com
npm cache clean --force# 配置 Git
print_info 配置 Git...
git config --global user.email 913809127qq.com # 替换为你的邮箱
git config --global user.name czc6666 # 替换你的用户名
git config --global init.defaultBranch main # 设置默认分支为 main
check_result Git 配置# 1. 在原始项目中构建
if [ ! -d digitalgarden ]; thenprint_info 克隆代码仓库...git clone https://oauth2:${GITHUB_TOKEN}github.com/czc6666/digitalgarden.gitcheck_result 克隆代码仓库
elseprint_info 项目目录已存在直接使用...
fiprint_info 构建原始项目...
cd digitalgarden
git pull
npm install
npm run build
check_result 构建项目# 2. 准备新的 dist 仓库中转仓库
print_info 准备 dist 仓库...
cd ..
if [ ! -d digitalgardendist ]; thenmkdir digitalgardendistcd digitalgardendistgit initecho # digitalgardendist README.mdgit add README.mdgit commit -m first commitgit branch -M maingit remote add origin https://oauth2:${GITHUB_TOKEN}github.com/czc6666/digitalgardendist.git
elsecd digitalgardendistgit remote set-url origin https://oauth2:${GITHUB_TOKEN}github.com/czc6666/digitalgardendist.git# 清空目录保留 .gitfind . -not -path ./.git/* -not -name .git -delete
fi# 3. 复制构建文件
print_info 复制构建文件...
cp -r ../digitalgarden/dist/* .
check_result 复制文件# 4. 提交并推送
print_info 提交更改...
git add .
git commit -m Update built files: $(date %Y-%m-%d %H:%M:%S)
git push -u origin main
check_result 推送到 GitHubprint_info 本地构建和推送完成# 使用sshpass执行远程命令确保加载完整的环境
sshpass -p $REMOTE_PASS ssh $REMOTE_USER$REMOTE_HOST export NVM_DIR\\$HOME/.nvm\ \[ -s \\$NVM_DIR/nvm.sh\ ] source \\$NVM_DIR/nvm.sh\ \[ -s \\$NVM_DIR/bash_completion\ ] source \\$NVM_DIR/bash_completion\ \source ~/.bashrc \source ~/.profile \bash $REMOTE_SCRIPT# 检查执行结果
if [ $? -eq 0 ]; thenecho [INFO] 远程脚本执行成功
elseecho [ERROR] 远程脚本执行失败
fi参考文章
Digital Garden - Publish Obsidian Notes For Free超详细图解从 0 搭建一个个人网站也太简单了吧https://zhuanlan.zhihu.com/p/677556713AboutTheGarden — oldwinterの数字花园oldwinter的数字花园最全的数字花园资源站工具、手册、理念、网站GitHub - MaggieAppleton/digital-gardeners: Resources, links, projects, and ideas for gardeners tending their digital notes on the public interwebs英文的数字花园收录GitHub - KasperZutterman/Second-Brain: A curated list of awesome Public Zettelkastens ️ / Second Brains / Digital Gardens 别人的理解什么是数字花园Digital Garden - 知乎打造数字花园的工具实践构建自己的数字花园-工具篇思考问题的熊万字长文如何选笔记软件、做知识管理、建数字花园 —— - 即刻App
