reactjs - jekyllのような静的サイトジェネレーターでreact jsxテンプレートを使用する方法

Question

私はこのような静的サイトを構築します (about.html):

import React from 'react'
import Main from './main'
import {Grid, GridBlock} from '../ui/objects/Grid/Grid'
import Content from '../ui/components/Content/Content'
import RegionIndicator from '../ui/components/RegionIndicator/RegionIndicator'
import Navigation from '../ui/components/Navigation/Navigation'
import Footer from '../ui/components/Footer/Footer'
import Page from '../ui/components/Page/Page' 
import Cover from '../ui/components/Cover/Cover'
import Subscribe from '../ui/components/Subscribe/Subscribe'
import ArticleText from '../ui/components/ArticleText/ArticleText'
import Services from '../ui/components/Services/Services'
import StorySlider from '../ui/components/StorySlider/StorySlider'
import FullCover from '../ui/components/FullCover/FullCover'
import StickyNav from '../ui/components/StickyNav/StickyNav'
import Timeline from '../ui/components/Timeline/Timeline'
import Team from '../ui/components/Team/Team'
import Icon from '../ui/objects/Icon/Icon'
import Input from '../ui/objects/Input/Input'
import Select from '../ui/objects/Select/Select'
import Checkbox from '../ui/objects/Checkbox/Checkbox'
import Textarea from '../ui/objects/Textarea/Textarea'

const toHTML = (text) => ({ __html:text })

@Main
class About extends React.Component {
  render() {
    const root = this.props.config.root
    return (
      <Page navigation={<Navigation root={root}/>}>
        <FullCover 
          image={`${root}/assets/images/about_bg.png`} 
          title="Think big. Act with knowledge."
          text="ACT is the leading public opinion research and strategic consulting company in the Caucasus Region.  Through science and creativity, we provide our client with knowledge, idea and inspiration to become more powerful and create something valuable and important."
          action="Find out More"
        />
        <StickyNav title="About Us" items={[
          {href:'#timeline', title:'Timeline'},
          {href:'#philosophy', title:'Company Philosophy'},
          {href:'#team', title:'Our Team'},
          {href:'#innews', title:'In the News'},
        ]}/>
        <Timeline id="timeline" items={[{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2002',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2002',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2003',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2003',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2003',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2003',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2003',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2003',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2004',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2004',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2004',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2004',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2004',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2005',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2005',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2008',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2008',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2008',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2008',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2009',
          day: '09',
        },]}/>
        <div style={{
          backgroundImage:`url(${root}/assets/images/marketing_expect_bg.png)`,
          backgroundSize:'contain',
          backgroundPosition:'right 0% top',
          backgroundRepeat:'no-repeat'
        }} id="philosophy">
          <Content className="u-padding{Top,Bottom}-{xl,xxl@xs}">
            <h1 className="u-textSize-{xxl,3xl@xs} u-marginBottom-{3xl,xl@xs} u-lineHeight-uno u-width{5/12,6/12@xs}">
              Company Philosophy
            </h1>
            <h2 className="u-lineHeight-s u-textSize-l u-marginBottom-{s,xxl@s} u-width{10/12,6/12@xs}">
              Our mission is to give organizations a clear vision, idea and belief to become better, create something valuable and important. 
            </h2>
            <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-{inlineBlock,none@s}">
              <span className="u-align-middle">Find out More</span>
              <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
            </a>
            <Grid gutter="Wide" className="u-display-{none,flex@s}">
              <GridBlock className="u-size4/12">
                <p className="u-lineHeight-s  u-marginBottom-s">
                  We love what we do and this gives energy to our work, we appreciate and love people, our client companies for which we create product, we love our staff, who are our friends and we enjoy the environment in which these products are created. We take care of each other and the environment where we work. We always protect client’s interests and confidentiality...

                </p>
                <ul>
                  <li>
                    <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                      <span className="u-align-middle">View our Credo</span>
                      <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                    </a>
                  </li>
                  <li>
                    <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                      <span className="u-align-middle">Policy of Cooperation With Clients</span>
                      <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                    </a>
                  </li>
                </ul>
              </GridBlock>
              <GridBlock className="u-size4/12">
                <p className="u-lineHeight-s  u-marginBottom-s">
                  Through science and creativity, we provide our client with knowledge, idea and inspiration to become more powerful and create something valuable and important.
                </p>
                <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                  <span className="u-align-middle">View our Mission</span>
                  <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                </a>
              </GridBlock>
            </Grid>
          </Content>
        </div>
        <Team id="team" members={[{
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {/* @dublicates >>> */
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        },{
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        },{
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isSeeAll: true
        }]}/>       

        <StorySlider id="innews" className="u-marginBottom-xxl" items={[{
          title: 'ACT became the Gold Sponsor of the biggest marketing event - Spotlight. ',
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...',
          image: `${root}/assets/images/story_2_news.png`,
          action: 'Read Full Story',
        }, {
          title: 'Jane M. Smith from Microfinance Solutions',
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.',
          action: 'Find out More',
        }, {
          title: 'Baseline, Monitoring and Evaluation Surveys',
          text: 'The effectiveness of programs and projects is highly determined by adequately assessing the existing situation, formation of right indicators for project evaluation and the monitoring of their implementation.',
          action: 'Read Full Story',
        }]} image={`${root}/assets/images/story_2.png`} title={'Act in the News'}/>

        <Subscribe className="u-marginBottom-xxl"/>
        <Footer root={root}/>
      </Page>
    )
  }
}

export default About

これは、すべてのフロントエンド作業にとって問題なくダンディーです。ビルド プロセスを実行して適切な html に変換します。

しかし、私は静的サイト ジェネレーターのような別のものを試してみたかった: jekyll、ミドルマン。

次を使用して、jekyllにjsxを読み取らせることができました。

require "jekyll-assets"
require "react-jsx-sprockets"

しかし、これはビルド プロセス中に jsx から html ファイルを生成する場合には機能しません。

写真に欠けているものはありますか？これを試しましたか？

基本的には、react をダム テンプレート エンジンとして使用したいと考えています。