跳到主要内容

如何搭建博客

· 阅读需 5 分钟

使用 Docusaurus 构建、GitHub 源代码管理、Vercel 自动部署。

Docusaurus​

创建项目​

pnpm create docusaurus

根据提示选择

配置博客模式​

docusaurus.config.js
module.exports = {
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        docs: false,
        blog: {
          routeBasePath: "/",
        },
      },
    ],
  ],
};

google analytics​

Google Analytics 4 使用plugin-google-gtag

安装依赖​

pnpm install @docusaurus/plugin-google-analytics

配置​

docusaurus.config.js
module.exports = {
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        googleAnalytics: {
          trackingID: "",
          anonymizeIP: true,
        },
      },
    ],
  ],
};

百度统计​

Docusaurus提供了很方便的插件机制，让我们去实现想要的功能

自定义插件​

在src/plugins/plugin-baidu-analytics创建index.js。

index.js
module.exports = function (context, options) {
  const isProd = process.env.NODE_ENV === "production";
  // 获取配置中的trackingID参数
  const { trackingID } = options;
  return {
    name: "plugin-baidu-analytics",
    injectHtmlTags({ content }) {
      if (!isProd) {
        return {};
      }
      return {
        headTags: [
          {
            tagName: "link",
            attributes: {
              rel: "preconnect",
              href: "https://hm.baidu.com",
            },
          },
          {
            tagName: "script",
            attributes: {
              async: true,
              src: `https://hm.baidu.com/hm.js?${trackingID}`,
            },
          },
        ],
      };
    },
  };
};

使用插件​

在百度站点管理获取 trackingID

docusaurus.config.js
plugins: [
  "@docusaurus/theme-live-codeblock",
+  [
+    require("./src/plugins/plugin-baidu-analytics"),
+    { trackingID: "" }, //  传入trackingID参数
+  ],
],

可交互的代码编辑器并实时预览​

安装依赖​

pnpm install @docusaurus/theme-live-codeblock

配置​

docusaurus.config.js
module.exports = {
  plugins: ["@docusaurus/theme-live-codeblock"],
  themeConfig: {
    liveCodeBlock: {
      /**
       * 实时效果显示的位置，可位于编辑器上方或下方。
       * 可为："top" | "bottom"
       */
      playgroundPosition: "bottom",
    },
  },
};

使用​

创建代码块，并添加代码块语言标签，再在语言标签后面添加live

```jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

将渲染为可交互的代码编辑器，并实时预览

实时编辑器
结果
Loading...

国际化​

配置

docusaurus.config.js
+ i18n: {
+    defaultLocale: "zh",
+    locales: ["zh"],
+    localeConfigs: {
+        zh: {
+            htmlLang: "zh-CN"
+        }
+    }
+ }

翻译​

有些英文没有翻译，因此重写翻译文件。

npm run write-translations -- --locale zh

支持 mermaid 作图​

安装依赖​

pnpm i mermaid mdx-mermaid -D

配置​

docusaurus.config.js
blog: {
    routeBasePath: "/",
+   remarkPlugins: [require("mdx-mermaid")]
},

使用​

查看mermaid 官网文档。

graph
A --> B

阅读时间​

docusaurus.config.js
blog: {
    routeBasePath: "/",
+   showReadingTime: true,
},

sitemap​

方便搜索引擎爬虫更准确地抓取网站。

安装依赖​

pnpm i @docusaurus/plugin-sitemap

配置​

docusaurus.config.js
module.exports = {
  presets: [
    [
      'classic',
      (
+      {
+        sitemap: {
+          changefreq: 'weekly',
+          priority: 0.5,
+        },
+      },
      )
    ],
  ],
};

搜索​

使用本地搜索，目前够用了。

安装依赖​

pnpm i @easyops-cn/docusaurus-search-local

配置​

docusaurus.config.js
+ themes: [
+   [
+     require.resolve("@easyops-cn/docusaurus-search-local"),
+     { hashed: true, language: ["en", "zh"], blogRouteBasePath: "/", },
+   ],
+ ],

归档、标签链接​

docusaurus.config.js
navbar: {
  ...
  items: [
    {
      to: "/tags",
      label: "标签",
      position: "right",
    },
    {
      to: "/archive",
      label: "归档",
      position: "right",
    },

swc 替换 babel​

使用 swc-loader 加速编译、打包

安装依赖​

pnpm i swc-loader @swc/core -D

配置​

docusaurus.config.js
webpack: {
  jsLoader: (isServer) => ({
    loader: require.resolve("swc-loader"),
    options: {
      jsc: {
        parser: {
          syntax: "typescript",
          tsx: true,
        },
        target: "es2017",
      },
      module: {
        type: isServer ? "commonjs" : "es6",
      },
    },
  }),
},

GitHub​

源代码直接放在GitHub上面

Vercel​

博客直接部署在Vercel上面。简单，一键部署，还支持 CDN。

域名​

购买域名，并在 Vercel 中修改使用自己的域名。