Skip to content
This repository has been archived by the owner on Mar 1, 2021. It is now read-only.

Home

Jump to bottom
Jiang Wenjian edited this page Aug 9, 2020 · 1 revision

如何使用？

创建一个自己的项目仓库

可以 fork，但是不如下载当前的代码，然后上传到自己的仓库里更合适，这个看个人喜好。

项目主要需要修改的文件

这是一个 vue 的 webpack 项目，主要修改文件如下：

  • sync.js, 用来从你的数据来源处获取数据，并生成json文件。 目前是从 https://giki.app 平台上获取，如果你需要从其他平台上获取，需要自己写相关代码。

  • src/assets/data.json， 这个是本地的数据文件，根对象是一个 json 数组，里面保存所有的数据。对于数组里的对象，见下面的例子：

{"id":5401,"timestamp":"2020-08-07T23:28:46.265Z","content":"dev.to 有点像 掘金，或者说掘金有点像 dev.to","tags":[],"htmlContent":""}

其中：

  • id: 是一个唯一标示，你可以用自增数字或者uuid都可以

  • timestamp：创建时间的时间戳格式

  • content: markdown 内容

  • tags: 一个字符串数组，可以为空，会显示为标签列表

  • htmlContent: markdown 渲染结果，这一项设置成空字符串即可，页面渲染时会自动填充。

  • src/assets/logo.jpeg, 页面最上面的 logo 图片。

  • .github/workflows/node.js.yml , github action 配置文件，当前配置为每天 0 点执行一次 node sync.js 并将最新数据提交的仓库中。可以根据需要进行修改。

打包，部署

建议使用 Netlify 部署项目，具体可以去百度搜教程，很简单，基本就是创建个账户，链接到你的 github，选择仓库，就可以了。

原因主要是：

  • netlify 部署的项目国内访问速度还不错
  • 支持自定义域名
  • 自定义域名免费 ssl
  • cdn 和 缓存

自动同步数据，自动部署

关于自动同步数据，使用的是 Github action 的定时任务功能，目前的设置是每天0点运行一次，主要步骤：

  1. 克隆代码
  2. 执行 node sync.js 命令，所以你需要根据自己的情况来修改 sync.js 的内容来从你的数据来源读取数据，按格式拼成一个 json 数组，并保存到 src/assets/data.json 中
  3. 将最新 data.json 文件提交到仓库中

在这一步需要用到你的邮箱地址，需要在仓库的 settings -> secrets 中添加一个 GIT_USER_EMAIL 变量，填上你的邮箱地址。

  1. 将提交推送到 github 仓库中
  2. 如果你已经设置好了 Netlify 的部署，那么上一步的提交就会触发重新打包部署。

关于 Github action 的触发方式，你可以根据自己的需要，修改为每小时执行一次，此外还支持通过：

  • Github API 触发
  • 手动在 github action tab 页中触发

Giki.app 同步设置

目前的自动同步脚本 sync.js 是基于 https://giki.app 的，如果你也准备使用这个平台，那么你可以往下看：

  1. 创建 giki.app 账户
  2. 到你的 giki 设置页面，获取到你的 token
  3. 打开你的仓库的 设置页面，找到 secrets，在里面添加 3 个变量
  • GIKI_USERNAME， 填写你的 giki 账号的用户名
  • GIKI_TOKEN，填写你的 giki 账号的 token
  • GIT_USER_EMAIL，填写你的 git 提交需要使用的 邮箱账号。
  1. 现在你可以手动到仓库的 action 页面，手动触发一次运行，应该就可以了
Clone this wiki locally