Fullstack Open 2019 项目启动与配置教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00565/article/details/148296352

Fullstack Open 2019 项目启动与配置教程

fullstackopen-2019.github.io 项目地址: https://gitcode.com/gh_mirrors/fu/fullstackopen-2019.github.io

1. 项目目录结构及介绍

本项目是基于 Fullstack Open 2019 教程的开源项目，其目录结构如下：

fullstackopen-2019.github.io/
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
└── package.json

.gitignore：指定 Git 忽略的文件和目录。
.prettierrc：Prettier 的配置文件，用于统一代码风格。
LICENSE：项目许可证文件，本项目采用 Creative Commons BY-NC-SA 3.0 许可。
README.md：项目的说明文件，包含项目信息和如何使用。
gatsby-browser.js：Gatsby 浏览器相关的配置和插件。
gatsby-config.js：Gatsby 的主配置文件，定义了站点元数据和插件。
gatsby-node.js：用于在 Gatsby 的构建和开发过程中运行自定义函数。
gatsby-ssr.js：用于在服务端渲染时自定义 Gatsby 的行为。
package-lock.json：npm 的依赖锁定文件，确保在不同环境中安装相同的依赖版本。
package.json：项目的包管理文件，定义了项目的依赖和脚本。

2. 项目的启动文件介绍

本项目的主要启动文件是 package.json 中的启动脚本。以下是 package.json 文件中定义的一些常用脚本：

"scripts": {
  "start": "gatsby develop",
  "build": "gatsby build",
  "serve": "gatsby serve"
}

使用 npm start 或 yarn start 可以启动 Gatsby 的开发服务器，进行实时预览和开发。
使用 npm run build 或 yarn run build 进行静态站点构建，生成的静态文件位于 public 目录。
使用 npm run serve 或 yarn run serve 可以在本地服务器上托管构建后的静态站点。

3. 项目的配置文件介绍

gatsby-config.js

gatsby-config.js 是 Gatsby 的核心配置文件，以下是配置文件的基本结构：

module.exports = {
  siteMetadata: {
    title: `Title`,
    description: `Description`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-mdx`,
    // ... 其他插件
  ],
};

在此文件中可以设置网站的元数据（如标题和描述），并添加所需的插件。