MassiveBox's Website

A statically generated website and blog, built with Astro and based on the Astro Paper theme.

Check it out at massive.box.

Getting started

npm install
npm run dev

In order to compile the site, run

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
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

If you prefer Joplin over SiYuan, that can also be used to generate the blog posts.

1. Install Joplin
2. Start the Web Clipper Service: Tools > Options > Web Clipper > Start Web Clipper Service
3. Run npm run joplin
4. Allow the request for an API token on the Joplin app
   • You can also place the Joplin token in an .env file in the format JOPLIN_KEY=your_token.

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.

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:

   ![ogImage](:/0f409e2b6faf44e48c5c0d99453d02c0)
   

2. Copy the attachment ID (in this example, it's 0f409e2b6faf44e48c5c0d99453d02c0)
3. Paste it in your frontmatter like this:

   ogImage: ./0f409e2b6faf44e48c5c0d99453d02c0
   

   Note the . (dot) instead of : (colon)!

Uploading to WebDav

I have found that a quick and easy way to deploy the website is via WebDav and compatible software on the server side, like this plugin for Caddy.

To simplify uploading to WebDav, I have created a script, which can be run with npm run upload.

You have to set the following environment variables:

• WEBDAV_ENDPOINT: The URL of the WebDav server, e.g. https://example.com/webdav/
• WEBDAV_USERNAME: The username for the WebDav server
• WEBDAV_PASSWORD: The password for the WebDav server
• WEBDAV_PATH: The path to the folder on the server, e.g. /public_html/ (default: /)

The script will upload the ./dist folder, so make sure you run npm run build before the upload script.
Note that running the script will clear the remote folder before uploading the files.

License

The original Astro Paper is licensed under the MIT License, Copyright © 2025 Sat Naing.
Any change to the original code is licensed under the AGPLv3 License, Copyright © 2025 MassiveBox.