Docusaurus 静态博客系列(1)- 系统搭建
· 阅读需 3 分钟
静态博客千千万, 比如:Jekyll、Hexo 、VuePress、Hugo 等等 这里介绍使用 Docusaurus ,它是一个用于构建开源项目网站的静态网站生成器。它由 Facebook 开发,旨在简化创建、维护和发布技术文档和项目文档的过程。 Docusaurus 使用 React 作为其前端框架,这意味着你可以利用 React 生态系统中的组件和库来增 强你的网站。
接下来介绍 Docusaurus 来搭建静态博客站点的具体过程。它有中文的官网,内容很详细。
一键安装
首先一行命令安装系统
我们使用官网建议的使用带预设模版的默认主题。 my-website 修改为你定义的名称 出现的选项全部默认即可
npx create-docusaurus@latest my-website classic
安装完毕后,会出现如下提示:
[SUCCESS] Created my-website.
[INFO] Inside that directory, you can run several commands:
`npm start`
Starts the development server.
`npm run build`
Bundles your website into static files for production.
`npm run serve`
Serves the built website locally.
`npm run deploy`
Publishes the website to GitHub pages.
We recommend that you begin by typing:
`cd my-website`
`npm start`
Happy building awesome websites!
接下来进入安装目录运行本地开发模式:
npm run start
默认情况下访问地址: http://localhost:3000/
修改基本信息
需改修改安装目录下这个配置文件docusaurus.config.js
能配置的信息见官网:https://docusaurus.io/zh-CN/docs/api/docusaurus-config
在这里你可以修改站点的标题、顶部的导航、页脚的链接等等。
创建第一篇博客
情况下,博客地址为:http://localhost:3000/blog
我们在安装目录下的 blog 文件夹中创建一个 markdown 文件 ,以创建日期格式命名,例如:2024-05-27-Hello 少数派.md
编写博客内容如下:
---
slug: /test
title: 你好,少数派
tags: [docusaurus、少数派]
---
你好,少数派,https://sspai.com/
其中 Markdown front matter 参考需要填写的字段。 开发模式下,系统支持热部署,所以修改完毕直接生效。