前言
大家好,我是汪小成。
最近发现了一个非常优秀的Markdown编辑器,可以将Markdown即时渲染成微信公众号图文,让我们不用再为微信公众号排版发愁。只要你会基本的 Markdown 语法,就能做出一篇样式简洁而又美观大方的微信图文。
项目源码地址:github.com/doocs/md
编辑器在线体验地址:doocs.github.io/md/
使用谷歌浏览器打开编辑器效果更佳。
编辑器功能特性
- 支持Markdown所有基础语法、数学公式
- 支持mermaid图表渲染
- 提供了丰富的代码块高亮主题
- 允许自定义主题色和CSS样式,灵活个性化定制展示效果
- 支持阿里云、腾讯云、七牛云等多种图床,也支持自定义图床
- 支持文件导入、导出
我体验了一下,很是满意。
正好自己有云服务器,就按照文档中的部署流程在自己的服务器上部署了一套,访问地址是:md.ddcherry.cn 。
有兴趣的朋友可以体验一下。
效果图预览
下面来说一下私有化部署。
私有化部署
前置条件
- 一台云服务器
- Nginx:
- 域名(可选)
部署步骤
1、下载源码
git clone https://github.com/doocs/md.git
在命令行中执行上面的命令下载项目源码。
2、安装项目依赖
# 安装依赖
npm i
3、构建项目
# 构建项目(无/md前缀)
npm run build:h5-netlify:only
从项目的package.json中可以看到项目是有两种构建方式:
-
npm run build:only:带/md前缀 -
npm run build:h5-netlify:only:不带/md前缀
我使用的是这种构建方式,因为我是直接给项目分配了一个子域名。
构建成功后会在项目跟目录下生成dist文件夹。
4、上传至云服务器
将dist文件夹上传到云服务器。
笔者要存放的的云服务器位置是/www/wwwroot/md.ddcherry.cn/dist。
为了之后上传方便,我编写了一个deploy.sh文件,每次执行sh deploy.sh命令直接自动构建、自动上传至云服务器。
deploy.sh文件中上传dist文件夹到云服务器的代码如下:
# 定义变量
SERVER_IP="你的服务器IP"
SERVER_USER="登录用户名"
SERVER_PASS="密码"
REMOTE_PATH="云服务器项目存放目录"
LOCAL_DIST="dist"
sshpass -p "$SERVER_PASS" rsync -avz --delete $LOCAL_DIST/ $SERVER_USER@$SERVER_IP:$REMOTE_PATH/
5、域名解析(可选)
登录自己的账号配置域名解析。
6、配置Nginx
修改Nginx配置文件,添加项目配置。
笔者云服务器上之前安装了宝塔面板,所以直接使用宝塔部署了项目,没有手动配置Ngnix。这一块就不贴代码了,防止误导读者。
这样就可以通过域名访问项目啦。🎉🎉🎉
后期计划
- 个性化:根据自己的喜好、审美修改项目代码