94 lines
No EOL
4.2 KiB
Markdown
94 lines
No EOL
4.2 KiB
Markdown
# MassiveBox's Website
|
|
|
|
A statically generated website and blog, built with [Astro](https://astro.build/) and based on the
|
|
[Astro Paper](https://astro-paper.pages.dev/) theme.
|
|
|
|
Check it out at [massive.box](https://massive.box).
|
|
|
|
## Getting started
|
|
|
|
```shell
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
In order to compile the site, run
|
|
```shell
|
|
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
|
|
|
|
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
|
|
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:
|
|
```
|
|
|
|
```
|
|
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](https://github.com/mholt/caddy-webdav) 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](https://github.com/satnaing/astro-paper) is licensed under the MIT License, Copyright © 2025
|
|
[Sat Naing](https://github.com/satnaing).
|
|
Any change to the original code is licensed under the AGPLv3 License, Copyright © 2025 MassiveBox. |