前言
平时写了一些笔记放在 github 上,为了能够手机随时查看,故写了这个小项目,如果大家喜欢,希望大家 star 下,感谢大家支持。另外,本人觉得该项目不适合新手作为 react 系列学习,请另找其他优质项目。
react-laoergege-blog
一个基于 GitHub Pages 和 GitHub Api,无需本地生成静态文件或搭建服务器的博客, 使用用途:便于随时任意设备查看 github 上的文章笔记。
Demo
Features
- 使用 create-react-app cli 构建
- React + React-Router + RxJS
- Hosting on GitHub Pages
- SessionStorage cache(使用 axios 拦截请求,并 api 数据保存到 sessionStroge 中,防止多次访问,以及页面刷新数据丢失问题)
Develop and Use
约定
github 建立自己的 blog 仓库,本项目默认取根目录为 Tabs 组件 tab 名,故约定俗成:在根目录建立文件夹用以区分文章类别
文章目录是抓取内容的 H 标签
配置 config 文件
注意: 使用前需要配置 src/config.js
文件,配置自己成 blog。
config.js
//前端基本配置:
//获取近期更新提交,默认近一个月
recentTMonth: 1,
//配置忽略的tab
ignoreDir: ['image'],
//首页 Others 板块配置,可配置你特别显示的文章
others:[
{key: '项目介绍以及地址', path: '其他/react-laoergege-blog 项目介绍.md'},
{key: '求职简历', path: '其他/简历.md'},
{key: '社交联系', path: '其他/concat.md'}
],
//github基本配置:
//文章仓库
repo: 'laoergege-blog',
//gittalk基本配置:
//Github Application Client ID
clientID: '49ecffd2b6139e31b3aa',
//Github Application Client Secret
clientSecret: 'f79a9c45f39b745f8ce4a66956949300fc0d4c14',
//评论仓库
commentRepo: 'laoergege-blog',
//仓库所有者
owner: 'laoergege',
//Github repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
admin: ['laoergege']
复制代码
关于 OAuth应用程序 注册请点击这里申请。
创建 github page
请参考这里。
开发
# Install dependencies
npm install
# Develop with hot reload
npm start
# Lint and Test
npm run test
# build
npm run build
复制代码
问题
关于 github api 访问限制次数
开发过程有可能频繁访问 github api,对于过度的访问会被 github 禁止(状态码为 403),大家可以查看 github 官方文档 Rate limiting,If your OAuth application needs to make unauthenticated calls with a higher rate limit, you can pass your app's client ID and secret as part of the query string.
你可以把你 client ID 和 secret 作为请求参数,但是介于本项目只有客户端,并没有可信的服务端,所以不建议把 client ID 和 secret 放在客户端,一般使用来说,github 提供次数是够用的。