跳到主要内容

如何搭建博客

· 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 官网文档。

阅读时间

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 中修改使用自己的域名。