前几周开始了校园技术运营官的实习，正好重启咕了好久的博客计划😁（一直没正式开启过hhh）

架构

在之前无数次“demo”实验之后，确定使用Ghost博客系统。

目前后端用的是腾讯云的数据库（今年618打折买的）+学生机，学生机上安装Docker跑Ghost镜像。

前端暂时是自己写得（调用Ghost的API）。架构是umi + tailwindcss

后端

1. 安装docker、docker-compose

2. 新建ghost.yml

   services:
     ghost:
       image: ghost:4-alpine
       restart: always
       ports:
         - 8888:2368
       volumes:
         - ./content:/var/lib/ghost/content
       environment:
         # see https://ghost.org/docs/config/#configuration-options
         database__client: mysql
         database__connection__host: *数据库地址*
         database__connection__user: *数据库用户名*
         database__connection__password: *数据库密码*
         database__connection__database: *数据库表名*
         # this url value is just an example, and is likely wrong for your environment!
         url: https://yoursite.com
         # contrary to the default mentioned in the linked documentation, this image defaults to NODE_ENV=production (so development mode needs to be explicitly specified if desired)
         #NODE_ENV: development
   

3. 运行

   docker-compose -f ghost.yml up -d
   

4. 打开 https://yoursite.com/ghost/ 进行配置

前端

1. 跟着umi官方教程创建一个umi项目，添加umi-plugin-tailwindcss插件。

2. 给Ghost Content API设置一个统一的调用函数

   // utils.jsx
   import { request as req } from 'umi';
   
   export const request = (url, options) => {
     return req(`https://yoursite.com/ghost/api/v3/content${url}`, {
         ...options,
         params: {
           key: '*访问秘钥*',
           ...options?.params,
         },
       },
     );
   };
   

3. 设置页面路由

   import { defineConfig } from 'umi';
   
   export default defineConfig({
     nodeModulesTransform: {
       type: 'none',
     },
     headScripts: [],
     routes: [
       {
         path: '/',
         component: '@/pages/layout',
         routes: [
           {
             path: '/',
             component: '@/pages/index'
           },
           {
             path: '/posts/:id',
             component: '@/pages/posts/index'
           },
           {
             path: '/:slug',
             component: '@/pages/posts/index'
           }
         ]
       },
     ],
     fastRefresh: {},
   });
   

4. 首页

   访问GET /posts/?include=tags,authors获取所有文章，并进行解析

   

5. 文章页

   访问GET /posts/:post_id和GET /posts/slug/:slug获取文章，并进行解析

   
   

结束&规划

目前PC端显示基本没问题了，但是手机还没适配😂下周优化一下手机版，再给一些国内网站做点适配（例如在文章中插入百度网盘模块、网易云音乐播放器、哔哩哔哩视频播放器）

现在文章中显示代码块的功能是用jQuery🌿进React的🤣，如果有什么更好的方案，欢迎讨论呀~😉

后续可能会开源前端项目吧（跪求各位大佬轻喷Orz😆）

我的Github、微信开放社区、网站