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

前言

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

优缺点

优点

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

缺点

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

kkapi部署

第一步:配置数据库

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

Organizations-Home
Register-Organizations
Create-Organization
New-Project
Project-Name
Create-Project
图片[7]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇
图片[8]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇
图片[9]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇
图片[10]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇

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

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

图片[11]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇

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

图片[12]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇
图片[13]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇
是否必填名称说明示例
DATABASE_URLmongoDB链接字符串例如:mongodb+srv://:@cluster0.x5rpv1z.mongodb.net/?retryWrites=true&w=majority
DATABASE_USERmongoDB用户名root
DATABASE_PASSWORDmongoDB用户密码root
SECRETKEYjwt加密字符串(随意写)xxxxxx(任意字母+数字)
GITHUB_CLIENT_IDGitHub Client IDIv1.1a4e5a689816a636
GITHUB_CLIENT_SECRETGitHub Client secrets*****e07ab369
PORT启动端口3000,默认为3000。vercel部署无需此参数
填错会导致500问题(vercel)

第二步:vercel部署(推荐)

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

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

image-202202270910334435. 进入 vercel 设置,调整 production 为 vercel 分支

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

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

kkadmin管理后台部署

前提

环境变量

是否必填名称说明示例
VITE_GLOB_API_URLvercel或者服务器部署的接口地址https://kkapi-open.vercel.app
VITE_GLOB_UPLOAD_URLlsky文件上传地址https://7bu.top/api/upload
VITE_GLOB_UPLOAD_TOKENlsky上传所需要tokenxxxxxx
VITE_GLOB_LSKY_VERSIONlsky版本号,默认V1V2
VITE_GLOB_LSKY_STRATEGY_IDstrategy_id
VITE_GLOB_APP_TITLE网站名称kk-admin
NODE_VERSION使用cloudflarePages构建时必填(16及以上)16

第一种:vercel+github

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

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

第二种:CloudFlare Pages

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

创建页面

我这边用的是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>

展示

图片[15]-ispeak最新部署方式——赶快为你的博客添加说说吧!-浩潮汇
© 版权声明
WWW.ANXKJ.TOP
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容