时间:2023-07-13 07:24:02 | 来源:网站运营
时间:2023-07-13 07:24:02 来源:网站运营
Next如何部署到静态网站托管:我们知道部署web应用程序的最佳方式是作为静态HTML应用程序,因为他对搜索引擎很友好,速度快等等,这对我们写个人博客这样的小型网站无异于非常nice。如果你的应用可以作为静态HTML,那么可以试试Next.js。 它可以把一个应用程序作为静态页面导出,那么导出的静态页面怎么部署到静态托管呢?我们以云开发静态托管服务为例。node.js 开通云环境开发工具:
create-next-app @cloudbase/cli下面我们来详细操作~
npm i create-next-app
以及云开发工具@cloudbase/cli npm i @cloudbase/cli
npm命令是在安装node.js时自动安装
npx create-next-app 项目名称
此处项目名称为你的项目根目录名称cd 项目名称
module.exports = { exportTrailingSlash: true, exportPathMap: function () { return { '/': {page: '/'} }; },};
如果你希望生成的静态文件不只包含首页和404页面(Next自动生成),那么可以在next.config.js中加入'/about': {page: '/about/about'}
,并在pages下新建一个about文件夹并创建about.js文件写入,如果只是测试生成首页和404就够了,那么直接跳到第4步即可const about = () => ( <div>about</div>)export default about
附上next.config.js添加后的完整代码:module.exports = { exportTrailingSlash: true, exportPathMap: function () { return { '/': {page: '/'}, '/about': {page: '/about/about'} }; },};
"export": "next export"
npm run buildnpm run export
我们发现根目录中生成了一个out文件夹,该文件夹下的所有文件就是我们生成的静态文件,所以接下来要做的事就是开通云环境并将其部署到静态网站托管。 tcb login
tcb hosting:deploy ./out -e 你的云开发环境ID
关键词:托管,静态,部署