2019-01-13
Blog
gine-blog 挖坑详情 —— 基于 notion 搭建博客
特性
用现代化的文档写作方式，写博客。
相比于简陋的 markdown，Notion的Block有更强的表现力
多端同步
用现代化的前端开发方式，开发博客。
相比于 Hexo 蹩脚的 ejs，用 React 开发 blog主题，显然更加亲切。
用 notion table 结构化数据
你的自定义云端数据库
云端写作，一键发布。
得益于 notion 的多端同步，你可以随时随地的云端写作，而不用在本地建什么git仓库。
通过 Netlify 的 build hook 接口，一键部署。
静态页面，速度贼快，SEO 超级友好。
动静结合，添加个性化的数据接口，展示实时数据。
成品演示
Idea + Roadmap
使用 notion api 获取基础blog数据
gatsby build 时，利用puppeteer获取post html
分页组件需要做移动端适配（简化分页组件）
文章build缓存-文章缓存至github仓库
文章表添加keywords字段用于优化SEO @Mayne Yao
完善书单模块（检索）
相册模块
绘画模块（beta）
内容搜索（2019-04-13）
兼容 notion toc (2019-05-27)
自定义封面图（2019-05-27）
兼容 inline table 展示
netlify function 支持 （2019-06-03）
尝试着使用 netlify 的 lambda function 替换部分后端接口
在 绘画模块中首次使用，效果还不错。
文章搜索功能也用 lambda function 重写，现在不部署后端接口也能搜索文章了。
动态模块（2019-06-11）
没有朋友的朋友圈，个人生活记录。结构化数据，方便年终统计。
SEO 优化（2019-06-24）
添加自定义文章 url path。
自动构建（2019-06-29）
新增文章/文章更新后，当用户访问站点时，会触发 auto build
可以通过配置项决定由用户触发 build 检测的频率。
基于 notion 表格数据的通用年终统计页面。
构建这个博客的最初想法，就是将自己的数字化生活记录下来。通过使用 notion 记录数据使这个想法成为可能。
年终统计会收集 notion 内所有站点相关的 block，生成一条完整的时间线，记录这一年干了什么事情。
文章、书单、影视、动态、绘画。按不同分类生成统计。
文章
最受欢迎的文章（ga）
最多评论的文章 （disqus）
书单
过去一年看了多少本书
哪些是推荐的书 - 5星好评
书籍分类占比
影视
去电影院的次数
补了多少番剧
...
为什么又要造轮子
blog 很久没写了
熟悉 gatsby graphql
静态页面优点
SEO友好
速度快
hexo的ejs就像老奶奶的裹脚布
希望用熟悉的技术栈来构建自己的blog
gatsby 的模式深得我❤️
notion 可以用来写作，但是不适合分享给别人看，也不适合交流
notion 马上(可能是明年吧，鸽鸽鸽~)要开api了，云端协作，自动同步岂不美哉😆
要造成什么样的轮子
Plan A
理想的情况是以 notion 作为写作的后端。文章发布后（share public access ），webhook发 netlify 的build 动作, gatsby build 的时候拉取 notion 的文章数据编译成静态页面。
鉴于目前notion开放api的日程一直在推后(疯狂摸鱼)，对基于官方API的自动化部署不抱太大的希望
Plan B
用非官方的notion-py，自己搭建一个推送数据服务。目前没有直接生成markdown的接口。返回的文章全是block。构建一套react组件一一映射notion的block。
Plan C
手动挡导出blog页面的所有文章为markdown格式
notion的markdown 格式不统一，丢失了code block 的 language信息，需要再处理一遍 markdown，前端没法代码高亮
已反馈给notion，后续会改进mardkown导出
需要通过脚本处理头部的meta信息
现在是用python写的，后续改成node，在create node时预处理md文件
现状
在notion上维护blog的表格，发布文章时，手动触发netlify的build操作。build时，拉取（puppeteer）notion页面的blog html。
notion作为写作后端，多端同步，随时编辑。比如我现在就是在手机上通过notion app编辑文章，然后利用 netlify的buildhook 和 ifttt 一键触发build操作，达到web页面更新的效果。（build需要一定的时间，目前可以接受）
Gatsby 使用体验
graphql 真香
可以从任意数据源生成 graphql 数据
可以结合远程 api 做成静态+动态内容
如果 api 数据较少，可以直接 graphql 缓存下来
模块详情
Blog模块
数据来源notion
gatsby build 时，利用puppeteer获取post html
完成功能
列表页
分页组件
文章页
头图
tags
评论
发布时间
TOC
底部
格言
全部标页——标签云
用了标签后，就不用分类了。2者功能重叠，tag扁平一点。
现在的标签用的饼状图，g2的颜色映射不是很清楚。跟自己搞的tag color不一致
better css
归档——timeline
better css
标签详情页 关于该标签的所有文章全部列出来
404
集成 google analytics
友链
about me
域名 https
PWA 离线体验
sitemap SEO优化
RSS
书单模块
整理看过在看想看的书籍
数据来源notion表格维护
绘画模块
素描记录
相册模块
我拍的
番剧模块
看过和在看的番剧
数据来源 bilibili
游戏模块
正在玩的游戏
数据来源Steam API
音乐模块
正在听的音乐
top 20 music
近期情感分析 by Spotify
根据Spotify开放的api，获取近期听歌排行及情感分析。以下公式计算当前情感状态0~1（sad~happy）
computeHappy = (data) => {
let allTrackPopularity = data.items.map(item => item.popularity).reduce((a, b) => a + b)
let allValence = data.audio_features.map(item => {
let itemPopularity = data.items.find(t => t.id === item.id).popularity / allTrackPopularity
return item.valence * itemPopularity
})
let happinessIndex = allValence.reduce((a, b) => a + b)
return happinessIndex
}
JavaScript
动态模块
个人动态记录
没有朋友的朋友圈。
设计
无脑 material design
头图hash随机，全是notion的cover
开源准备
维护成一个可供他人使用的blog脚手架需要做哪些
内容和程序分离
统一配置项
文档