Writing a New Note
Back to notesCreate a Markdown note, add a title and date, insert images, and generate a web page.
Notes live in notes. Each note is a separate Markdown file.
Résumé content is also maintained in Markdown: projects live in content/projects, work experience in content/work-experience, and activities in content/extracurricular-activities. Copy the matching template from templates to add an entry. A record's ## Summary section appears in résumé lists, while the remaining sections appear on its detail page.
1. Create a Note
Copy templates/note.md into notes, for example as my-first-note.md. Use lowercase letters, numbers, and hyphens in the filename. Each note needs only one English file.
Start the note with this metadata:
---
title: My First Note
date: 2026-10-14
summary: A short description of what this note covers.
tags: Learning, Journal
---
Keep each metadata field on a single line. The title appears on the note page and in note lists. The date controls sorting. Both the homepage and the Notes index show only titles and dates; summaries and tags appear on the note detail page.
2. Write the Body
Use ## for section headings and regular paragraphs for the body. Lists, blockquotes, code blocks, and tables are supported.
Use $...$ for inline math and $$...$$ for display equations:
The stress–strain relation is $\sigma = E\varepsilon$.
$$
E = \frac{\sigma}{\varepsilon}
$$
3. Add Images
Copy an image into assets/images, then add it to the note:
*Figure 1. A caption below the image.*
PNG, JPG, WebP, SVG, and other browser-supported image formats work. For local images, use filenames containing letters and numbers.
4. Preview the Result
Run this command in the project folder:
npm run dev
Open the local website. Saving a note regenerates the pages automatically; refresh your browser to see the changes.
If you open the local HTML files directly, first run:
npm run build
npm run check
Then open dist/notes/index.html. Images, math styles, and fonts are all included in the generated website folder.
5. Test Images and Math
Open Images and Math Test to see images, equations, matrices, and tables in action, then use the same syntax in your own notes.