Kent C. Dodds 个人网站项目教程

Kent C. Dodds 个人网站项目教程

kentcdodds.com My personal website 项目地址: https://gitcode.com/gh_mirrors/ke/kentcdodds.com

1. 项目的目录结构及介绍

本项目是基于 Remix 的静态站点生成器构建的，主要目录结构如下：

kentcdodds.com/
├── .github/              # GitHub 工作流配置
├── app/                  # 应用程序的主要代码
├── content/              # 网站内容，如博客文章等
├── e2e/                  # 端到端测试
├── mocks/                # 模拟数据
├── other/                # 其他文件
├── prisma/               # Prisma 数据库迁移和模型定义
├── public/               # 公共静态文件，如图片、CSS、JavaScript 等
├── server/               # 服务器端代码
├── tests/                # 单元测试
├── types/                # TypeScript 类型定义
├── .dockerignore         # Docker 忽略文件
├── .env.example          # 环境变量示例文件
├── .gitattributes         # Git 属性配置
├── .gitignore            # Git 忽略文件
├── .npmrc                # npm 配置文件
├── .prettierignore        # Prettier 忽略文件
├── CONTRIBUTING.md       # 贡献指南
├── Dockerfile            # Docker 构建文件
├── LICENSE.md            # 许可证文件
├── README.md             # 项目说明文件
├── eslint.config.js      # ESLint 配置文件
├── fly.toml              # Fly.io 配置文件
├── index.js              # 项目入口文件
├── lint-staged.config.cjs # Lint-staged 配置文件
├── package-lock.json     # npm 依赖锁定文件
├── package.json          # npm 配置文件
├── playwright.config.ts  # Playwright 配置文件
├── postcss.config.js     # PostCSS 配置文件
├── remix.config.js       # Remix 配置文件
├── tailwind.config.ts    # Tailwind CSS 配置文件
├── tsconfig.json         # TypeScript 配置文件
├── vite.config.ts        # Vite 配置文件
└── vitest.config.ts      # Vitest 配置文件

2. 项目的启动文件介绍

项目的启动文件是 index.js，它负责初始化和启动整个应用程序。以下是启动文件的基本内容：

// index.js
import { createServer } from 'http';
import { createRequestHandler } from '@remix-run/node';

// 创建 HTTP 服务器
const server = createServer(
  createRequestHandler({
    // Remix 应用程序的主目录
    directory: __dirname,
    // 应用程序的构建目录
    build: require('@remix-run/dev/make-build').makeBuild(),
  })
);

// 指定服务器端口
const port = process.env.PORT || 3000;

// 监听指定端口
server.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

3. 项目的配置文件介绍

本项目使用多个配置文件，以下是一些主要的配置文件及其功能：

• .env.example：环境变量示例文件，用于展示项目所需的环境变量及其默认值。
• eslintrc.config.js：ESLint 配置文件，用于定义代码风格和错误检查规则。
• prettierignore：Prettier 忽略文件，用于指定不需要 Prettier 格式化的文件和目录。
• tailwind.config.ts：Tailwind CSS 配置文件，用于定义 Tailwind 的样式预设和自定义类。
• postcss.config.js：PostCSS 配置文件，用于配置 CSS 的转换和优化。
• vite.config.ts：Vite 配置文件，用于配置 Vite 的构建和开发服务器。
• tsconfig.json：TypeScript 配置文件，用于定义 TypeScript 编译器的设置和选项。

kentcdodds.com My personal website 项目地址: https://gitcode.com/gh_mirrors/ke/kentcdodds.com