Foam Template for Gatsby Theme Primer Wiki
👋Another Foam template that use gatsby-theme-primer-wiki, Welcome to your new Foam Knowledge Base!
Examples
- Demo - (Source)
- Everything I Know by Owen - (Source)
- Foam Demo - (Source)
- Obsidian Demo - (Source)
- Gatsby Starter Demo - (Source)
Features
- Support Local search, full-text search.
- Support Graph Visualisation with canvas.
- Support Tags, Tags First, Generating tag pages, also connecting with graph visualisation.
- Support Gitbook styled
SUMMARY.md
for custom sidebar. - Support
[[WikiLink]]
, But you'd better use Link Reference Definitions with extensions,"foam.edit.linkReferenceDefinitions": "withExtensions"
- Support Light/Dark Theme
- Custom Header Nav Items
- Nested sidebar
- Support Google Analytics
- Support Sitemap/Robot
- SEO optimization
- Support path prefix
Principles
Here are my main ideas/principles in designing this theme.
- No vendor lock-in. The less vendor features you use, the better you'll be able to migrate.
[[Wikilink]]
is the only non-markdown feature supported by default, but nonetheless, it is recommended to use the standard markdown syntax, or if you edit with Foam, please use Wikilink with Link Reference Definitions. That give us the capability change our theme, or hosted place. - Use meta data instead of special characters. We should use
tags
as the document's metadata, not#tag
in the plain text. - Use tags instead of categories. Minimal subfolders.
Getting started
For new wiki
This documentation assumes that you have a GitHub account and have Visual Studio Code installed on your Linux/MacOS/Windows machine.
If you haven't yet, browse over to the main Foam documentation to get an idea of what Foam is and how to use it.
Press "Use this template" button at foam-template-gatsby-theme-primer-wiki (that's this repository!) to fork it to your own GitHub account. If you want to keep your thoughts to yourself, remember to set the repository private.
Clone the repository to your local machine and open it in VS Code.
Open the repository as a folder using the
File > Open...
menu item.When prompted to install recommended extensions, click Install all (or Show Recommendations if you want to review and install them one by one)
Delete all
.md
files you don't need, Change Site settings at.layouts/gatsby-config.js
, change your CNAME at.layouts/static/CNAME
, change your icon at.layouts/static/logo.png
, commit your changes, and push to github, change your page settings at Github, make sure you set the page branch togh-pages
, then when github actions runed, you can visit your site.
After setting up the repository, head to Getting Started to get familiar with your new knowledge base!
To learn more about how to use Foam, read the Recipes bubbles of the Foam documentation workspace.
And remember that you can always join our Foam community on Discord!
For exist wiki
Exist Wiki
- Clone this repo to your local machine
git clone https://github.com/theowenyoung/foam-template-gatsby-theme-primer-wiki.git
- Copy
.layouts
,.github
.gitignore
to your wiki folder.
Config
See here
Local Preview
cd .layoutsnpm inpm start
Deploy
Deploy to Github Pages, see .github/workflows/deploy.yml
,
Path Prefix
If you want deploy your site with prefix path,
- change
gatsby-config.js
with:
module.exports = {pathPrefix: `/blog`,}
- set your build script with
gatsby build --prefix-paths
,
- Local Preview with
gatsby serve --prefix-paths
Also see the original docs: https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/#add-to-gatsby-configjs
Using Foam
We've created a few Bubbles (markdown documents) to get you started.
- Inbox - a place to write down quick notes to be categorized later
- Getting Started - learn how to use your Foam workspace
- Todo - a place to keep track of things to do
In the docs
directory you can find everything you need to learn the basics of Foam.