About

Personal blog generated by jekyll on github pages

alexanderle.com

Tech Stack

• Jekyll 4.4.1 - Static site generator
• GitHub Pages - Hosting and deployment
• SCSS/Sass - CSS preprocessing
• Markdown - Content authoring
• HTMLHint & Stylelint - Code quality
• Google Analytics - Traffic tracking
• GitHub Actions - Automated workflows

Development

Prerequisites

• Ruby 2.7+ (recommend 3.x via Homebrew: brew install ruby)
• Node.js and npm

Local Setup

# Install Ruby dependencies
bundle install

# Install Node dependencies
npm install

Running Locally

# Start local server with drafts (http://127.0.0.1:4000)
bundle exec jekyll serve --drafts

# Or use npm script
npm run jekyll:serve

# Build site without serving
bundle exec jekyll build

Linting

This project uses HTMLHint and Stylelint for code quality. A pre-commit hook automatically runs linters before committing.

• npm run lint - Run HTML linting
• npm run lint:scss - Run SCSS linting
• npm run lint:scss:fix - Auto-fix SCSS issues

Configuration:

• HTML rules: .htmlhintrc
• SCSS rules: .stylelintrc.json

Pre-commit Hooks

Automated code quality checks run before each commit:

Husky (.husky/pre-commit):

• HTML and SCSS linting

pre-commit (.pre-commit-config.yaml):

• Post filename validation (kebab-case)

Post filenames must follow the format: YYYY-MM-DD-kebab-case-title.markdown

Commands:

• pre-commit run --all-files - Run all pre-commit hooks manually
• npm run prepare - Reinstall Husky hooks after changes
• --no-verify flag - Skip hooks temporarily

Mobile Blogging

Create blog posts from anywhere using GitHub Issues:

1. Create a new issue:

   • Open GitHub mobile app
   • Navigate to repository and tap "+" for new issue
   • Title: Your post title
   • Body: Your post content in markdown

2. Add tags (optional):

   • Include line: Tags: tag1, tag2 in the issue body

3. Working with drafts:

   • Create issue without the "new-post" label
   • Continue editing until ready
   • Add the "new-post" label when ready to publish

4. Publish post:

   • First create the issue WITHOUT the "new-post" label
   • Add the "new-post" label when ready to publish
   • Workflow creates properly formatted post file
   • Issue is automatically closed with link to published post

5. Edit existing posts:

   • Navigate to _posts folder in GitHub
   • Edit the markdown file directly

Image Optimization

Images are automatically optimized when added or modified in the repository:

1. How it works:

   • GitHub Actions workflow runs whenever images are added or modified
   • Uses the Calibre image optimization engine to compress images
   • JPEG and PNG files are compressed to 80% quality (good balance of size/quality)
   • Optimized images are automatically committed back to the repository

2. Adding images:

   • Place images in the assets folder
   • Reference in posts using markdown: ![Alt text](/assets/image.jpg)
   • Optimization happens automatically on commit

3. Manual optimization:

   • You can manually trigger optimization by running the workflow from the Actions tab
   • Select the "optimize-images" workflow and click "Run workflow"

Link Checker

Broken links are automatically checked:

• Runs weekly (Sundays at midnight)
• Runs on pushes to main that modify posts or pages
• Creates a GitHub issue if broken links are found

Build Validation

Pull requests are automatically validated:

• Jekyll build is tested on every PR
• Ensures site builds successfully before merging