🌏 我用 Gatsby 创建了我的网站！

盖茨比

Netlify

虽然我从事网页开发已经六年多了，但直到2018年才给自己的网站买了域名。现在才刚刚完成。或许是因为我比较懒吧。

但我非常确定这个网站是我做过的最快、性能最优化的网站。

chandujs.dev

很简单，对吧？

让我们分解一下我用来构建网站的东西。

盖茨比

这个静态网站生成器让我重新考虑是否要回归 Web 开发。Gatsby
是一款快速、性能卓越、适用于 React 的现代静态网站生成器。网站的第一个版本是用 Angular 完成的。学习 Gatsby 之后，我把它移植到了 Gatsby 上。

你可以克隆一个启动项目并从这里开始

插件

Gatsby 的插件库非常丰富。你几乎可以为你的网站找到所有插件。

博客

我的网站上有一个博客版块。所以我用了gatsby-source-dev插件来抓取我用户 ID 对应的 dev.to 帖子，并渲染到我的网站上。轻松写博客 😎

作品集展示

为了在网站上展示我的作品集，我使用了以下插件。

• gatsby-source-filesystem列出项目中的所有文件
• gatsby-plugin-sharp几个图像处理函数
• gatsby-transformer-sharp从 sharp 图像处理库支持的图像类型创建 ImageSharp 节点
• gatsby-transformer-remark使用 Remark 解析 Markdown 文件。
• gatsby-remark-images处理 markdown 中的图像，以便它们可以在生产版本中使用。
• gatsby-remark-relative-images将 markdown 中的图像 src 转换为相对于其节点的父目录。
• gatsby-plugin-extract-image-colors从图像中提取颜色并将其添加到图像数据中

优化

Gatsby 中开箱即用的性能优化。

我写了一篇关于如何从网站中清除 95% 未使用的 Bootstrap 的文章。点击此处阅读。

🗜 我如何从 Gatsby 网站中清除 95% 未使用的 CSS

Chandu JS ・ 2020 年 2 月 21 日 ・ 阅读时长 1 分钟

#gatsby #css #bootstrap #webdev

Netlify 内容管理系统

我正在使用 Netlify 的 Headless CMS，它是一款简单易用的 CMS，可以用于静态网站。它与 Gatsby 网站集成非常容易。点击此处
了解更多关于 Netlify CMS 的信息

渐进式 Web 应用

该网站是 PWA，这意味着您打开网站后即可访问。您可以通过非常简单的步骤将 Gatsby 网站转变为 PWA。

安装gatsby-plugin-offline节点包并将以下内容添加到文件plugins中的数组末尾gatsby-config.js

[
//...
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'Chandu J S',
        short_name: 'Chandu',
        start_url: '/',
        background_color: Variables.colors.brand,
        theme_color: Variables.colors.brand,
        display: 'standalone',
        icon: 'src/assets/images/icon.png',
        crossOrigin: `use-credentials`,
      },
    },
    'gatsby-plugin-offline',
//...
]

Netlify

就主机托管而言，我完全免费托管我的网站😁。Netlify 是一项很棒的服务，它为静态网站提供免费托管。

无论您拥有哪种类型的静态站点生成器，Netlify 几乎都支持所有类型的生成器。

如果我需要进一步澄清任何内容，请在评论中告诉我。

我网站的源代码已开放，可在此处获取。请根据许可证自由使用。