配信/最適化¶
サイト配信とパフォーマンス最適化について説明します。
配信方法¶
GitHub Pages¶
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Python
uses: actions/setup-python@v4
with:
python-version: '3.x'
- name: Install dependencies
run: pip install mkdocs-material
- name: Deploy
run: mkdocs gh-deploy --force
Netlify¶
[build]
command = "mkdocs build"
publish = "site"
[build.environment]
PYTHON_VERSION = "3.8"
Vercel¶
{
"buildCommand": "mkdocs build",
"outputDirectory": "site",
"installCommand": "pip install mkdocs-material"
}
パフォーマンス最適化¶
画像最適化¶
- WebP形式の使用
- 適切なサイズ設定
- 遅延読み込み
- CDN活用
CSS/JS最適化¶
plugins:
- minify:
minify_html: true
minify_js: true
minify_css: true
キャッシュ設定¶
extra:
cache:
enabled: true
ttl: 3600
CDN設定¶
Cloudflare¶
- DNS設定
- SSL証明書
- キャッシュルール
- セキュリティ設定
AWS CloudFront¶
- ディストリビューション設定
- オリジン設定
- キャッシュ動作
- SSL証明書
監視・分析¶
Core Web Vitals¶
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
測定ツール¶
- Google PageSpeed Insights
- Lighthouse
- WebPageTest
- GTmetrix
セキュリティ¶
HTTPS設定¶
- SSL証明書
- HSTS設定
- セキュリティヘッダー
セキュリティヘッダー¶
extra:
security:
csp: "default-src 'self'"
hsts: "max-age=31536000"
自動化¶
CI/CD¶
- 自動ビルド
- 自動デプロイ
- テスト実行
- 品質チェック
監視¶
- アップタイム監視
- パフォーマンス監視
- エラー監視
- アラート設定