基于create-react-app构建静态博客

前言： 用过hexo后，我被其强大的功能惊艳到了，于是便想自己也写一个静态博客生成器，并且可以发布到GitHub托管。

首先我们来看下效果图：

具体是怎么实现的呢？

我们通过create-react-app构建react单页应用后，删除了默认创建的js和jsx，自己建立了布局页(Layout.jsx)，其中包含了页头导航(NavBar.jsx)和页尾(Footer.jsx)

export default function Layout(props){

  return (

    <>

      <div className="card bg-base-100 shadow-xl h-container">

        <NavBar />

        {props.children}

      </div>

      <Footer />

    </>

  )

}

这样我们中间内容每次就可以用布局页包裹，例如：

<Layout>

    <div style={{

        padding: "30px"

      }}>

      <div dangerouslySetInnerHTML={createMarkup(html)}></div>

    </div>

  </Layout>

然后我们创建了文章页，分组页，分组下文章，首页

值得关注的是，我通过了axios请求静态markdown文件，再通过Remarkable组件解析成Html，使用react自带属性dangerouslySetInnerHTML显示出来，例如：Article.jsx

import React, {useState, useEffect} from "react"

import Layout from "../widget/Layout"

import axios from "axios"

import {getQueryVariable} from "../utils/commonUtil"

import "../css/typo.css"

import 'highlight.js/styles/atom-one-dark.css';

import "../css/code.css"

const {Remarkable} = require("remarkable");

const hljs = require('highlight.js');

hljs.initHighlighting();

function createMarkup(content) {

  return {__html: content};

}

export default function Article() {

  const [html, setHtml] = useState(<h5>空空如也</h5>);

  useEffect(() => {

    let _id = getQueryVariable("id");

    const fetchData = async () => {

      const posts = (await axios.get("/api/post.json")).data;

      let post = posts.find(h => h.id === Number(_id));

      if (post && post.url) {

        const md = (await axios.get(post.url)).data;

        const mdTemplate = new Remarkable({

          highlight: function(str, lang) {

            if (lang && hljs.getLanguage(lang)) {

              try {

                return hljs.highlight(lang, str).value;

              } catch (err) {}

            }

            try {

              return hljs.highlightAuto(str).value;

            } catch (err) {}

            return "";

          }

        });

        setHtml(mdTemplate.render(md));

      }

    }

    if (_id && _id >= 0) {

      fetchData();

    }

  }, [])

  return (<Layout>

    <div style={{

        padding: "30px"

      }}>

      <div dangerouslySetInnerHTML={createMarkup(html)}></div>

    </div>

  </Layout>)

}

还需要注意的是，react公共静态文件需要放到public目录下，如图：

项目至此，大体就是这样，再通过npm run build就发布了，我们只需要更改api目录下的json文件和md目录下的markdown文件即可自动检索文章和相关配置，项目我推送github了，详情点击https://github.com/cracker-cn/react-static-blog

基于create-react-app构建静态博客的相关教程结束。