ispeak最新部署方式——赶快为你的博客添加说说吧！

前言

artitalk的发布方式要在前端发说说，无法在后台发布说说。发布方式比较少，无法满足快捷发布说说。memos需要自行使用服务器，且迁移数据比较难，服务器剩余资源也不够。直到我看到ispeak之后，觉得可以来使用。

优缺点

优点

1. 部署方式比较多（有服务器部署，vercel部署）
2. 发布说说方式比较多（比如网页端，uTools脚本，快捷指令，Taio App脚本，后台发布）
3. 版本比较稳定
4. 可以使用任何第三方评论（artalk，waline，valine等等）

缺点

1. 需要图床来作为图像上传

kkapi部署

第一步：配置数据库

1.注册MongoDB账号，注册完成后会提示你创建一个组织，并且输入一个项目昵称，选择编程语言(不选也可以)，随后点击右下角的Continue(继续)，如果没有可以跟如下图执行，点击Create an Organization(创建组织)

2.选择免费的共享数据库，随后会跳出选择地区(选择离你服务端近的即可)，点击Create Cluster创建

3.随后您需要创建数据库用户，输入用户名和密码，继续向下滚动就是添加 IP 地址，最后点击下方的Finish and Close(完成并关闭)按钮注意服务器部署，则填服务器公网 IP无服务器(ServerLess)ServerLess 一般都是动态 IP，你无法得到一个固定 IP，我们建议填写0.0.0.0

4.稍作等待创建好数据库即可，随后点击Connect(连接)，点击选择Drivers(云)，然后复制连接数据库字符串注意需要将字符串中用户名的替换为<password>

是否必填	名称	说明	示例
✔	DATABASE_URL	mongoDB链接字符串	例如：mongodb+srv://:@cluster0.x5rpv1z.mongodb.net/?retryWrites=true&w=majority
✔	DATABASE_USER	mongoDB用户名	root
✔	DATABASE_PASSWORD	mongoDB用户密码	root
✔	SECRETKEY	jwt加密字符串(随意写)	xxxxxx（任意字母+数字）
	GITHUB_CLIENT_ID	GitHub Client ID	Iv1.1a4e5a689816a636
	GITHUB_CLIENT_SECRET	GitHub Client secrets	*****e07ab369
	PORT	启动端口	3000，默认为3000。vercel部署无需此参数

第二步：vercel部署（推荐）

虽然有服务器部署，但是我不想在服务器部署，防止数据丢失。所以在vercel上部署，这种适用于无服务器的小伙伴以及不想折腾的朋友们。

1. 注册 Vercel 账号，推荐使用 GitHub 账户注册。
2. 进入Vercel，选择导入并找到刚刚 fork 的项目。
3. 点击导入后在 url 的末尾添加/tree/vercel表示不是 vercel 分支例如：https://vercel.com/new/import?s=https%3A%2F%2Fgithub.com%2Fkkfive%2Fkkapi-open/tree/vercel输入完成后敲击回车。
4. 添加环境变量进行部署环境变量可能随项目的迭代而增加必填的环境变量，具体请参考环境变量

5. 进入 vercel 设置，调整 production 为 vercel 分支

6. 查看部署如果你部署的环境不是 Production，那么点击旁边的Promote to Production将其发布到 Production 即可。
7. 初始化账户初始化账户在浏览器访问：你的域名+/api/user/init?userName=xiaokang即可初始化一个账户为xiaokang，密码为123456的账户。 如果不指定用户名则创建一个账户为admin，密码为123456的账户。例如:https://kkapi-open.vercel.app/api/user/init?userName=xiaokang

当我们部署完api地址后就需要部署管理后台

kkadmin管理后台部署

前提

环境变量

是否必填	名称	说明	示例
✔	VITE_GLOB_API_URL	vercel或者服务器部署的接口地址	https://kkapi-open.vercel.app
✔	VITE_GLOB_UPLOAD_URL	lsky文件上传地址	https://7bu.top/api/upload
✔	VITE_GLOB_UPLOAD_TOKEN	lsky上传所需要token	xxxxxx
	VITE_GLOB_LSKY_VERSION	lsky版本号，默认V1	V2
	VITE_GLOB_LSKY_STRATEGY_ID	strategy_id
	VITE_GLOB_APP_TITLE	网站名称	kk-admin
	NODE_VERSION	使用cloudflarePages构建时必填（16及以上）	16

第一种：vercel+github

vercel 部署依赖于 GitHub actions 的构建。

1. 进入kkadmin-open项目，点击 fork
2. 添加环境变量环境变量参考环境变量
3. 打开 actions 的执行然后随便编辑一个文件并推送，触发 actions 的构建
4. 在 vercel 中导入项目
5. 修改部署分支为 vercel在当前 url 后添加/tree/vercel，例如https://vercel.com/new/import?s=https%3A%2F%2Fgithub.com%2Fkkfive%2Fkkadmin-open/tree/vercel然后点击部署即可
6. 修改 Production 分支为 vercel
7. 构建完成后即可打开网址，测试是否可以正常使用。

第二种：CloudFlare Pages

1. 导入项目进入cf pages选择项目并导入
2. 配置环境变量和打包命令环境变量参考环境变量
3. 等待构建完成后即可

创建页面

我这边用的是wordpress，所以使用古腾堡编辑器创建一个页面

第一步：创建页面

<div id="tip" style="text-align:center;">ipseak加载中</div>
<div id="ispeak"></div>
<link
  rel="stylesheet"
  href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ispeak@4.4.0/style.css"
/>

<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ispeak@4.4.0/ispeak.umd.js"></script>
<!-- CSS -->
<link href="https://unpkg.com/artalk@2.3.4/dist/Artalk.css" rel="stylesheet" />
<!-- JS -->
<script src="https://unpkg.com/artalk@2.3.4/dist/Artalk.js"></script>
<script>
  var head = document.getElementsByTagName('head')[0]
  var meta = document.createElement('meta')
  meta.name = 'referrer'
  meta.content = 'no-referrer'
  head.appendChild(meta)
  if (ispeak) {
    ispeak
      .init({
        el: '#ispeak',
        api: 'https://kkapi-dev.vercel.app/',
        author: '61fe93508fd621d39a155725',
        pageSize: 10,
        loading_img: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif',
        comment: function (speak) {
          // 4.4.0 之后在此回调函数中初始化评论
          const { _id, title, content } = speak
          const contentSub = content.substring(0, 30)
          new Artalk({
            el: '.ispeak-comment', // 默认情况下 ipseak 生成class为 ispeak-comment 的div
            pageKey: '/speak/info.html?q=' + _id, // 手动传入当前speak的唯一id
            pageTitle: title || contentSub, // 手动传入当前speak的标题(由于content可能过长，因此截取前30个字符)
            server: 'https://api.antmoe.com/artalk/',
            site: 'speak' // 你的站点名
          })
        }
      })
      .then(function () {
        console.log('ispeak 加载完成')
        document.getElementById('tip').style.display = 'none'
      })
  } else {
    document.getElementById('tip').innerHTML = 'ipseak依赖加载失败！'
  }
</script>

展示