中文站点： https://www.docusaurus.cn/

image.png

项目结构

  1. my-website
  2. ├── blog
  3. │   ├── 2019-05-28-hola.md
  4. │   ├── 2019-05-29-hello-world.md
  5. │   └── 2020-05-30-welcome.md
  6. ├── docs
  7. │   ├── doc1.md
  8. │   ├── doc2.md
  9. │   ├── doc3.md
  10. │   └── mdx.md
  11. ├── package.json
  12. ├── src
  13. │   ├── css
  14. │   │   └── custom.css
  15. │   └── pages
  16. │       ├── styles.module.css
  17. │       └── index.js
  18. ├── static
  19. │   └── img
  20. ├── docusaurus.config.js
  21. ├── package.json
  22. ├── README.md
  23. ├── sidebars.js
  24. └── yarn.lock
  • /blog/ - 里面就是写博客文章的，都是 markdown 文件。
  • /docs/ - 里面就是写文档的，也都是 markdown 文件。
  • /src/- 源代码文件夹，里面有一个css文件夹，然后它里边有个custom.css里面是写自定义的 css 代码的。
  • /src/pages - 里边放一些自定义的页面，使用 react 语法来写。
  • /static/ - 放静态资源文件，这些文件会出现在最后打包出来的静态网站里面，在它的根目录下边，它下边的 img 文件夹是放静态图片的。
  • /docusaurus.config.js - 这个是配置这个站点的。
  • /package.json - node.js 的工程配置文件。
  • /sidebar.js - 配置文档页面侧边栏，只有文档页面才有，用它来定义文档的目录结构。

    使用 Vercel 云端部署网站

    此处 Vercel 的功能，相当于 GitHub Action + GitHub Pages，即自动持续部署 + 静态网站展示。选择 Vercel 是因为其生成的静态网站，国内访问速度相比 GitHub Pages 会快很多。

https://www.bilibili.com/video/av94703630