标签: netlify

我正在尝试使用 netlify 来托管静态站点。我正在使用该站点构建站点，wget -mk http://hostname/因此我获得了大量静态文件，并重写了链接。

我想将他们推到 netlify 并让该网站托管。

以 .html 结尾的页面被视为 html 文件并正确显示。

具有“漂亮网址”之类的页面/about被视为文本文件，并显示 HTML 标记。

除非我添加重写，否则我无法真正重命名所有这些文件，因为我想保留指向该站点的外部链接。

我尝试设置一个_headers文件，但不清楚操作的顺序是什么。这是一个示例_headers文件：

/*.css
  Content-Type: text/css
/*.js
  Content-Type: text/javascript
/*.jpg
  Content-Type: image/jpg
/*.jpeg
  Content-Type: image/jpg
/*.png
  Content-Type: image/png
/*.gif
  Content-Type: image/gif
/*
  Content-Type: text/html

这将所有内容视为 text/html。我可以删除最后一行，但是漂亮的文件会再次被视为文本。

是迭代所有文件并使用完整路径将它们标记为 html 的唯一解决方案，这将使_headers文件看起来像这样：

/about
  Content-Type: text/html
/contact
  Content-Type: text/html
...

我查看了 netlify 文档并用谷歌搜索，但找不到任何有用的东西。

我正在为一家餐馆制作一个网站，我想制作一个预订表格，人们可以在其中输入他们的姓名、预订时间等。当他们提交此表格时，我想向我的电子邮件发送电子邮件。

我知道有一项名为 Zapier 的服务可以让您做到这一点，但我正在寻找免费的东西（在这种情况下，Zapier 免费套餐每月只有 100 个任务，这可能还不够）。

我希望它看起来像这样：

<form>
    <input type="text" placeholder="Your name" />
    <!-- and some other inputs -->
    <input type="submit" value="Send" />
    <!-- after this send an email with entered information -->
</form>

我正在闪存驱动器 E 上使用 node v11.5 和 npm 6.4.1，在 win 7 上，我正在尝试安装最新的 netlify cli。在https://cli.netlify.com/getting-started之后，我有：

$ npm install netlify-cli -g
npm ERR! code EINVAL
npm ERR! EINVAL: invalid argument, read

错误日志显示了几乎相同的内容：

12961 verbose stack Error: EINVAL: invalid argument, read
12961 verbose stack     at E:\nodejs\node_modules\npm\node_modules\gentle-fs\lib\rm.js:245:7
12961 verbose stack     at E:\nodejs\node_modules\npm\node_modules\gentle-fs\node_modules\iferr\index.js:13:50
12961 verbose stack     at E:\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:287:18
12961 verbose stack     at FSReqCallback.oncomplete (fs.js:161:5)
12962 verbose cwd E:\myproj
12963 verbose Windows_NT 6.1.7601
12964 verbose argv "E:\\nodejs\\node.exe" "E:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "netlify-cli" "-g"
12965 verbose node v11.5.0 …

我一生都无法弄清楚这一点。以下站点托管在 Netlify 上并启用了预渲染。检查页面时，所有 OG 标签都是正确的。这些标签是使用 react-helmet 注入的。

https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays

在 Facebook 调试器上抓取上述 URL 时，它会响应：

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

唯一应该存在的错误/警告之一是app_id，我不在乎。

我已经等了 48 多个小时才清除缓存，我尝试使用附加到 URL 的查询字符串进行抓取，并且图像具有绝对 URL。但即使是描述标签也没有通过。

请使用 react-helmet 和 Netlify 的人对这个问题有明确的认识吗？

我构建了一个 Gatsby 站点，该站点使用我从 npm 包“google-maps-react”中获取的 google maps 组件。在我的本地环境中一切正常，但是当我部署到 Netlify 时，我收到“Google Maps JavaScript API 错误：InvalidKeyMapError”。

我完成了确保我的 API 密钥已正确注册和激活的所有步骤。我确保在 Netlify UI 中将 API 密钥声明为环境变量，并在我的组件中使用“process.env.GOOGLE_API_KEY”访问它。

import React from "react"
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react"

export class MapContainer extends React.Component {


  render() {

    return (
      <Map google={this.props.google} zoom={14} initialCenter={{lat:37.769461, lng:-122.251831}}>
        <Marker onClick={this.onMarkerClick} name={"Current location"} />
        <InfoWindow onClose={this.onInfoWindowClose}>
          <div>
            ...some code
          </div>
        </InfoWindow>
      </Map>
    )
  }
}

export default GoogleApiWrapper({
    apiKey: (`${process.env.GOOGLE_API_KEY}`)
  })(MapContainer)

从我读过的内容来看，我需要在 Netlify UI 中声明 GOOGLE_API_KEY 环境变量才能访问它，但我显然错过了一些东西。任何帮助表示赞赏，谢谢

我有一个使用 ES6 模块的普通 HTML/CSS/JavaScript 站点（存储库）。可以成功部署到GitHub页面和Netlify。

在我的 HTML 中，我main.js像这样导入：

<script src="js/main.js" type="module" defer></script>

在我的main.js文件中，我导入了我制作的其他模块，如下所示：

import * as data from './data.js';
import displayUserCard from './displayUserCard.js';

现在我还想安装和导入npm 模块以在我的网站上使用，就像我在我的网站上使用我自己的代码一样。

我这样安装lodash：

npm i lodash

然后在我的main.js文件中，我像这样导入 lodash，就像我在 Node 应用程序中所做的那样：

import _ from 'lodash';

这当然不起作用，并给了我以下错误，因为我们现在在浏览器中而不是在 Node 应用程序中：

^未捕获类型错误：无法解析模块说明符“lodash”。相对引用必须以“/”、“./”或“../”开头。^

经过研究，我了解到这样的开发环境需要一个 Web 捆绑器，但我发现从 Browserify 和 RequireJS 等过时的工具，到 WebPack 等过于复杂的工具，再到 Parcel、Vite 和 Snowpack 等较新的捆绑器，这些都不需要似乎没有解决为开发和生产构建轻松捆绑 npm 包的问题。

2021/2022 年，在普通 HTML/CSS/JavaScript 前端应用程序中使用 lodash 等节点模块以便可以在 GitHub 页面、Netlify 和 Vercel 等 CDN 上进行捆绑、构建和部署的最直接方式是什么？

部署到 netlify 失败并出现 error: [vite]: Rollup failed to resolve import...，但当我使用本地构建时它可以工作npm run build（与 netlify 相同）。无法解析的包是直接从 github 安装的，而不是其他包。

包.json：

    "dependencies": {\n        "@tailwindcss/line-clamp": "^0.2.2",\n        "focus-visible": "^5.2.0",\n        "just-throttle": "^4.0.1",\n        "lrud": "github:bbc/lrud#master",\n        "sapper-environment": "^1.0.1"\n    }\n

网络化日志：

10:10:48 PM: \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\n10:10:48 PM:   1. build.command from netlify.toml                            \n10:10:48 PM: \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\n10:10:48 PM: \xe2\x80\x8b\n10:10:48 PM: $ npm run build\n10:10:48 PM: > sveltekit-movie-app@0.0.1 build\n10:10:48 PM: > svelte-kit build\n10:10:49 PM: vite v2.7.10 building for production...\n10:10:49 PM: transforming...\n10:10:52 PM: \xe2\x9c\x93 54 modules transformed.\n10:10:52 PM: [vite]: Rollup …

我需要重定向到 Netlify 上的一个 React 项目的主页，但我使用的是 vite。

我曾经使用 CRA (create-react-app) 来完成此操作，并使用此配置在公共文件夹中创建_redirects文件。

/*  /index.html 200

我该如何在vitejs中做到这一点？

我在 Netlify 上部署的 SvelteKit 应用程序遇到了一个问题，如果我加载该应用程序，然后让页面处于非活动状态几分钟，在某些时候它会中断，如果我尝试导航或执行某些操作，它就会卡住，而且看起来like 无法获取组件，但在某个时刻它最终会加载，但需要很长时间（例如几分钟）。所附的屏幕截图是我尝试通过单击按钮导航到页面后得到的。

这是 Sveltkit 配置：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        postcss: true
    }),

    kit: {
        adapter: adapter(),
    }
};

export default config;

有什么线索吗？

我在 Netlify 上部署了我的 Vite React 站点，但我的技能图标没有呈现！ 这是网站。。我在部署之前执行了 npm run build，我得到了 dist 文件夹并将其部署在 Netlify 上。但起初资产文件夹没有图标，所以我也将其添加到资产（dist 文件夹）文件夹中，但没有成功！请帮忙。

我想渲染我的作品集网站的技能图标。