开源项目 anuraghazra.github.io 使用教程

开源项目 anuraghazra.github.io 使用教程

anuraghazra.github.ioMy Portfolio Site | Made With @Gatsbyjs项目地址:https://gitcode.com/gh_mirrors/an/anuraghazra.github.io

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

anuraghazra.github.io/
├── src/
│   ├── components/
│   ├── pages/
│   ├── templates/
│   ├── assets/
│   ├── styles/
│   └── ...
├── static/
├── .gitignore
├── gatsby-config.js
├── package.json
└── README.md

• src/: 包含项目的源代码，如组件、页面、模板、静态资源和样式文件。
  • components/: 存放可重用的React组件。
  • pages/: 存放页面组件，每个文件对应一个路由。
  • templates/: 存放页面模板。
  • assets/: 存放图片、字体等静态资源。
  • styles/: 存放全局样式文件。
• static/: 存放不需要经过构建处理的静态文件。
• .gitignore: 指定Git版本控制系统忽略的文件和目录。
• gatsby-config.js: Gatsby配置文件，包含站点元数据和插件配置。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是gatsby-config.js和package.json。

gatsby-config.js

gatsby-config.js是Gatsby的主要配置文件，包含以下内容：

module.exports = {
  siteMetadata: {
    title: `Anurag Hazra`,
    description: `Creative Front-End Web Developer`,
    author: `@anuraghazra`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Anurag Hazra Portfolio`,
        short_name: `Portfolio`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/assets/images/icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

package.json

package.json文件定义了项目的依赖和脚本：

{
  "name": "anuraghazra.github.io",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "gatsby": "^3.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    // 其他依赖...
  },
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  }
}

3. 项目的配置文件介绍

gatsby-config.js

gatsby-config.js文件已经在上面的启动文件介绍中详细说明，它包含了站点的元数据和插件配置。

.gitignore

.gitignore文件指定了Git版本控制系统忽略的文件和目录，例如：

.cache/
public/
node_modules/
.env

这些目录和文件在开发过程中会自动生成，不需要提交到版本控制系统中。

package.json

package.json文件定义了项目的依赖和脚本，已经在上面的启动文件介绍中详细说明。

通过以上介绍，您应该对

anuraghazra.github.ioMy Portfolio Site | Made With @Gatsbyjs项目地址:https://gitcode.com/gh_mirrors/an/anuraghazra.github.io