什么是 Penpot ?
Penpot
是第一个面向跨域团队的开源设计和原型制作平台。Penpot
是基于Web
的,不依赖于操作系统,使用开放式Web
标准(SVG
),为所有人提供服务并由开源社区授权。
官网地址:https://penpot.app/
安装
在 docker
文件夹中,创建一个新文件夹,并将其命名为 penpot
,SSH
客户端登录到群晖,在 penpot
目录中执行下面👇的命令下载 2
个文件
老苏常用的
SSH
客户端主要是Finalshell
和PuTTY
# 下载 docker-compose.yaml
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
# 下载 config.env
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env
docker-compose.yaml
docker-compose.yaml
主要就是看看要不要改端口,虽然涉及到 5
个容器,但是只有前端对外暴露了端口 9001
,如果这个端口没有冲突的话,这个文件就不用改了
services:
penpot-frontend:
image: "penpotapp/frontend:latest"
ports:
- 9001:80
config.env
config.env
是设置文件,跑起来的话只要修改 PENPOT_PUBLIC_URI
当然可以配置的内容很多,包括
SMTP
、用户、演示帐户,以及第三方认证等
原始的是下面👇这样的
# Should be set to the public domain when penpot is going to be
# served.
PENPOT_PUBLIC_URI=http://localhost:9001
老苏根据群晖的 IP
改成了👇这样
如果前面改了端口,这里也要跟着改
# Should be set to the public domain when penpot is going to be
# served.
PENPOT_PUBLIC_URI=http://192.168.0.197:9001
在 penpot
目录中执行一键启动
# 进入 penpot 目录
cd /volume2/docker/penpot
# 一键启动
docker-compose up -d
不出意外的话,你会看到 5
个 done
容器都处于正常运行中
其他可能用到的命令
# 一键停止
docker-compose stop
# 一键重启
docker-compose restart
# 一键删除
docker-compose down
反向代理
老苏没有公网 IP
,用 frp
做的内网穿透,但做了泛域名解析,不了解的可以翻翻老苏以前的文章
进入 自定义标题
,新增 WebSocket
运行
创建用户
老苏尝试过用 88
邮箱配置 SMTP
,虽然老苏之前在很多项目都成功配置过 SMTP
,但是这一次失败了,所以没办法通过网页注册用户。
大家有兴趣可以试试在
config.env
配置其他的邮箱
如果在未配置 SMTP
的情况下启动应用程序,需要创建一个用户才能登录到该应用程序。
# 创建用户
docker exec -ti penpot_penpot-backend_1 ./manage.sh create-profile
开始运行
在浏览器中输入 http://群晖IP:9001
,就能看到主界面了
输入创建好的用户邮件和密码
但是怎么也登不进去,浏览器一直返回 401
错误
Failed to load resource: the server responded with a status of 401 (Unauthorized)
需要改为域名登录,也就是 https://pp.laosu.ml
才行
老苏自己用,所以选择了 Fly solo
,如果是团队使用,那就选 Team up
界面是中文的,不需要特别设置
导入模板
可以在这里找到库和模板:https://penpot.app/libraries-templates.html
老苏导入了 Ant-Design-UI-Kit-Lite
和 Interactive-music-app
进入编辑状态
原型演示,还支持交互
小结
Penpot
拥有多款 UI
组件与样式、交互式原型以及项目设计示例与模板,帮你更快完成项目设计工作。此外,该平台还支持团队多人实时协作编辑,设计稿添加注释等多种团队协作工具。老苏觉得对于产品设计人员而言,是非常有用。
参考文档
Penpot - Design Freedom for Teams
地址:https://penpot.app/
penpot/penpot: Penpot - The Open-Source design & prototyping platform
地址:https://github.com/penpot/penpot
Getting Started.
地址:https://help.penpot.app/technical-guide/getting-started/
Penpot: an open-source Prototyping and design platform for teams
地址:https://medevel.com/penpot/