Reactは速く静的な個人ブログを作ります.

前言
もう働いています.しばらくの間、最近習った技術を使ってブログを作って自分の成長を記録したいです.まず自分のブログを置いて、皆さんを歓迎します.ソースはgithubでブログの住所を参照できます.www.yx 319.cnはブログかここで交流してください.
技術スタックを使う

react(v 16):プロジェクトのメインフレーム

redux:状態管理

react-router v 4:フロントエンドルーティング

es 6:プロジェクトで使用される文法

webpack 3:包装ツール

ANtd:フロントエンドUIフレーム

Axios:非同期要求データ

eslint:コード規範検査

開発環境を配置する

node公式ダウンロードアドレスをインストールします.nodejs.org/en/

ヤーン

をインストールします.

//      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`"

大域設置公式足場creat-react-ap

//  
npm install -g create-react-app
//    
create-react-app blog
//    
yarn start

プロジェクトUIフレーム
Antdの使い方は公式サイトで詳しく紹介されています.ant.design/index-cn
データソース
このブログのデータはissues APIから来ました.これはdeveloper.githb.com/v 3/issues/です.
markdownレンダリング
gitでmdをどのようにレンダリングするかを調べます.二つのライブラリが使えます.

react-markdown:github.com/rexars/rea…

marked:github.com/chjj/marketここでは主に今回のブログで使われているmarketの使い方を紹介します.

import marked from 'marked';
componentWillMount(){
    marked.setOptions({
    highlight: code => hljs.highlightAuto(code).value,
    });
}
//      DOM   

代码高亮

代码高亮用的是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

サーバにNFinx

をインストールします.

yum install nginx -y

Nging x

を実行します.

nginx

この時にあなたのサイトを訪問すれば、NFinxのテストページが見られます.

静的サーバのアクセスアドレスを設定し、Ngixのデフォルトプロファイル/etc/inx/nginx.com nfを開いて、Ngix構成を修正して、デフォルトのroot/usr/share/nginx/htmlを開く.root/data/www;

listen       80 default_server;
listen       [::]:80 default_server;
server_name  _;
root         /data/www/      ;

Ngix発効構成を再起動する

nginx -s reload

この時にあなたの住所を訪問すればプロジェクトが見られます.
後記
今のプロジェクトにはまだ未完のものがたくさんあります.その後はゆっくりとこのプロジェクトを改善しましょう.(豇・̀_•́)湖南省にある地名