Jekyll-сайт на GitHub Pages со сборкой через Tailwind CSS + Webpack + GLightbox.
- Ruby 3.x (
ruby-full) - Node.js 20+
- npm
Проверить:
ruby --version
node --version
npm --versiongem install bundler --user-installПосле этого добавить путь в PATH. Найти его можно командой gem env — поле USER INSTALLATION DIRECTORY, добавить /bin к нему. Для удобства добавить в ~/.bashrc или ~/.zshrc:
export PATH="$HOME/.local/share/gem/ruby/3.2.0/bin:$PATH"Применить:
source ~/.bashrcКлючевой момент — все gem-ы ставятся в vendor/bundle/ внутри проекта, не в систему и не в домашнюю директорию. Это изолированная установка, не требует sudo и не засоряет систему.
bundle config set --local path 'vendor/bundle'
bundle installНастройка path сохраняется в .bundle/config — bundler будет использовать её автоматически при каждом следующем запуске.
npm installЗапустить Tailwind (watch) и Jekyll (livereload) параллельно:
export PATH="$HOME/.local/share/gem/ruby/3.2.0/bin:$PATH"
npm run devJekyll слушает на 0.0.0.0 — сайт доступен как локально на http://localhost:4000, так и по сети на http://<ip-машины>:4000. Livereload использует дополнительный порт 35729 — оба порта должны быть открыты.
export PATH="$HOME/.local/share/gem/ruby/3.2.0/bin:$PATH"
npm run buildРезультат в папке _site/.
| Команда | Что делает |
|---|---|
npm run dev |
Tailwind watch + Jekyll livereload |
npm run build |
Полная сборка (CSS + JS + Jekyll) |
npm run build:front |
Только Tailwind + Webpack |
npm run build:css |
Только Tailwind |
npm run build:js |
Только Webpack |
├── .github/workflows/deploy.yml # GitHub Actions — автодеплой на push в main
├── _articles/ # Статьи (Jekyll collection)
├── _news/ # Новости (Jekyll collection)
├── _layouts/
│ ├── default.html # Layout для статей (topbar + сайдбар)
│ └── home.html # Layout главной страницы (topbar + hero)
├── _includes/
│ ├── gallery.html # Галерея через GLightbox
│ └── video.html # Видео-плеер
├── assets/
│ ├── css/main.css # Генерируется (не коммитить)
│ └── js/bundle.js # Генерируется (не коммитить)
├── src/
│ ├── css/input.css # Tailwind + стили галереи
│ └── js/main.js # GLightbox + Copy button + навигация
├── vendor/bundle/ # Ruby gems (не коммитить)
├── _config.yml
├── Gemfile
├── Gemfile.lock # Коммитить — фиксирует версии gems
├── package.json
├── package-lock.json # Коммитить — фиксирует версии npm
├── tailwind.config.js
└── webpack.config.js
Деплой происходит автоматически при push в ветку main через GitHub Actions.
Перед первым деплоем убедиться что в настройках репозитория: Settings → Pages → Source → GitHub Actions