为了更好的浏览体验,请不要在本页面禁用 Javascript 🙂
2019-06-01
Blog
文档

gine-blog 使用文档

写在前面
目前 gine-blog 使用 notion 作为博客后端,必须与 notion 搭配使用。在开始之前,确保您已经拥有 notion 账号。
上获取到,所有博客用到的表格模板。
安装-运行-部署
先跑起来
git clone https://github.com/mayneyao/gine-blog.git yarn && yarn develop
Shell
因为依赖 puppeteer ,安装依赖过程中可能会出现一些与 puppeteer 相关的问题。具体可以看报错信息,查找解决方案。
不出意外的话,博客正常运行。访问 http://localhost:8000
真棒!你已经迈出了第一步,可喜可贺!
发布文章
你可以看到,页面中已经有一篇文章了。可是文章从哪里来?从这里来。
此页面为文章的基础表格,clone 这个页面到自己的 notion 中。确保该页面为 公开状态
然后开始写文章,完成后。在表格中配置该文章的信息。
设定发布日期(考虑到文章迁移的需求,此字段自己设定,而没有采用系统生产的 create_time)
设定文章状态为已发布
修改 config.js ,配置文章源。clone 模板后,复制页面地址,替换掉下面的 blog.url
更新
yarn develop
SQL
不出意外,这个时候可以看到刚才新发布的文章了。
部署到 Netlify
博客系统和文章源是分离的。因此你不需要像 hexo 那样,在仓库中新建 md 文件,build,deploy。
所有的操作都是在云端进行。推荐部署到 netlify ,利用 netlify 的 build hook,即可一键部署/更新。
按照提示操作即可。
如果你事先 fork 了本仓库,按照 netlify 的通用部署步骤自行操作。或者你也删除 fork的仓库。点击上面链接,按步骤操作。然后修改 config.js ,push 到 github。这时候 netlify 检测到代码更新,会自动更新。
云端写作,一键更新。在 notion 中写的文章不会实时同步到 netlify 上,你需要触发 netlify 的 build 操作,系统才会自动拉取文章更新。
在 netlify 的 build 设置中配置 hook
iOS 上通过捷径发送 build 请求
Android 上可以通过 IFTTT发送 build 请求
这样即可完成博客的更新。到目前为止有2种操作会触发博客更新。
1.
博客代码更新。
2.
build hook 接收到 build 请求。
加速 Build
除了替换数据源之外,你最有可能用到的配置项是 blog.openGithubCacheblog.github
它会开启 github 缓存博客文章,加速 build。
如果不开启此配置。每次 build 时,系统都会通过 puppeteer 实时抓取 notion 页面上的文章内容,这样大大增加了 build 时间。当文章数越来越多,build 的时候可能会不断增加。通过 github 仓库缓存文章,可以大大减低 build 时间。虽然都是通过网络获取文章内容,但是通过 puppeteer 抓取 比从 github api 获取的速度要慢的多。
缓存原理如下图所示:
需要准备的工作。
1.
新建 github 仓库(保证仓库内至少有一个文件,初始化勾选 readme 即可)
2.
访问 https://github.com/settings/tokens 获取 token,该 token 需要对上面的仓库有读写权限。
具体使用说明查看下面配置项中的介绍。
接下来通过探索配置项,完成更加个性化的定制。
配置项
blogMeta——博客基本信息
title
网站标题
pageSize
每页文章数量
description
网站描述
sireUrl
用于 生成 sitemap
aboutPostSlug
About 页的文章 slug
blog——文章数据源配置
sourceType
默认值 notion
文章源,目前只适配 notion
openGithubCache
默认关闭。建议开启,可以大大提高build速度。
开启此配置后,notion页面的数据会缓存到 github 仓库。优先从 github 仓库获取文章,如果文章更新,则会通过 puppeteer 拉取文章,然后更新到 github 仓库。
开启配置
本地开发时,需要将 token 添加到环境变量中。
export GitHubToken='yourtokenhere'
Shell
如果部署在 netlify 上,则需要在 站点设置> build&deploy 中,添加环境变量。
你需要新建一个 github 仓库用来缓存blog文章内容。注意这里的仓库需要有文件,初始化添加Readme.md即可
github
username github 用户名
repo 作为blog缓存数据仓库的名称
branch 作为blog缓存数据仓库的分支
search
open
默认开启,仅当部署在 netlify 上时有效。使用了 netlify 的 lambda functions,拥有免费使用额度。Ï
api
如果不部署在 netlify 上,但是要使用搜索功能。你可以自己设定 API 地址,返回数据格式 与 notion 的 api 一致。
friendLink——友链数据源配置
sourceType
默认 notion
*comment —— 评论组件配置
open
默认关闭
sourceType
目前仅适配 disqus
disqus
disqusShortname
disqus 短域名
*bangumi —— 番剧组件配置
open
默认关闭
sourceType
目前仅适配 bilibili
url
http://space.bilibili.com/ajax/Bangumi/getList?mid=<youridhere>&page=1
Shell
*aphorisms —— 格言组件配置
显示在页面底部的随机变化格言
open
默认关闭
sourceType
notion 或者 api
url
notion 格言表格链接
api 地址
*book —— 书单组件配置
open
默认关闭
url
notion 书单表格地址
*now —— 实时数据开关
整体控制,正在玩的游戏和正在听的音乐是否显示,需要后端接口(后端代码暂为开放,打算用 netlify 的 function 重写,这样可以免去后端部署的麻烦)
显示在友链下方的实时数据。`
open
默认关闭
*music —— 正在听的音乐
*game —— 正在玩的游戏
*seo —— SEO优化
部署在netlify上,为了更好的seo,请开启此选项
open
默认关闭
siteUrl
自定义域名地址,例如:https://gine.me
netlifyUrl
netlify 分配的地址,例如: https://gine.netlify.com
*sitemap —— 网站地图
open
默认关闭
开启后,seo友好
*ga —— Google Analytics 配置
open
默认关闭
trackingId
ga 分配的追踪 ID,例如:UA-xxxxxxxx-x
*pwa —— PWA 优化
open
默认关闭
开启后,网站拥有部分 PWA 特性
conf
配置参见 gatsby-plugin-manifest 插件文档
*rss —— RSS 配置
open
默认关闭
conf
配置参见 gatsby-plugin-feed 插件文档
开发
# 开发模式 热更新 yarn develop # 编译 yarn build # 本地访问 build之后 yarn serve # netlify function 调试,默认在 9000 端口开启 yarn start:lambda #
Shell
FAQ
初次安装依赖,会安装puppetter,所以比较慢,也可能会报错。
可以先单独安装 puppetter
sudo npm install puppeteer --unsafe-perm=true --allow-root
Shell
Build with gatsby,react,material-ui and Copyright 2019 Mayne Powered by gine-blog