Skip to content

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

License

Notifications You must be signed in to change notification settings

dimaslanjaka/hexo-webpack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Light     Dark

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) -