开源项目 `tsurupin/portfolio` 使用教程

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

tsurupin/portfolio/
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
├── src
│   ├── assets
│   │   ├── fonts
│   │   └── images
│   ├── components
│   │   ├── Article
│   │   ├── Bio
│   │   ├── Blog
│   │   ├── Footer
│   │   ├── Header
│   │   ├── Layout
│   │   ├── List
│   │   ├── Post
│   │   ├── SEO
│   │   └── Tag
│   ├── constants
│   ├── pages
│   │   ├── 404.js
│   │   ├── about.js
│   │   ├── blog.js
│   │   ├── index.js
│   │   └── tags.js
│   ├── templates
│   │   ├── blog-post.js
│   │   └── tag-page.js
│   └── utils
├── static
│   └── icons
└── yarn.lock

目录结构介绍

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• gatsby-browser.js: Gatsby 浏览器 API 配置文件。
• gatsby-config.js: Gatsby 配置文件，包含站点元数据和插件配置。
• gatsby-node.js: Gatsby Node API 配置文件。
• gatsby-ssr.js: Gatsby 服务器端渲染 API 配置文件。
• package.json: 项目依赖和脚本配置文件。
• src: 源代码目录。
  • assets: 静态资源目录，包含字体和图片。
  • components: React 组件目录。
  • constants: 常量定义目录。
  • pages: 页面组件目录。
  • templates: 模板组件目录。
  • utils: 工具函数目录。
• static: 静态文件目录，包含图标等静态资源。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

gatsby-config.js

gatsby-config.js 是 Gatsby 的主要配置文件，包含站点元数据和插件配置。以下是该文件的部分内容示例：

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: `Kyle Mathews`,
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.app/`,
    social: {
      twitter: `kylemathews`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    // 其他插件配置
  ],
}

package.json

package.json 文件定义了项目的依赖和脚本。以下是该文件的部分内容示例：

{
  "name": "gatsby-starter-blog",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "0.1.0",
  "author": "Kyle Mathews <[e-mail]>",
  "dependencies": {
    "gatsby": "^2.24.50",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    // 其他依赖
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",