https://github.com/dimaslanjaka/hexo-webpack
generate static site jekyll/hexo/huge markdown posts using webpack and react
https://github.com/dimaslanjaka/hexo-webpack
flowbite flowbite-react github-pages gulp hexo huge jekyll markdown react react-router ssg webpack
Last synced: 3 months ago
JSON representation
generate static site jekyll/hexo/huge markdown posts using webpack and react
- Host: GitHub
- URL: https://github.com/dimaslanjaka/hexo-webpack
- Owner: dimaslanjaka
- License: mit
- Created: 2023-10-15T20:26:49.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-17T14:29:26.000Z (over 2 years ago)
- Last Synced: 2025-02-17T14:14:55.982Z (about 1 year ago)
- Topics: flowbite, flowbite-react, github-pages, gulp, hexo, huge, jekyll, markdown, react, react-router, ssg, webpack
- Language: TypeScript
- Homepage: https://www.webmanajemen.com
- Size: 5.07 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 `` 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
<p align="center">
<img alt="Light" src="https://github.com/dimaslanjaka/hexo-webpack/assets/12471057/0e3b4e79-afa8-4cda-9818-e022bf5bc28d" width="45%" title="editor preview" />
<img alt="Dark" src="https://github.com/dimaslanjaka/hexo-webpack/assets/12471057/747cdc5d-031e-4c69-a62b-d4acce1e4781" width="45%" title="web preview" />
</p>
## Installation
- install
```bash
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
```bash
npx sbg post copy
```
- run standalone scripts
```bash
npx sbg post standalone
```
- mapping source posts
```bash
gulp map
```
- generate routes
> you can override options by cli arguments see: [sample](https://github.com/dimaslanjaka/hexo-webpack/blob/e596be2c5df1a2d53ba0e2e3b3721d3dc8d7a4fa/gulpfile.genr.ts#L17) [complex](https://github.com/dimaslanjaka/hexo-webpack/blob/9d0580c75de9acf19b2c9876886f3df9bb7714f4/gulpfile.genr.ts#L21)
```bash
gulp route
```
## site production build
```bash
yarn run build
```
## watch production build
terminal 1
> listening dist folder at `http://localhost:4000`
```bash
gulp serve
```
terminal 2
> watching `src`, `public`, `source` folders then run build production
```bash
gulp build-watch
```
## Q&A
### Why webpack error file not found
you can noticing webpack to rebuild by
```bash
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) | - |