massivebox/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add SiYuan Blogging support

Browse source
This commit is contained in:
MassiveBox 2025-04-20 12:26:23 +02:00
parent bf3e635a1c
commit a3fb0634f6
Signed by: massivebox
GPG key ID: 9B74D3A59181947D
6 changed files with 188 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -18,10 +18,37 @@ npm run build
```
The website will be built to the `./dist` folder.
## Blogging with SiYuan
You can use SiYuan to write and manage your blog posts, instead of just placing the Markdown files in the
`src/content/blog` folder.
1. Install [SiYuan](https://b3log.org/siyuan/en/)
2. Start the application and keep it running in the background
3. Create a notebook for your blog posts, then right-click on it in the document tree, select `Settings`, then `Copy ID`
4. Set the environment variable `BLOG_NOTEBOOK_ID` to the notebook ID you copied earlier, like so:
`BLOG_NOTEBOOK_ID=your_notebook_id`
5. Run `npm run siyuan`
The documents in your SiYuan notebook must include the frontmatter inside a code block with `yaml` as the language.
Every line before the frontmatter will be deleted. The notes' title is entirely irrelevant, only the frontmatter
determines the slug and title.
You can embed attachments in your notes, and they will work normally in the blog.
You might need to restart the development server after running the script.
In order, to have an ogImage (also known as article cover):
1. Insert the image in your note before the YAML frontmatter block, so that it gets added to the Assets folder
2. Copy the asset link (Right-click on the image > copy `image URL`)
3. You can now remove the image from the note, or you can keep it there. It will not be shown twice in the blog post as
long as it's before the frontmatter.
- Generally, it's best to keep the image referenced somewhere, so that it's not suggested as an "unused asset".
- A simple and reasonable way to do this is to set the image as the document's cover image.
- Hover on the cover image, click `Assets` (photograph icon), and select your cover image.
## Blogging with Joplin
You can use Joplin to write and manage your blog posts, instead of just placing the Markdown files in the
`src/content/blog` folder.
If you prefer Joplin over SiYuan, that can also be used to generate the blog posts.
1. Install [Joplin](https://joplinapp.org/)
2. Start the Web Clipper Service: Tools > Options > Web Clipper > Start Web Clipper Service
@ -32,9 +59,6 @@ You can use Joplin to write and manage your blog posts, instead of just placing
The script will look for a notebook named `Blog`. It will then download all notes from that notebook, alongside their
attachments, and place them in the `src/content/blog` folder.
You can embed attachments in your notes, and they will work normally in the blog.
You might need to restart the development server after running the Joplin script.
In order, to have an ogImage (also known as article cover):
1. Add the image to the note, and change the alt text to `ogImage`. It will look like this:
```