创建一个展示你的 Instagram 帖子的 Gatsby 作品集

2025-06-07

创建一个展示你的 Instagram 帖子的 Gatsby 作品集

我创建了我的第一个Gatsby Portfolio Starter。它通过 Instagram API 显示任何用户的最新 Instagram 帖子，并实现了Uber 构建的设计系统Base Web 。

点击此处观看现场演示🚀

带有桌面、平板电脑和移动视图的 gatsby starter 屏幕截图

在这篇文章中，我将向你展示如何快速制作并构建这个 Starter 的原型。我会提供一些技巧和窍门，以及需要注意的事项（及其解决方法），以及如何开始使用你的 Starter（看看我做了什么？👀）

单击下面即可查看存储库。

GitHub 徽标 timrodz / gatsby-starter-instagram-baseweb

🎢 轻量级、简约的 Gatsby 入门工具，用于创建基于 Instagram 的作品集。

❓ 什么是 Gatsby？

Gatsby是一个基于 React 的免费开源框架，可帮助开发者构建速度超快的网站和应用。它提供大量插件和启动器，就像主题一样，你可以在其上进行构建和开发。而且它的社区也非常棒——太棒了！

我已经玩 Gatsby 一个多月了。我用它重新设计并搭建了我的作品集，同时还在为一位自由摄影师朋友搭建作品集。这真是一个深入 Gatsby 的绝佳机会！

网站的桌面视图

🤔 它是如何工作的？

创建这个 Starter 的过程毫不意外地简单——这得益于 Gatsby 的本质以及它提供的学习曲线。具体来说，我是一名 Web 技术初学者。

找到合适的模板

我选择使用Gatsby 默认启动器。它已准备好投入生产，被认为是 Gatsby 的原生启动器。非常适合学习和构建！

连接到 Instagram

这个网站的主要功能是可以抓取并显示 Instagram 帖子。幸运的是，Gatsby 有一个Instagram 启动器！它的设置非常简单，并且提供了两种入门方法。

公共抓取

Instagram API 提供了一个选项，可以从任何公开个人资料中抓取最多 12 条帖子。我们将使用这个选项。

{
  allInstaNode(sort: { fields: timestamp, order: DESC }, limit: 12) {
    edges {
      node {
        id
        caption
        localFile {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

使用 API 令牌进行抓取

如果您想抓取超过 12 条的历史帖子，则需要提供凭证进行身份验证。点击此处开始。

此查询将显示我们的 Instagram 帐户的最新 12 条帖子，以及id（将用于重定向到原始帖子）caption和localFile，其中包含显示我们的图像所需的数据。

选择设计系统

之后，我开始研究设计系统，因为我想用最少的设置来创建和迭代原型。就在那时，我发现了Base Web，一个由 Uber 创建的设计系统。它轻量级、极简主义的设计方法非常适合这个例子。

特征：

  • 开箱即用的强大组件。从日期选择器到简单的块。
  • Styletron用于样式设置。它使用 CSS-in-JS 方法。
  • 通过Overrides API和可配置主题实现扩展。
  • 内置辅助功能。
  • 得益于 Styletron 引擎，性能非常出色。

使用 BaseWeb 制作响应式元素非常简单。以下是创建包含并显示图像的灵活网格的方法：

const Gallery = () => (
  <FlexGrid flexGridColumnCount={[1, 2, 3]}>{renderImages()}</FlexGrid>
);
Enter fullscreen mode Exit fullscreen mode

您将看到flexGridColumnCount被一个数组包围：[1, 2, 3]。这会自动处理断点：

  • 小屏幕尺寸：flexGridColumnCount = 1
  • 中等屏幕尺寸：flexGridColumnCount = 2
  • 大屏幕尺寸：flexGridColumnCount = 3

开始之前

需要注意的是：Gatsby 使用hydration，这意味着它使用 React 运行时将静态内容进行服务器端渲染 (SSR)。如果您使用的代码或插件访问了window或 之类的变量document，则在构建应用时会遇到一些麻烦。

想象一下这是我们应用程序的入口点：

import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, styled } from 'baseui';
import * as React from 'react';

const engine = new Styletron();

export default function EntryPoint() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <h1>Hello!</h1>
      </BaseProvider>
    </StyletronProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

看起来很简单，对吧？它甚至可以通过 运行gatsby develop。问题在于通过 构建应用程序时gatsby build，它会抛出一个document is undefined指向styletron-engine-atomic包的错误。真是糟糕！或者，真的糟糕吗？

如果你指向出错的代码，你确实会看到它styletron-engine-atomic正在访问document元素，这是理解 Gatsby 生态系统的重要部分。这些元素仅存在于浏览器内部。

为了解决这个问题，我们可以等到进入浏览器后再加载。借助React hooksstyletron-engine-atomic的魔力（和），我们可以在组件挂载后（也就是在浏览器中）将应用通知给库。useEffectuseStateimport

import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, styled } from 'baseui';
import * as React from 'react';

export default function EntryPoint() {
  const [engine, setEngine] = React.useState(null);

  React.useEffect(() => {
    // Once the `styletron-engine-atomic` library imports
    // We will grab its content and create a new client through it
    import('styletron-engine-atomic').then((styletron) => {
      const clientEngine = new styletron.Client();
      setEngine(clientEngine);
    });
  }, []);

  if (!engine) return null;

  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <h1>Hello!</h1>
      </BaseProvider>
    </StyletronProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

考虑到这些变化，这个 Web 应用程序已准备好构建。

🏋️ 让 Gatsby 承担重任

大多数 Gatsby 应用的入口点都是该gatsby-config.js文件。你可以指定站点元数据并设置插件。在本例中，除了默认插件外，我只加载了一些额外的插件：

// -- gatsby-config.js
{
  resolve: `gatsby-plugin-alias-imports`,
  options: {
    alias: {
      components: `${__dirname}/src/components`,
      data: `${__dirname}/data/`
    }
  }
}

// -- script.js
// Before
import { title } from '../../data/config';
import { Component } from '../components/Component';

// After
import { title } from 'data/config';
import { Component } from 'components';
Enter fullscreen mode Exit fullscreen mode

将应用程序转换为 PWA（渐进式 Web 应用程序）

将你的应用转换为 PWA 是当下的热门，而且理由充分。谷歌对PWA 的总结非常到位。

借助 Gatsby，将此应用转换为 PWA非常简单：

export const onServiceWorkerUpdateReady = () => {
  window.location.reload(true);
};
Enter fullscreen mode Exit fullscreen mode

轰隆隆——一旦您的网站搭建完成，您就掌握了 PWA 的基础知识，可以开始使用了！以下是 Google Lighthouse 的审核分数。

Google Lighthouse 审核分数

处理数据

为了简化操作并将最重要的变量集中到一起，我创建了一个data/config.js文件。我们可以添加网站标题、描述、作者、社交链接和其他元数据。这些变量也会为SEO组件提供支持！

搜索引擎优化

我从Smakosh 那里得到了使用schema.org组织的想法。

import Thumbnail from 'static/images/thumbnail.png';

import {
  address,
  contact,
  foundingDate,
  legalName,
  logo,
  socialLinks,
  url
} from 'data/config';

const structuredDataOrganization = `{
  "@context": "http://schema.org",
  "@type": "Organization",
  "legalName": "${legalName}",
  "url": "${url}",
  "logo": "${logo}",
  "foundingDate": "${foundingDate}",
  "founders": [{
    "@type": "Person",
    "name": "${legalName}"
  }],
  "contactPoint": [{
    "@type": "ContactPoint",
    "email": "${contact.email}",
    "contactType": "customer service"
  }],
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "${address.city}",
    "addressCountry": "${address.country}"
  },
  "sameAs": [
    "${socialLinks.instagram}",
    "${socialLinks.twitter}",
  ]
}`;
Enter fullscreen mode Exit fullscreen mode

为了注入它，Gatsby 为我们提供了一个可编辑的React Helmet。我们必须以脚本的形式传递数据application/ld+json。

const SEO = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  `);

  const metaDescription = description || site.siteMetadata.description;

  return (
    <Helmet>
      <script type='application/ld+json'>
        {structuredDataOrganization}
      </script>
    </Helmet>
  );
};
Enter fullscreen mode Exit fullscreen mode

更改媒体查询断点

使用 Base Web 覆盖主题非常简单。他们的自定义断点示例正是我所需要的。

import { LightTheme } from 'baseui';

// Specify your custom breakpoint sizes here
const breakpoints = Object.freeze({
  small: 769,
  medium: 1024,
  large: 1216
});

const ResponsiveTheme = Object.keys(breakpoints).reduce(
  (acc, key) => {
    acc.mediaQuery[
      key
    ] = `@media screen and (min-width: ${breakpoints[key]}px)`;
    return acc;
  },
  {
    breakpoints,
    mediaQuery: {}
  }
);

export default { ...LightTheme, ...ResponsiveTheme };
Enter fullscreen mode Exit fullscreen mode

🌯 结束了！

创建这个项目是学习 Gatsby 及其底层工作原理的绝佳方式。它是一个快速上手的框架，让您可以专注于创建 Web 应用。它通过在您需要时提供所需的工具来实现这一点，并且附带了可用于生产的出色内置配置。

就 Base Web 而言，它是一个构建应用和原型的优秀设计系统，并且可以轻松覆盖。我尤其喜欢它没有太多通常会让 Web 应用臃肿的组件——它包含了你（和我）可能需要的组件。

分享您的想法！

你使用 Gatsby 的体验如何？告诉我吧——我很想知道你有什么好分享的！

照片由Soragrit Wongsa在Unsplash上拍摄。

文章来源：https://dev.to/timrodz/creating-a-gatsby-portfolio-that-shows-your-instagram-posts-4m24
Devto 翻译
PREV
宣布推出 TinaCMS
NEXT
SASS的主要特点