能否在GitHub Pages中使用EJS文件？含后端数据的网站部署求助

GitHub Pages确实仅支持静态文件，无法处理EJS这类需要服务器端渲染的模板。针对你遇到的渲染错误（因后端数据库传参导致），可以按以下几种思路解决：

1. 预渲染静态HTML（适合数据可提前获取的场景） #

如果你的数据库数据是静态的、或可以在本地提前拉取，可通过脚本在本地完成EJS渲染，生成纯静态HTML后再部署到GitHub Pages：

• 安装EJS的npm包：npm install ejs
• 编写Node.js脚本，先拉取数据库数据，再用EJS渲染模板生成HTML文件：

  const ejs = require('ejs');
  const fs = require('fs');
  const path = require('path');
  
  // 替换为你的数据库数据获取逻辑
  async function fetchDataFromDB() {
    // 示例：用SDK查询数据库，返回数据对象
    return {
      products: [{ id: 1, name: '商品A', price: 99 }],
      user: { name: '测试用户' }
    };
  }
  
  async function renderStaticPages() {
    const pageData = await fetchDataFromDB();
    // 渲染EJS模板
    const htmlContent = await ejs.renderFile('./views/index.ejs', pageData);
    // 将生成的HTML写入静态目录（比如dist）
    fs.mkdirSync('./dist', { recursive: true });
    fs.writeFileSync('./dist/index.html', htmlContent);
  }
  
  renderStaticPages();
  

• 运行脚本生成静态文件后，将dist目录下的文件提交到GitHub，设置GitHub Pages的部署源为该目录即可。

2. 前端动态渲染数据（适合数据需要实时更新的场景） #

放弃服务器端EJS渲染，将页面改为静态HTML，通过前端JS异步获取数据并渲染：

• 将EJS模板中的后端变量替换为前端DOM占位符，比如：

  <div id="product-list"></div>
  

• 编写前端JS脚本，调用API（或静态JSON文件）获取数据后渲染页面：

  async function loadAndRenderData() {
    try {
      // 调用你的后端API获取数据，或读取静态JSON文件
      const response = await fetch('https://your-api-url/products');
      const products = await response.json();
      
      const container = document.getElementById('product-list');
      products.forEach(product => {
        const item = document.createElement('div');
        item.innerHTML = `<h4>${product.name}</h4><p>价格：${product.price}元</p>`;
        container.appendChild(item);
      });
    } catch (err) {
      console.error('数据加载失败:', err);
    }
  }
  
  // 页面加载完成后执行渲染
  window.addEventListener('load', loadAndRenderData);
  

• 把静态HTML、JS文件直接部署到GitHub Pages即可，数据由前端动态拉取。

3. 更换支持服务器端渲染的托管平台 #

如果必须保留EJS后端渲染+数据库交互的逻辑，GitHub Pages无法满足需求，可更换到Vercel、Netlify、Heroku等支持Node.js后端的托管平台，这些平台可以直接运行你的Express（或其他Node框架）服务器，处理EJS渲染和数据库请求。

内容的提问来源于stack exchange，提问作者cihan