{"id":17242833,"url":"https://github.com/imcuttle/isomorphic-blog","last_synced_at":"2026-04-13T07:02:43.498Z","repository":{"id":17215883,"uuid":"81373917","full_name":"imcuttle/isomorphic-blog","owner":"imcuttle","description":"isomorphic-blog based on react redux router / node","archived":false,"fork":false,"pushed_at":"2022-01-07T14:15:44.000Z","size":46059,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T02:34:02.231Z","etag":null,"topics":["blog","isomorphic","react","redux","seo"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imcuttle.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-08T20:41:40.000Z","updated_at":"2017-03-26T14:22:55.000Z","dependencies_parsed_at":"2022-08-07T08:15:53.725Z","dependency_job_id":null,"html_url":"https://github.com/imcuttle/isomorphic-blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fisomorphic-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fisomorphic-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fisomorphic-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fisomorphic-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/isomorphic-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245585798,"owners_count":20639671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","isomorphic","react","redux","seo"],"created_at":"2024-10-15T06:14:12.362Z","updated_at":"2026-04-13T07:02:43.416Z","avatar_url":"https://github.com/imcuttle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Isomorphic Blog (For SEO)\n\nhttp://maxyu.top\n\n# 怎么使用\n\n```\ngit clone https://github.com/moyuyc/isomorphic-blog.git\ncd isomorphic-blog\nnpm install \u0026\u0026 npm start\n```\n\n# 基于...\n\n## 前\n\n`react/react-router/redux/webpack/`\n\n## 后\n\n`express/marked/moka-cli/babel/react/react-router/`\n\n# 文章\n\n学生时代最后一个学期的前夕（明天就回学校了）。\n\n完成了[个人博客](http://maxyu.top)的“换血”，页面风格没什么大的改版，**重点是在后端数据接口的开发设计，和前端代码的重构，加上了 react 动态加载多说评论系统（使用 redux 分离数据逻辑处理代码），也加上了服务器渲染，都是为了 SEO 和首屏渲染！**\n\n**地址: [http://maxyu.top](http://maxyu.top)**\n\n**仓库地址: [isomorphic-blog](https://github.com/moyuyc/isomorphic-blog)**\n\n感谢陈老板的服务器！\n\n总结下开发过程中学习到的东西或者坑！\n\n## 学习的总结\n\n### node模块寻找\n\n对于该项目，前后端都需要 node package，所以对于项目包的管理是否重要！\n\n如下文件结构\n```\nblog/\n├── backend/\n│   ├── a.js\n│   └── node_modules/ # module =\u003e express\n├── frontend/\n│   ├── b.js\n│   └── node_modules/ # module =\u003e react\n├── outter.js\n└── node_modules/  # module =\u003e jquery\n```\n\n- outter.js\n```javascript\nrequire('express');\n// Error: Cannot find module\nrequire('react');\n// Error: Cannot find module\nrequire('jquery');\n```\n\n- backend/a.js\n```javascript\nrequire('express');\nrequire('react');\n// Error: Cannot find module\nrequire('jquery');\n```\n\n- frontend/b.js\n```javascript\nrequire('express');\n// Error: Cannot find module\nrequire('react');\nrequire('jquery');\n```\n\n如上各文件的引入包的情况，可知 node 加载非绝对路径或者相对路径的包，是首先加载该文件同级目录 `node_modules/` 寻找，然后依次向父级目录延伸，直到 `/` 根目录。\n\n*其他文件 `.babelrc/.gitignore/.npmignore` 加载方式都是一样的！*\n\n所以我们只需要在项目最外层 install package，书写 .babelrc ...\n\n同时一些 `npm script` 只需要写在项目最外层即可。\n只需要在最外层 `npm i cross-env --save`\n\n```\n\"start\": \"cross-env NODE_ENV=production node backend/index.js\"\n\"dev\": \"cross-env NODE_ENV=development node backend/index.js\"\n\"dev:front\": \"cross-env NODE_ENV=development node frontend/index.js\"\n```\n\n### node模块缓存清除\n\n由于文章是用 markdown 文件形式存储的，如果每次请求文章内容都需要读取文件的话，简直日狗，电脑硬盘也吃不消。\n\n所以我在服务器启动之前，就进行 markdown 文件遍历解析，保存至内存中，同时监听 markdown 文件夹变化，发生变化就动态更新内存数据。\n\n*插一句！TODO: 感觉可以起个进程单独处理文件遍历解析的工作，用 IPC 进行 JSON 数据（不带 function）传输即可，充分利用多核！*\n\n这样每次请求只需要读取内存就 OK，速度也比较快。\n\n同时还监听了配置文件的变化，变化则需要重新加载，那么就需要清除之前的缓存了。\n\n```\nconst clearCache = (modulepath) =\u003e delete require.cache[require.resolve(modulepath)]\n```\n\n如上代码，`require.resolve` 和 `path.resolve` 方法基本一致，都是基于 `process.cwd()` 当前环境路径，解析 `..` `.` 得到绝对路径。\n\n*再插一句！`require(\"../path\")` 中的路径，不是基于 `process.cwd()` 的，而是 `__dirname`*\n\n\n### 配置文件 json =\u003e yaml\n\n配置文件升级成 yaml 格式，yaml 真是方便！json 格式太僵硬了！\n\n\u003cimg src=\"http://obu9je6ng.bkt.clouddn.com/FgyP1Ozhv0F8pA14FosHGobvpP_v?imageslim\" width=\"1003\" height=\"402\"/\u003e\n\n### 一些轮子\n\n1. 根据 react-router 自动生成 sitemap ，一切为了 搜！索！\n[react-router-sitemap-builder](https://github.com/moyuyc/react-router-sitemap-builder)\n\n2. 更好的阅读体验！解析 markdown \u0026 HTML 图像文本，读取 URL 图片数据得到大小，替换文本！\n\n```\n![](http://obu9je6ng.bkt.clouddn.com/FgyP1Ozhv0F8pA14FosHGobvpP_v?imageslim)\n=\u003e =\u003e =\u003e\n\u003cimg src=\"http://obu9je6ng.bkt.clouddn.com/FgyP1Ozhv0F8pA14FosHGobvpP_v?imageslim\" width=\"1003\" height=\"402\"/\u003e\n```\n\n[markdown-image-size](https://github.com/moyuyc/node-markdown-image-size)\n\n3. react+多说踩坑！\n\n\u003cimg src=\"http://obu9je6ng.bkt.clouddn.com/FmY9Gu9I9nPbZE-40BgH8NRMd8tu?imageslim\" width=\"842\" height=\"577\"/\u003e\n\n...不知怎么说，总之就是设置各种参数判断是不是脚本加载完成...\n\n具体看代码吧 [react-duoshuo-comment](https://github.com/moyuyc/isomorphic-blog/blob/master/frontend/src/components/DuoshuoComment/index.js)\n\n\n## 其他的一些\n\n- 发布流程\n\n在本地书写完 markdown 后 =\u003e git push 至 github =\u003e curl url =\u003e 服务器触发 git pull 更新文章 =\u003e 文件监听变化 =\u003e 更新数据 =\u003e 发布成功！\n\n- SEO\n\n谷歌真是技术杠杠的，没几天就可以搜到我的站点了，百度还是没有（都已提交网站和 sitemap.txt/robots.txt）\n\u003cimg src=\"http://obu9je6ng.bkt.clouddn.com/FocOlJ-S5EvxL2Qrc00zWNif6kyy?imageslim\" width=\"580\" height=\"628\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fisomorphic-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Fisomorphic-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fisomorphic-blog/lists"}