基于 Gatsby 打造我的个人博客系统

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem", // 尽管官方文档在使用字符串时都使用的是反引号 `，但笔者更习惯使用单双引号
      options: {
        name: "posts",
        path: "path/to/posts/",
      },
      __key: "posts",
    },
  ],
};

export default config;

import remarkGfm from "remark-gfm";

const config: GatsbyConfig = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      // ...
    },
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        gatsbyRemarkPlugins: [
          // 添加代码块高亮
          "gatsby-remark-prismjs",
        ],
        mdxOptions: {
          remarkPlugins: [
            // 添加对 GitHub flavored markdown (GFM) 格式的支持
            remarkGfm,
          ],
        },
      },
    },
  ],
};

import { type CreateNodeArgs } from "gatsby";

export const onCreateNode = ({ node, actions }: CreateNodeArgs) => {
  const { createNodeField } = actions;
  if (node.internal.type === "Mdx") {
    createNodeField({
      node,
      name: "slug",
      value: parseFilePathToPostSlug(String(node.internal.contentFilePath)),
    });
  }
};

---
title: 从同步 QQ 空间说说到前端呈现，我都做了些啥
date: 2024-10-17
updated: 2024-10-17
timeliness: false
categories:
  - 全栈开发
tags:
  - React
  - TypeScript
  - Node
  - ffmpeg
---

最近在捣腾我的 Timeline 时间线项目，希望将我在不同平台上的发言和活跃记录同步过来，在独立的站点上按照创建时间倒序呈现。

...

// src/hooks/useAllMdx.ts
import { graphql, useStaticQuery } from "gatsby";

interface MdxNode {
  excerpt: string;
  fields: {
    slug: string;
  };
  frontmatter: {
    categories: string[];
    tags: string[];
    title: string;
    date: string;
    updated: string;
  };
}

export const useAllMdx = () => {
  const {
    allMdx: { nodes: posts },
  } = useStaticQuery<{
    allMdx: { nodes: MdxNode[] };
  }>(graphql`
    query {
      allMdx(sort: { frontmatter: { date: DESC } }) {
        nodes {
          excerpt
          fields {
            slug
          }
          frontmatter {
            categories
            tags
            title
            date
            updated
          }
        }
      }
    }
  `);

  return posts;
};

export default useAllMdx;

import { type CreatePagesArgs } from "gatsby";
import path from "path";

const postTemplate = path.resolve("./src/templates/post.tsx");

export const createPages = async function ({
  actions,
  graphql,
}: CreatePagesArgs) {
  const { data } = await graphql<{
    allMdx: {
      nodes: MdxNode[];
    };
  }>(`
    query {
      allMdx(
        sort: { frontmatter: { date: DESC } }
        filter: {
          internal: {
            contentFilePath: { regex: "//blog/posts/|/blog/about-me.mdx/" }
          }
        }
      ) {
        nodes {
          fields {
            slug
          }
          id
          internal {
            contentFilePath
          }
        }
      }
    }
  `);

  data?.allMdx.nodes.forEach((node) => {
    const slug = node.fields.slug;
    const path = slug === "about-me" ? "/about-me" : `/posts/${slug}`;

    actions.createPage({
      path,
      component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
      context: {
        id: node.id,
      },
    });
  });
};

import { MDXProvider } from "@mdx-js/react";
import { graphql, type PageProps } from "gatsby";
import * as React from "react";

type PostPageData = {
  mdx: Pick<MdxNode, "frontmatter">;
};

type PostPageContext = Pick<MdxNode, "id">;

const PostTemplate: React.FC<PageProps<PostPageData, PostPageContext>> = ({
  children,
  data,
}) => {
  const {
    mdx: {
      frontmatter: { title, date, updated, categories, tags },
    },
  } = data;

  return (
    <div>
      <h1>{title}</h1>
      <article>
        <MDXProvider>{children}</MDXProvider>
      </article>
    </div>
  );
};

export const query = graphql`
  query ($id: String!) {
    mdx(id: { eq: $id }) {
      frontmatter {
        categories
        tags
        title
        date
        updated
      }
    }
  }
`;

export default PostTemplate;

import { type MDXProps } from "mdx/types";

import Card from "path/to/components/card";

const components: MDXProps["components"] = {
  Card,
};

const PostTemplate = ({ children }) => {
  return (
    <article>
      <MDXProvider components={components}>{children}</MDXProvider>
    </article>
  );
};

import { Fancybox } from "@fancyapps/ui";

const FancyBoxImage = (props: { alt?: string; src?: string }) => {
  const {
    alt = "The author is too lazy to give an alt",
    src,
    ...restProps
  } = props;
  return (
    <a href={src} data-fancybox="gallery" data-caption={alt}>
      <img src={src} alt={alt} {...restProps} />
    </a>
  );
};

const components: MDXProps["components"] = {
  img: FancyBoxImage,
};

const PostTemplate = ({ children }) => {
  const articleRef = React.useRef<HTMLElement>(null);

  React.useEffect(() => {
    Fancybox.bind("[data-fancybox]");
    return () => Fancybox.unbind("[data-fancybox]");
  }, []);

  return (
    <article ref={articleRef}>
      <MDXProvider components={components}>{children}</MDXProvider>
    </article>
  );
};

const config: GatsbyConfig = {
  plugins: [
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 624,
            },
          },
          "gatsby-remark-copy-linked-files",
        ],
      },
    },
  ],
};

const PostTemplate = ({ children }) => {
  const articleRef = React.useRef<HTMLElement>(null);

  React.useEffect(() => {
    const optimizedImageLinks =
      articleRef.current?.querySelectorAll<HTMLLinkElement>(
        "a.gatsby-resp-image-link",
      );
    optimizedImageLinks?.forEach((link) => {
      const image = link.children.item(1) as HTMLImageElement;
      link.setAttribute("data-fancybox", "gallery");
      link.setAttribute("data-caption", image.alt);
    });

    Fancybox.bind("[data-fancybox]");
    return () => Fancybox.unbind("[data-fancybox]");
  }, []);

  return (
    <article ref={articleRef}>
      <MDXProvider components={components}>{children}</MDXProvider>
    </article>
  );
};

# 包含 GATSBY_ 前缀的环境变量将暴露到客户端环境中
# 后续将用到下面三个变量实现客户端检索功能
GATSBY_ALGOLIA_APP_ID=YOUR_ALGOLIA_APP_ID
GATSBY_ALGOLIA_API_PUBLIC_KEY=YOUR_ALGOLIA_API_PUBLIC_KEY
GATSBY_ALGOLIA_INDEX_NAME=YOUR_ALGOLIA_INDEX_NAME
# 用于上传数据等的 Algolia 管理秘钥切勿添加 GATSBY_ 前缀
ALGOLIA_API_KEY=YOUR_ALGOLIA_API_PRIVATE_KEY

import dotenv from "dotenv";

dotenv.config({
  path: [".env", `.env.${process.env.NODE_ENV}`],
});

const config: GatsbyConfig = {
  plugins: [
    {
      // ... 其它的插件
    },
    {
      // 应当将 gatsby-plugin-algolia 插件放到列表的最后
      // 确保 GraphQL 查询到的结果是经过其它插件处理后的最终结果
      resolve: "gatsby-plugin-algolia",
      options: {
        appId: process.env.GATSBY_ALGOLIA_APP_ID,
        apiKey: process.env.ALGOLIA_API_KEY,
        indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME,
        queries: [
          {
            query: `
              query {
                allMdx(
                  filter: {
                    internal: {
                      contentFilePath: { regex: "//blog/posts//" }
                    }
                  }
                ) {
                  nodes {
                    excerpt(pruneLength: 200)
                    fields {
                      slug
                    }
                    frontmatter {
                      categories
                      tags
                      title
                      date
                      updated
                      timeliness
                    }
                    id
                    internal {
                      contentDigest
                    }
                  }
                }
              }`,
            transformer: ({
              data,
            }: {
              data: {
                allMdx: {
                  nodes: MdxNode[];
                };
              };
            }) => data.allMdx.nodes,
          },
        ],
      },
    },
  ],
};

import { liteClient as algoliasearch } from "algoliasearch/lite";
import {
  Configure,
  Hits,
  InstantSearch,
  Pagination,
  SearchBox,
} from "react-instantsearch";

import Post from "path/to/post";

const searchClient = algoliasearch(
  String(process.env.GATSBY_ALGOLIA_APP_ID),
  String(process.env.GATSBY_ALGOLIA_API_PUBLIC_KEY),
);

const Hit = ({ hit }) => {
  return <Post post={hit} />;
};

const AlgoliaSearch = () => {
  return (
    <InstantSearch
      insights
      searchClient={searchClient}
      indexName={process.env.GATSBY_ALGOLIA_INDEX_NAME}
    >
      <Configure hitsPerPage={10} />
      <SearchBox />
      <Hits<AlgoliaPostItem> hitComponent={Hit} />
      <Pagination />
    </InstantSearch>
  );
};

export default AlgoliaSearch;

import nProgress from "nprogress";

export const onRouteUpdateDelayed = () => {
  nProgress.start();
};

export const onRouteUpdate = () => {
  nProgress.done();
};

name: Blog System CI & CD

on:
  push:
    branches:
      - main

jobs:
  pages:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"

      - name: Cache Yarn dependencies
        uses: actions/cache@v4
        id: yarn-cache
        with:
          path: node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies
        run: yarn install --immutable

      - name: Build Gatsby
        run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} # 笔者将产物推送到了外部仓库，因此这里使用到了 Github 私人密钥
          publish_dir: ./public
          external_repository: LolipopJ/LolipopJ.github.io
          publish_branch: main