Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imcuttle/isomorphic-blog
isomorphic-blog based on react redux router / node
https://github.com/imcuttle/isomorphic-blog
blog isomorphic react redux seo
Last synced: 29 days ago
JSON representation
isomorphic-blog based on react redux router / node
- Host: GitHub
- URL: https://github.com/imcuttle/isomorphic-blog
- Owner: imcuttle
- License: mit
- Created: 2017-02-08T20:41:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T14:15:44.000Z (almost 3 years ago)
- Last Synced: 2024-10-16T06:14:11.818Z (about 1 month ago)
- Topics: blog, isomorphic, react, redux, seo
- Language: JavaScript
- Homepage:
- Size: 43.9 MB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Isomorphic Blog (For SEO)
http://maxyu.top
# 怎么使用
```
git clone https://github.com/moyuyc/isomorphic-blog.git
cd isomorphic-blog
npm install && npm start
```
# 基于...
## 前
`react/react-router/redux/webpack/`
## 后
`express/marked/moka-cli/babel/react/react-router/`
# 文章
学生时代最后一个学期的前夕（明天就回学校了）。
完成了[个人博客](http://maxyu.top)的“换血”，页面风格没什么大的改版，**重点是在后端数据接口的开发设计，和前端代码的重构，加上了 react 动态加载多说评论系统（使用 redux 分离数据逻辑处理代码），也加上了服务器渲染，都是为了 SEO 和首屏渲染！**
**地址: [http://maxyu.top](http://maxyu.top)**
**仓库地址: [isomorphic-blog](https://github.com/moyuyc/isomorphic-blog)**
感谢陈老板的服务器！
总结下开发过程中学习到的东西或者坑！
## 学习的总结
### node模块寻找
对于该项目，前后端都需要 node package，所以对于项目包的管理是否重要！
如下文件结构
```
blog/
├── backend/
│ ├── a.js
│ └── node_modules/ # module => express
├── frontend/
│ ├── b.js
│ └── node_modules/ # module => react
├── outter.js
└── node_modules/ # module => jquery
```
- outter.js
```javascript
require('express');
// Error: Cannot find module
require('react');
// Error: Cannot find module
require('jquery');
```
- backend/a.js
```javascript
require('express');
require('react');
// Error: Cannot find module
require('jquery');
```
- frontend/b.js
```javascript
require('express');
// Error: Cannot find module
require('react');
require('jquery');
```
如上各文件的引入包的情况，可知 node 加载非绝对路径或者相对路径的包，是首先加载该文件同级目录 `node_modules/` 寻找，然后依次向父级目录延伸，直到 `/` 根目录。
*其他文件 `.babelrc/.gitignore/.npmignore` 加载方式都是一样的！*
所以我们只需要在项目最外层 install package，书写 .babelrc ...
同时一些 `npm script` 只需要写在项目最外层即可。
只需要在最外层 `npm i cross-env --save`
```
"start": "cross-env NODE_ENV=production node backend/index.js"
"dev": "cross-env NODE_ENV=development node backend/index.js"
"dev:front": "cross-env NODE_ENV=development node frontend/index.js"
```
### node模块缓存清除
由于文章是用 markdown 文件形式存储的，如果每次请求文章内容都需要读取文件的话，简直日狗，电脑硬盘也吃不消。
所以我在服务器启动之前，就进行 markdown 文件遍历解析，保存至内存中，同时监听 markdown 文件夹变化，发生变化就动态更新内存数据。
*插一句！TODO: 感觉可以起个进程单独处理文件遍历解析的工作，用 IPC 进行 JSON 数据（不带 function）传输即可，充分利用多核！*
这样每次请求只需要读取内存就 OK，速度也比较快。
同时还监听了配置文件的变化，变化则需要重新加载，那么就需要清除之前的缓存了。
```
const clearCache = (modulepath) => delete require.cache[require.resolve(modulepath)]
```
如上代码，`require.resolve` 和 `path.resolve` 方法基本一致，都是基于 `process.cwd()` 当前环境路径，解析 `..` `.` 得到绝对路径。
*再插一句！`require("../path")` 中的路径，不是基于 `process.cwd()` 的，而是 `__dirname`*
### 配置文件 json => yaml
配置文件升级成 yaml 格式，yaml 真是方便！json 格式太僵硬了！
### 一些轮子
1. 根据 react-router 自动生成 sitemap ，一切为了 搜！索！
[react-router-sitemap-builder](https://github.com/moyuyc/react-router-sitemap-builder)
2. 更好的阅读体验！解析 markdown & HTML 图像文本，读取 URL 图片数据得到大小，替换文本！
```
=> => =>
```
[markdown-image-size](https://github.com/moyuyc/node-markdown-image-size)
3. react+多说踩坑！
...不知怎么说，总之就是设置各种参数判断是不是脚本加载完成...
具体看代码吧 [react-duoshuo-comment](https://github.com/moyuyc/isomorphic-blog/blob/master/frontend/src/components/DuoshuoComment/index.js)
## 其他的一些
- 发布流程
在本地书写完 markdown 后 => git push 至 github => curl url => 服务器触发 git pull 更新文章 => 文件监听变化 => 更新数据 => 发布成功！
- SEO
谷歌真是技术杠杠的，没几天就可以搜到我的站点了，百度还是没有（都已提交网站和 sitemap.txt/robots.txt）
