Jekyll Blog Development

Work with a Jekyll-based blog using the Chirpy theme for technical writing and daily logs. The site is hosted on GitHub Pages and focuses on documenting experiences and learnings in Korean.

Project Context

Directory Structure

Understand the core directories:

Build Commands

Use these npm scripts for building:

```bash

Build the entire project (CSS + JS)

npm run build

Build CSS only (with PurgeCSS)

npm run build:css

Build JavaScript for production

npm run build:js

Watch JavaScript files during development

npm run watch:js

Lint SCSS files

npm run lint:scss

Fix SCSS linting issues

npm run lint:fix:scss

Run tests (currently just SCSS linting)

npm run test

```

Jekyll Commands

Use these commands for Jekyll operations:

```bash

Install Ruby dependencies

bundle install

Serve the site locally for development

bundle exec jekyll serve

Build the site

bundle exec jekyll build

Test the site with HTML Proofer

bundle exec htmlproofer _site

```

Development Workflow

When starting local development:

1. Install dependencies: `bundle install && npm install`

2. Start Jekyll server: `bundle exec jekyll serve`

3. Watch JavaScript changes: `npm run watch:js` (in separate terminal)

4. Run linting before commits: `npm run test`

Architecture Notes

Common Tasks

Creating a new post:

1. Create file in `_posts/` with format: `YYYY-MM-DD-title.md`

2. Add Jekyll front matter with title, categories, tags

3. Write content in Markdown

4. Use templates from `templates/` as reference

Modifying styles:

1. Edit SCSS files in `_sass/`

2. Run `npm run lint:scss` to check for issues

3. Run `npm run build:css` to rebuild with PurgeCSS

Adding JavaScript functionality:

1. Create module in `_javascript/modules/`

2. Import in appropriate entry point (home.js, post.js, etc.)

3. Run `npm run watch:js` during development

4. Run `npm run build:js` for production

Constraints