Meeken 的杂物间

14 object(s)
 

猫汤博客

一款基于 React、Next.js 的轻博客框架。

猫汤

猫汤是一款我自用的,简洁的、SEO 友好的博客框架,基于 React。


特点

  1. 极简风格,昼夜双版
  2. 文档式阅读体验
  3. 渲染 markdown,无数据库依赖
  4. 速度优于一些 PHP 博客框架
  5. SEO 友好
  6. 自动化部署脚本

技术栈

  1. 页面路由:KoaNext
  2. 页面渲染:Reactantd
  3. 数据同步:mobxnext-mobx-wrapper
  4. 文章处理:showdownmarkdown-parserhighlightjshtml-loader
  5. 网站优化:webpackless

使用说明

下载

$ git clone https://github.com/Meeken1998/maotang
$ cd maotang

安装依赖

$ yarn #推荐使用 yarn 来安装依赖,也可以用 npm install

启动

Linux/Mac 环境

$ yarn dev-server #调试
$ yarn build #编译
$ yarn server

Windows 环境

$ yarn dev-server-win #调试
$ yarn build #编译
$ yarn server-win

使用

网站信息配置

请找到 ./public/static/config/maotang.json,修改网站的配置信息(Next.js 约定中间层与浏览器端共用的静态目录为 public 目录。

{
  "site": {
    "title": "猫汤",
    "description": "喜欢彦彦猫的前端程序员",
    "keywords": "随笔,前端,日记"
  },

  "menu": [
    {
      "href": "/",
      "context": "首页"
    },
    {
      "href": "/archive",
      "context": "归档"
    },
    {
      "href": "/search",
      "context": "搜索"
    },
    {
      "href": "/category/项目",
      "context": "项目"
    }
  ]
}

新建/修改文章

或者使用更优雅的自动化部署脚本(开发中 XD)。

更改图标与网站头部信息

二次开发告知

首先,非常感谢您关注猫汤博客。您可以任意使用这份代码,同时请务必在网站中加入这个仓库的地址。
由于猫汤目前暂且是鄙人自用,很多功能都没有添加进去(如:博客后台、自动化 CLI 工具、图片管理等)。
如您需要使用这份代码,而在使用过程中遇到了困难和疑惑,可以提 issue 或联系 meeken#authing.cn。

这份代码比较适合 React 与同构知识初学者使用,欢迎 star,欢迎 fork。