React快速搭建静态个人博客

前言

已经工作了有一段时间了，于是就想用最近学的一些技术搭建了一个博客记录一下自己成长。
先放下自己的博客，欢迎大家来看看~
源码在github可以参考
博客地址：www.yx319.cn
可以在博客或者这里交流一下哦~

---

使用技术栈

• react (v16) ：项目主框架
• redux：状态管理
• react-router v4：前端路由
• es6：项目中用到的语法
• webpack3：打包工具
• antd：前端UI框架
• Axios：异步请求数据
• eslint：代码规范检查

---

部署开发环境

• 安装node
  官方下载地址：nodejs.org/en/
• 安装yarn

//首先如果没有Homebrew包管理工具需要先下载此工具
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
//通过Homebrew安装yarn
brew install yarn
//设置yarn为全局变量
export PATH="$PATH:`yarn global bin`"
复制代码

• 全局安装官方脚手架create-react-app

//安装
npm install -g create-react-app
//创建项目
create-react-app blog
//打开项目
yarn start
复制代码

项目UI框架

使用的是Antd 使用方法在官网有很详细的介绍：ant.design/index-cn

数据源

此次博客数据源来自于issues
API在这：developer.github.com/v3/issues/

markdown 渲染

在git上查找如何渲染md文档有两个库可以使用

• react-markdown：github.com/rexxars/rea…
• marked：github.com/chjj/marked
  这里主要介绍一下本次博客使用的marked的使用方法

import marked from 'marked';
componentWillMount(){
    marked.setOptions({
    highlight: code => hljs.highlightAuto(code).value,
    });
}
//把字符串插入DOM元素中
<div dangerouslySetInnerHTML={{ __html: 文档字符串 }} />
复制代码

代码高亮

代码高亮用的是highlight.js：github.com/isagalaev/h…
它和marked可以无缝衔接~
只需要这样既可：

import hljs from 'highlight.js';
marked.setOptions({
  highlight: code => hljs.highlightAuto(code).value,
});
复制代码

highlight.js是支持多种代码配色风格的，可以在css文件中进行切换：

@import '~highlight.js/styles/atom-one-dark.css';
复制代码

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

项目上线

该博客是Nginx实现静态资源服务器的，下面讲一下如何在服务器上搭建静态网站，以及静态部署。

• 打包项目

cd 项目文件夹
yarn build
复制代码

• 服务器上安装Nginx

yum install nginx -y
复制代码

• 运行Nginx

nginx
复制代码

这个时候访问你的网站就可以看到Nginx的测试页面啦~

• 配置静态服务器的访问地址
  打开 Nginx 的默认配置文件 /etc/nginx/nginx.conf ，修改 Nginx 配置，将默认的root /usr/share/nginx/html; 修改为: root /data/www;如下：

listen       80 default_server;
listen       [::]:80 default_server;
server_name  _;
root         /data/www/你的项目文件;
复制代码

• 重启Nginx生效配置

nginx -s reload
复制代码

此时访问你的地址就能够看到项目啦！

---

后记

目前的项目还有很多未完善的，之后慢慢改进这个项目吧。
(ง •̀_•́)ง