React + Ant Design 搭建个人博客

react框架学的差不多了，就想搭建一个博客，沉淀一下！记录走过的点点滴滴！

博客主要运用技术栈：

• react : 项目主框架
• redux : 状态管理
• reacr-router : 前端路由控制
• es6 : 项目中的JS语法
• Ant Design : 前端UI框架
• Axios : 异步请求数据处理

部署开发环境

• 安装node环境，官方地址：https://nodejs.org/en/ 。node中自带npm,无需另行安装。
• 全局安装官方提供的手脚架create-react-app

npm install -g create-react-app

//创建project

create-react-app  projectName

//打开项目

npm start

博客的UI框架

使用Antd： https://ant.design/index-cn

博客数据源暂时来自于 issues

API：https://developer.github.com/v3/issues/

markdown渲染

运用了marked：https://github.com/chjj/marked

在博客中使用marked的语法：

import marked from  'marked';

commponentWillMount(){
    marked.setOptions({
        highlight: code => hljs.highlightAuto(code).value,
    });
}

//把字符串插入DOM元素
<div dangerouslySetInnerHTML={{ __html: marked(item.body) }} />

代码高亮

代码高亮用的是highlight.js：https://github.com/isagalaev/highlight.js 。

//npm 安装
npm install highlight.js

highlight.js支持多种代码的颜色风格，可以在css中随意切换

@import '~highlight.js/styles/github.css';

在这可以看到每种语言的高亮效果和配色风格：https://highlightjs.org/

项目打包上线：npm run build