About

Personal blog generated by jekyll on github pages

alexanderle.com

Tech Stack

• Jekyll 4.2.0 - 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

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

Available commands:

• 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 using Husky:

Setup location: .husky/pre-commit

To modify the hooks:

1. Edit .husky/pre-commit to add/remove linting steps
2. Use npm run prepare to reinstall hooks after changes
3. Add --no-verify to git commit to 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"