Hexo with webpack

generate static site jekyll/hexo/huge markdown posts using webpack

Advantages

• reduce site size (useful for github pages with limit 1GB only)
• SEO improvement by setting html metadata then add <script> tag to main bundle.js

Features

• markdown string to react jsx element converter
• html string to react jsx element converter

Structure folders and files

• .cache webpack cache directory and post map json from gulp map
• source all page assets and markdowns (ex: source/about.md -> http://example.com/about)
• public all static assets (no markdown should be processed)
• src all layout react, scss, css
• src-posts source markdown post
• source/_posts auto generated post from src-posts using sbg post copy
• tmp temp folder
• tmp/meta all parsed metadata post
• tmp/static all SEO optimized static html

  all generated html should be processed with gulp build-html later

• _config.json auto generated file from _config.yml with additional properties
• routes.json auto generated file from all mapped posts and pages

   

Installation

• install

yarn install
echo {} > _config.json
echo [] > routes.json
mkdir -p tmp
mkdir -p tmp/meta
mkdir -p tmp/static
mkdir -p src/posts

• copy source post

npx sbg post copy

• run standalone scripts

npx sbg post standalone

• mapping source posts

gulp map

• generate routes

you can override options by cli arguments see: sample complex

gulp route

site production build

yarn run build

watch production build

terminal 1

listening dist folder at http://localhost:4000

gulp serve

terminal 2

watching src, public, source folders then run build production

gulp build-watch

Q&A

Why webpack error file not found

you can noticing webpack to rebuild by

gulp notice

RoadMap

Status	Goal	Date
☑	sync configuration setup webpack, typescript, babel, react	09/2023
☑	create markdown to JSX react converter	09/2023
☑	create SEO static html for posts	09/2023
☑	mapping and populate markdown posts	09/2023
☐	mapping and populate markdown pages from source folder	-
☐	complete layout using flowbite-react	-
☐	generate yoast seo sitemaps	-
☐	generate atom/feeds	-
☐	localization (multi languages)	-