React 정적 개인 블 로그 구축

머리말
일 한 지 꽤 되 었 기 때문에 최근 에 배 운 기술 로 블 로 그 를 만들어 자신의 성장 을 기록 하려 고 합 니 다.먼저 자신의 블 로 그 를 내 려 놓 고 여러분 을 환영 합 니 다 ~ 소스 코드 는 github 에서 블 로그 주 소 를 참고 할 수 있 습 니 다: www. yx 319. cn 블 로그 나 여기 서 소통 할 수 있 습 니 다 ~
기술 창고 사용

react (v16): 프로젝트 메 인 프레임 워 크

redux: 상태 관리

react - router v4: 전단 경로

es6: 프로젝트 에 사용 되 는 문법

webpack 3: 포장 도구

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 /
마크 다운 렌 더 링
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   

代码高亮

代码高亮用的是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 설정 을 수정 합 니 다. 기본 루트 / usr / share / nginx / html;루트 / data / ww 로 변경 하기;다음 과 같다.

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

Nginx 유효 설정 다시 시작

nginx -s reload

이때 당신 의 주 소 를 방문 하면 항목 을 볼 수 있 습 니 다!
후기
현재 의 프로젝트 는 아직 완선 되 지 않 은 것 이 많 으 니 나중에 이 프로젝트 를 천천히 개선 하 세 요.(ง •̀_•́)ง