【Docusaurus】系列——利用Docusaurus搭建开源项目在线文档,个人博客。
1、简介
Docusaurus是Facebook开源的文档搭建网站,国内国外众多的开源项目均使用了Docusaurus,基于React开发,文档编写支持Markdown语法,使用简单,部署简单,使用者可以专注于文档本身。可部署在 GitHub Pages、vercel等网站不需要服务器。
Docusaurus可用于创建个人网站、个人博客、产品网站、开源项目文档等。
2、搭建示例
https://chatgpt-java.unfbx.com
3、本地环境搭建
3.1、node环境
Docusaurus依赖node.js,先安装node环境,已经有node环境的可以直接跳过。
Node.js下载地址:https://nodejs.org/en/download
3.2、创建Docusaurus网站
# my-website 表示项目名称
npx create-docusaurus@latest my-website classic
3.3、本地运行
npm run start
打开:http://localhost:3000/ 即可看到本地地址
4、配置文件
Docusaurus支持很多自定义配置,都在docusaurus.config.js配置文件中展示。
我贴上一份自己的配置文件
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Chatgpt-Java',
tagline: 'ChatGPT Java SDK、支持OpenAI官方所有接口、开箱即用。',
favicon: 'img/favicon.ico',
// Set the production url of your site here
url: 'https://chatgpt-java.unfbx.com',
// Set the /<baseUrl>/ pathname under which your site is served
// For GitHub pages deployment, it is often '/<projectName>/'
baseUrl: '/',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'unfbx', // Usually your GitHub org/user name.
projectName: 'chatgpt-java-doc', // Usually your repo name.
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'zh',
locales: ['zh','en'],
},
scripts: [
{
src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxx',
async: true
}
],
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/Grt1228/chatgpt-java-doc/tree/main/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/Grt1228/chatgpt-java-doc/tree/main/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
// Replace with your project's social card
image: 'img/docusaurus-social-card.jpg',
announcementBar: {
id: 'support_us',
content:'顶部提示信息',
textColor: '#ffffff',
isCloseable: true,
},
navbar: {
title: 'Chatgpt-Java',
logo: {
alt: 'Chatgpt-Java Logo',
src: 'img/logo.png',
},
items: [
{
type: 'docSidebar',
sidebarId: 'tutorialSidebar',
position: 'left',
label: '快速开始',
},
{to: 'https://javadoc.io/doc/com.unfbx/chatgpt-java', label: 'Java Doc', position: 'left'},
{
href: 'https://github.com/Grt1228/chatgpt-java',
label: 'GitHub',
position: 'right',
},
{
to: 'https://www.unfbx.com',
label: 'Blog ',
position: 'right',
},
],
},
footer: {
style: 'dark',
//配置底部菜单信息 我用不到直接注释了
/**links: [
{
title: 'Docs',
items: [
{
label: '快速开始',
to: '/docs',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: 'https://unfbx.com',
},
{
label: 'GitHub',
href: 'https://github.com/Grt1228/chatgpt-java',
},
],
},
],*/
copyright: `Copyright © ${new Date().getFullYear()} Chatgpt-Java.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
4.1、几个比较常用的配置
4.1.1、配置百度统计
scripts: [
{
src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxx',
async: true
}
],
4.1.2、配置顶部banner信息
在配置项themeConfig下新增配置:
announcementBar: {
id: 'support_us',
content:'顶部提示信息',
textColor: '#ffffff',
isCloseable: true,
},
下一篇文章聊一聊怎么部署Docusaurus到vercel托管并自定义域名。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。