Personal Blog Powered By Foam and Docusaurus

Tech Stacks behind:

• Foam: knowledge management system for providing rich features in vscode.
  • Graph Visualization
  • Link Autocompletion
  • Sync links on file rename
  • Templates
  • Generate references for your wikilinks
  • ...
• Docusaurus: static site generator to build a static site from Foam knowledge content.
  • SEO friendly
  • Powered by MDX
  • Search
  • Document Versioning
  • Internationalization (i18n)
• GitHub Actions: deploy to GitHub Pages.

Project Structure:

❯ tree -L 3
.
├── README.md
├── _layouts
├── _ssg
│   └── docusaurus
│       ├── babel.config.js
│       ├── build
│       ├── docusaurus.config.js
│       ├── package-lock.json
│       ├── package.json
│       ├── sidebars.js
│       ├── src
│       └── static
├── assets
├── attachments
├── blog
└── docs

Local test:

# dev
npm run start --prefix _ssg/docusaurus

# prod
npm run build --prefix _ssg/docusaurus
npm run serve --prefix _ssg/docusaurus

Foam: A personal knowledge management and sharing system for VSCode

Docusaurus: Easy to maintain open source documentation websites.

Swizzling

Here're @docusaurus/theme-classic components being customized by swizzling,

npm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap --typescript
npm run swizzle @docusaurus/theme-classic BlogPostItem/Footer/ReadMoreLink -- --eject --typescript
npm run swizzle @docusaurus/theme-classic BlogTagsPostsPage -- --eject --typescript
npm run swizzle @docusaurus/theme-classic SearchBar -- --eject --typescript

Layout

Grid | Infima

CSS Styles

Colors | Infima

I used the default colors shades from Infima.

Icon Management

Bootstrap Icons · Official open source SVG icon library for BootstrapBootstrapGitHubTwitterOpen CollectiveBootstrap

Font Awesome

Tabler Icons - 1400+ Open source free SVG icons

React SVG: How to use SVGs best in React - CopyCat Blog

Metadata Setting

📦 plugin-content-blog | Docusaurus

📦 plugin-content-docs | Docusaurus

Front Matter VS Code Extension

Introduction | Front Matter

Import Code from GitHub Repository

Docusaurus refer code snippets from GitHub repositories

GitHub - saucelabs/docusaurus-theme-github-codeblock: A Docusaurus v2 plugin that supports referencing code examples from public GitHub repositories.

References

To be admit I am not good at UI design and development, however there many excellent docusaurus showcase in open source.

Thanks to tinaeldevresse, I got ideas to design my blog website by referring his blog library.