前言
已经工作了有一段时间了，于是就想用最近学的一些技术搭建了一个博客记录一下自己成长。
先放下自己的博客，欢迎大家来看看~
源码在github可以参考
博客地址：www.yx319.cn
可以在博客或者这里交流一下哦~
使用技术栈
- react (v16) ：项目主框架
- redux：状态管理
- react-router v4：前端路由
- es6：项目中用到的语法
- webpack3：打包工具
- antd：前端UI框架
- Axios：异步请求数据
- eslint：代码规范检查
部署开发环境
- 安装node
官方下载地址：https://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 使用方法在官网有很详细的介绍：https://ant.design/index-cn
数据源
此次博客数据源来自于issues
API在这：https://developer.github.com/v3/issues/
markdown 渲染
在git上查找如何渲染md文档有两个库可以使用
- react-markdown：https://github.com/rexxars/react-markdown
- marked：https://github.com/chjj/marked
这里主要介绍一下本次博客使用的marked的使用方法
import marked from 'marked';
componentWillMount(){
marked.setOptions({
highlight: code => hljs.highlightAuto(code).value,
});
}
//把字符串插入DOM元素中
<div dangerouslySetInnerHTML={{ __html: 文档字符串 }} />
代码高亮
代码高亮用的是highlight.js：https://github.com/isagalaev/highlight.js
它和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';
在这可以看到每种语言的高亮效果和配色风格：https://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
此时访问你的地址就能够看到项目啦！
后记
目前的项目还有很多未完善的，之后慢慢改进这个项目吧。
(ง •̀_•́)ง
