initial
This commit is contained in:
nm1
commit
74ae93a96e
1 changed files with 94691 additions and 0 deletions
|
|
@ -0,0 +1,155 @@
|
|||
static html generator
|
||||
- https://github.com/react-static/react-static
|
||||
- Consider using static site generators like Jekyll, Hugo, or Gatsby. While Gatsby is built on React, it allows you to build static sites where the final output is plain HTML, CSS, and JavaScript.
|
||||
- https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
|
||||
https://github.com/vercel/next.js/discussions/44641 : for handling slugs
|
||||
|
||||
|
||||
- also use strapi : using nodejs to generate static files
|
||||
- using jsdom
|
||||
- sveltekit : svelte:sveletekit :: react:next
|
||||
- React-Snap for converting existing react app by pre-rendering them. limit : not for multiple pages
|
||||
- or using eleventy-plugin-react when using 11ty
|
||||
https://github.com/kaicataldo/eleventy-plugin-
|
||||
demo : endeavouros/Videos/imp/others/11ty/react/
|
||||
|
||||
|
||||
Converting a React or any other JavaScript framework code to static HTML typically involves pre-rendering or server-side rendering (SSR). This can be particularly useful for SEO purposes or for situations where a static file is needed. Here are steps to convert React code to static HTML:
|
||||
|
||||
### Method 1: Using ReactDOMServer for Static HTML Export
|
||||
|
||||
1. **Install Necessary Libraries**:
|
||||
You will need to have `react`, `react-dom`, and `react-dom/server` installed. If you are not working within an existing React app, create one using Create React App.
|
||||
|
||||
```sh
|
||||
npx create-react-app my-static-site
|
||||
cd my-static-site
|
||||
npm install react react-dom react-dom/server
|
||||
```
|
||||
|
||||
2. **Create a Renderer Script**:
|
||||
Make a new file, `render.js`, at the root of your project.
|
||||
|
||||
```javascript
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const React = require('react');
|
||||
const ReactDOMServer = require('react-dom/server');
|
||||
const App = require('./src/App').default;
|
||||
|
||||
const html = ReactDOMServer.renderToStaticMarkup(
|
||||
React.createElement(App)
|
||||
);
|
||||
|
||||
const fullHtml = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My Static Site</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">${html}</div>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
fs.writeFileSync(
|
||||
path.resolve(__dirname, 'build', 'index.html'),
|
||||
fullHtml,
|
||||
'utf8'
|
||||
);
|
||||
```
|
||||
|
||||
3. **Modify Your App Component**:
|
||||
Ensure that your React components are defined in a way that makes them easily rendered to static HTML. For instance, if you have any runtime-specific logic, you may need to adjust it.
|
||||
|
||||
4. **Run the Renderer Script**:
|
||||
Run the script to generate the static HTML file.
|
||||
|
||||
```sh
|
||||
node render.js
|
||||
```
|
||||
|
||||
5. **View the Output**:
|
||||
Check the `build` directory for your `index.html`. This file is now pure HTML
|
||||
and can be deployed as a static site.
|
||||
|
||||
### Method 2: Using Next.js for Static Site Generation
|
||||
|
||||
Using Next.js, a React framework, it is easier to pre-render static HTML:
|
||||
|
||||
1. **Create a Next.js App**:
|
||||
|
||||
```sh
|
||||
npx create-next-app my-static-site
|
||||
cd my-static-site
|
||||
```
|
||||
|
||||
2. **Set Up Static Generation**:
|
||||
By default, pages in Next.js will be pre-rendered as static HTML. Define your pages in the `pages` directory.
|
||||
|
||||
3. **Create Pages**:
|
||||
Example of a simple index page in `pages/index.js`:
|
||||
|
||||
```jsx
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Welcome to my Static Site</h1>
|
||||
<p>This is a static HTML page generated by Next.js.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
4. **Build the Site**:
|
||||
Build your site for production:
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
npm run export
|
||||
```
|
||||
|
||||
5. **View the Output**:
|
||||
The HTML files will be in the `out` directory, which can be deployed statically.
|
||||
|
||||
### Method 3: Using Gatsby for Static Site Generation
|
||||
|
||||
1. **Create a Gatsby Site**:
|
||||
|
||||
```sh
|
||||
npx gatsby new my-static-site
|
||||
cd my-static-site
|
||||
```
|
||||
|
||||
2. **Create Pages**:
|
||||
Define your pages in the `src/pages` directory. An example `index.js` file:
|
||||
|
||||
```jsx
|
||||
import React from "react";
|
||||
|
||||
const Home = () => (
|
||||
<div>
|
||||
<h1>Welcome to my Static Site</h1>
|
||||
<p>This is a static HTML page generated by Gatsby.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
3. **Build the Site**:
|
||||
Build your Gatsby site:
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
4. **View the Output**:
|
||||
The generated HTML files are in the `public` directory.
|
||||
|
||||
### Conclusion
|
||||
You can choose an appropriate method based on your existing setup and requirements. Using frameworks like Next.js or Gatsby, which are designed for static site generation, generally makes the process simpler and more efficient.
|
||||
Loading…
Reference in a new issue