Skip to content

Commit 63a8ec7

Browse files
yahyuneeclaude
yahyunee
and
claude
committed
Update blog upload workflow doc
Reflect the actual workflow used: compress images with sips before committing, keep originals in Myself/previous_works, mention the lightbox, and note GitHub Pages size/bandwidth limits. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 3fcadd7 commit 63a8ec7

1 file changed

Lines changed: 72 additions & 58 deletions

File tree

‎posts/README.md‎

Lines changed: 72 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
1-
# Blog Posts — How to Upload
1+
# Blog Posts — Upload Workflow
22

3-
All blog posts live in **`posts/posts.json`**, and all images go in **`posts/images/`**.
4-
The blog page (`blog.html`) fetches the JSON file at runtime and renders posts newest-first.
3+
Posts live in **`posts/posts.json`**. Images live in **`posts/images/`**.
4+
`blog.html` fetches the JSON at runtime and renders posts **newest-first** (sorted by `date`).
5+
Clicking any image opens a fullscreen lightbox (← / → / Esc).
6+
7+
---
8+
9+
## Where things live
10+
11+
```
12+
WEBSITE/ ← git repo (yahyunee.github.io)
13+
├── blog.html, blog.js, styles.css
14+
└── posts/
15+
├── posts.json ← edit this to add posts
16+
├── images/ ← put compressed photos here
17+
│ └── alcf-hackathon-2026-1.jpeg
18+
└── README.md ← you are here
19+
20+
Myself/previous_works/conferences/... ← NOT in the git repo
21+
└── 2604_ALCF_GPU_Hackathon/images/... ← keep originals here
22+
```
23+
24+
**Rule:** Originals (large camera files) stay in `Myself/previous_works/...`. Only **compressed copies** go into `posts/images/`. This keeps the repo small and the site fast.
525

626
---
727

@@ -11,91 +31,85 @@ Each post in `posts.json` is one object inside the top-level array:
1131

1232
```json
1333
{
14-
"id": "unique-slug", // unique identifier in kebab-case (used for the URL anchor #post-<id>)
15-
"title": "Post title", // shown as the heading
16-
"date": "YYYY-MM-DD", // used for sorting (newest first) and displayed under the title
17-
"location": "Optional place", // shown after the date (omit or use "" if not applicable)
18-
"description": "Short paragraph...", // 1–4 sentences, plain text (HTML is escaped for safety)
19-
"images": ["images/file1.jpg", ...] // paths relative to /posts/, can be empty []
34+
"id": "unique-slug", // kebab-case, used for URL anchor #post-<id>
35+
"title": "Post title", // heading
36+
"date": "YYYY-MM-DD", // controls sort order (newest first)
37+
"location": "Optional place", // shown after date; omit or "" if N/A
38+
"description": "1-4 sentence paragraph",
39+
"images": ["images/file1.jpg", ...] // relative to /posts/, [] if none
2040
}
2141
```
2242

23-
Image gallery layout adapts automatically:
24-
- 1 image → full-width
25-
- 2 images → side by side
26-
- 3+ images → responsive grid (min 200px per cell)
43+
Gallery layout adapts automatically: 1 → full width, 2 → side by side, 3+ → responsive grid.
2744

2845
---
2946

30-
## Step-by-step: add a new post
47+
## Workflow (the steps Claude follows)
3148

32-
### 1. Drop your photos into `posts/images/`
49+
### 1. Gather the source material
3350

34-
Use lowercase, kebab-case filenames like `alcf-2026-1.jpg`. Compress large photos (~1500px max width is plenty).
51+
Find the event folder under `Myself/previous_works/conferences/` (or wherever the originals live). Skim any program PDFs or slides for accurate **dates, location, and team name** — don't guess.
3552

36-
```
37-
posts/
38-
├── images/
39-
│ ├── alcf-2026-1.jpg ← your new photos
40-
│ └── alcf-2026-2.jpg
41-
├── posts.json
42-
└── README.md
53+
### 2. Pick photos and compress them
54+
55+
Camera JPEGs are typically 4000+ px wide and 5-8 MB each. Resize to **max 1600 px wide at quality ~80** before committing. From `posts/images/`:
56+
57+
```bash
58+
# resize in place (originals are safe in Myself/previous_works/)
59+
sips --resampleWidth 1600 -s formatOptions 80 photo.jpeg --out photo.jpeg
4360
```
4461

45-
### 2. Add an entry to `posts.json`
62+
Target: **under ~500 KB per image**. Use lowercase kebab-case filenames tied to the event, e.g. `alcf-hackathon-2026-1-group.jpeg`.
4663

47-
Open `posts/posts.json` and add a new object at the **top of the array** (order doesn't matter for display since posts are sorted by date, but newest-on-top is easier to read in the file).
64+
### 3. Add the entry to `posts.json`
4865

49-
```json
50-
[
51-
{
52-
"id": "alcf-hackathon-2026",
53-
"title": "ALCF GPU Hackathon",
54-
"date": "2026-04-15",
55-
"location": "Argonne National Laboratory",
56-
"description": "Spent the week scaling up our foundation model training on Polaris GPUs. Learned a ton about distributed training and met amazing researchers from across the country.",
57-
"images": ["images/alcf-2026-1.jpg", "images/alcf-2026-2.jpg"]
58-
},
59-
{
60-
"id": "blog-opened",
61-
"title": "Blog section opened!",
62-
"...": "..."
63-
}
64-
]
65-
```
66+
Order in the file doesn't matter (sort is by `date` at render time), but newest-on-top is easier to read. Don't forget commas between entries.
6667

67-
Don't forget the comma between entries. Validate with:
68+
### 4. Validate the JSON
6869

6970
```bash
70-
python3 -c "import json; json.load(open('posts/posts.json'))" && echo OK
71+
python3 -c "import json, sys; data=json.load(open('posts/posts.json')); print('OK,', len(data), 'posts')"
7172
```
7273

73-
### 3. Commit and push
74+
### 5. Commit and push
75+
76+
From the `WEBSITE/` repo root:
7477

7578
```bash
76-
git add posts/
77-
git commit -m "Add ALCF hackathon post"
78-
git push
79+
git add posts/posts.json posts/images/
80+
git commit -m "Add <event> blog post"
81+
git push origin main
7982
```
8083

81-
GitHub Pages redeploys within ~1 minute. Refresh `blog.html` to see the post.
84+
GitHub Pages redeploys in ~1 minute.
8285

8386
---
8487

85-
## Easiest way: just ask Claude
86-
87-
If editing JSON by hand is annoying, just tell Claude in chat:
88+
## Just ask Claude
8889

89-
> "Add a blog post titled 'ALCF GPU Hackathon', date 2026-04-15, location Argonne National Laboratory. Description: spent the week scaling foundation model training on Polaris GPUs. Here are the photos: \[attach images or give paths\]."
90+
> "Add a blog post for the ALCF GPU Hackathon — photos are in `Myself/previous_works/conferences/2604_ALCF_GPU_Hackathon/`."
9091
9192
Claude will:
92-
1. Save the images to `posts/images/` with sensible filenames
93-
2. Append the entry to `posts.json`
94-
3. Validate the JSON
93+
1. Look up dates/location/team from the source folder
94+
2. Pick photos, **compress them with `sips`**, copy into `posts/images/` with sensible filenames
95+
3. Append the entry to `posts.json` and validate
9596
4. Commit and push
9697

9798
---
9899

99-
## Removing or editing a post
100+
## Editing or deleting a post
101+
102+
Open `posts.json` and edit/delete the object. Also delete unused images from `posts/images/`. Commit and push.
103+
104+
---
105+
106+
## Size and bandwidth limits (FYI)
107+
108+
| Limit | Threshold |
109+
|---|---|
110+
| Single file | 100 MB hard reject; 50 MB warning |
111+
| Repo size | ~1 GB soft, 5 GB recommended ceiling |
112+
| GitHub Pages site | 1 GB built |
113+
| Pages bandwidth | 100 GB/month soft |
100114

101-
Just open `posts.json` and edit/delete the relevant object. Delete its images from `posts/images/` too if you no longer need them. Commit and push.
115+
At ~400 KB per compressed photo, the 1 GB site limit ≈ 2,500 photos. Not a near-term concern as long as the compression step happens.

0 commit comments

Comments
 (0)