从选型到上线：AI驱动的2小时建站实战

# 方式1：使用官方脚手架（推荐）
npx create-nextra@latest my-website
 
# 方式2：手动安装依赖
npm install next react react-dom nextra nextra-theme-docs

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

lext.website/
├── pages/              # 页面文件
│   ├── _app.jsx       # 应用入口
│   ├── _meta.js       # 主导航配置
│   ├── index.jsx      # 首页
│   ├── docs/          # 文档目录
│   │   ├── _meta.js   # 文档侧边栏
│   │   └── intro.mdx  # 介绍页
│   └── blog/          # 博客目录
│       ├── _meta.js   # 博客导航
│       └── welcome.mdx
├── public/            # 静态资源
├── styles/            # 样式文件
├── next.config.js     # Next.js配置
└── theme.config.jsx   # 主题配置

// next.config.js - AI生成的完整配置
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.jsx'
})
 
module.exports = withNextra({
  output: 'export',        // 关键：启用静态导出
  images: {
    unoptimized: true      // 静态导出所必需
  },
  trailingSlash: true,     // 确保路径正确
  // 如果部署到子路径，取消下面的注释
  // basePath: '/your-path',
  // assetPrefix: '/your-path'
})

export default {
  logo: <strong>Leeext的杂货铺</strong>,
  
  // 导航配置
  project: {},  // 移除GitHub链接
  
  docsRepositoryBase: 'https://github.com/xintaoLi/lext.website.tpl/tree/main',
  
  // 页脚配置
  footer: {
    text: (
      <span>
        © {new Date().getFullYear()} Leeext的杂货铺. MIT License.
      </span>
    )
  },
  
  // 主题色
  primaryHue: 200,
  
  // 目录配置
  toc: {
    float: true,
    title: '本页目录',
    backToTop: true
  },
  
  // SEO配置
  useNextSeoProps() {
    return {
      titleTemplate: '%s – Leeext的杂货铺'
    }
  }
}

export default {
  index: '首页',
  docs: {
    title: '文档',
    type: 'page'
  },
  blog: {
    title: '博客',
    type: 'page'
  },
  'about-site': '关于本站'
}

export default {
  'index': '博客首页',
  'welcome': '欢迎来到 Lext 博客',
  'first-post': '我的第一篇文章',
  'nextra-tips': 'Nextra 使用技巧'
}

export default function Home() {
  return (
    <div className="home-container">
      <div className="hero-section">
        <h1 className="hero-title gradient-text">
          知识、工具与灵感的收藏地
        </h1>
        <p className="hero-description">
          在这里记录学习笔记，分享技术文章，收藏实用工具
        </p>
        <div className="hero-actions">
          <a href="/docs/intro" className="about-link primary">
            开始探索
          </a>
          <a href="/blog" className="about-link secondary">
            查看博客
          </a>
        </div>
      </div>
    </div>
  )
}

---
title: 欢迎来到 Lext 博客
date: 2025/10/17
description: Lext 博客正式上线
---
 
# 欢迎来到 Lext 博客
 
这是一个基于 Nextra 搭建的技术分享平台...

import Link from 'next/link'
 
export default function BlogCard({ title, description, date, href, tag }) {
  return (
    <Link href={href} className="blog-card-link">
      <article className="blog-card">
        <div className="blog-card-header">
          {tag && <span className="blog-card-tag">{tag}</span>}
          <time className="blog-card-date">{date}</time>
        </div>
        <h3 className="blog-card-title">{title}</h3>
        <p className="blog-card-description">{description}</p>
        <div className="blog-card-footer">
          <span className="blog-card-read-more">
            阅读全文 →
          </span>
        </div>
      </article>
    </Link>
  )
}

.blog-card {
  padding: 1.75rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.3s ease;
}
 
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
}

npm run dev
# 访问 http://localhost:3000

npm run build

Error: Image Optimization using Next.js' default loader is not compatible with `output: 'export'`

// next.config.js 添加配置
module.exports = withNextra({
  images: {
    unoptimized: true  // 禁用图片优化
  }
})

// next.config.js 添加配置
module.exports = withNextra({
  trailingSlash: true  // 添加尾部斜杠
})

out/
├── _next/           # Next.js 资源
├── docs/            # 文档页面
│   └── intro/
│       └── index.html
├── blog/            # 博客页面
│   └── welcome/
│       └── index.html
├── index.html       # 首页
└── 404.html         # 404页面

本地开发 → npm run build → 宝塔面板上传 → Nginx配置 → 域名访问

# 1. 创建网站并绑定域名
# 2. 上传构建文件
# 将out目录所有内容上传至网站根目录
 
# 3. 配置Nginx支持SPA路由
location / {
  try_files $uri $uri/ /index.html;
}

nginx.service: Control process exited, code=exited, status=1/FAILURE
Active: failed (Result: exit-code)

npx create-nextra@latest my-blog
cd my-blog
npm install

// next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.jsx'
})
 
module.exports = withNextra({
  output: 'export',
  images: { unoptimized: true },
  trailingSlash: true
})

# pages/index.md
# 欢迎来到我的博客
 
这是使用Nextra构建的现代化技术博客。
 
## 特性
 
- 深色模式支持
- 全文搜索
- 响应式设计

npm run dev
# 访问 http://localhost:3000

npm run build
# 将out目录内容上传至服务器