TechBlog-Baton は、複数の外部ブログの最新記事を自動的に取得・表示するJekyllベースのサイトです。GitHub Actionsを活用して、記事のURLを追加するだけでタイトルとサムネイル画像を自動的に取得し、サイトに反映します。
初めてリポジトリをクローンする場合やセットアップが必要な場合は、以下の手順に従ってください。
git clone [email protected]:Findy/TechBlog-Baton.git
cd TechBlog-Baton_data/external_articles.yml: 外部ブログのURLを管理するファイル。fetch_opengraph.py: URLからOpen Graphメタデータを取得するスクリプト。.github/workflows/update_articles.yml: GitHub Actionsのワークフローファイル。_includes/article_list.html: 記事一覧を表示するテンプレート。assets/css/style.css: スタイルシート。index.md: ホームページのMarkdownファイル。
新しいブログ記事をサイトに追加する際の手順を以下に示します。この手順に従うことで、ローカル環境を使用せずにGitHub上で全ての操作を完結できます。
-
GitHubリポジトリにアクセスし、
_data/external_articles.ymlファイルを開きます。 -
新しい記事のURLを追加します。以下のように、
urlフィールドを追加してください。articles: - url: "https://tech.findy.co.jp/entry/2024/09/20/090000" - url: "https://engineering.visional.inc/blog/491/soda/" - url: "https://example.com/new-article" # 新しい記事を追加
ポイント:
- 各記事はリスト形式で記述します。
- コメント（
#）を使用して説明を追加することも可能です。
-
ファイルを編集後、ページ下部の「Commit changes」ボタンをクリックします。
-
コミットメッセージを入力します。例:
Add new article URL: https://example.com/new-article -
「Commit changes」をクリックして変更を保存します。
-
GitHub Actionsの実行を確認します。リポジトリの「Actions」タブに移動し、「Update Articles Data」ワークフローがトリガーされていることを確認します。
-
ワークフローの進行状況を確認します。成功すれば、
_data/articles_data.ymlが更新され、サイトが再ビルドされます。
-
数分待って、GitHub Pagesがサイトを再ビルドします。
-
サイトにアクセスし、新しく追加した記事が正しく表示されていることを確認します。
例:
https://あなたのユーザー名.github.io/リポジトリ名/
ローカルでサイトを確認する場合、以下の手順でJekyll環境を構築してください。
- お好きな方法でRuby 3.1以上をインストールしてくだい
-
bundle installコマンドを実行して、必要なGemをインストールします。bundle install
-
ローカルサーバーを起動するには、以下のコマンドを実行します。
bundle exec jekyll serve -
ローカルサーバーが起動したら、ブラウザで以下のURLにアクセスしてサイトを確認できます。
http://localhost:4000
-
「Actions」タブに移動します。
-
「Update Articles Data」ワークフローを選択し、最新の実行ログを確認します。
-
エラーや警告がないかチェックし、必要に応じて修正します。
-
_data/articles_data.ymlが最新の状態に更新されていることを確認します。 -
YAMLの構文確認:
- インデントやコロンの後にスペースが必要です。
articles: - url: "https://example.com/new-article" title: "新しい記事のタイトル" image: "https://example.com/path/to/eyecatch.jpg" published: "2024-04-01"
assets/css/style.css を編集して、サイトのデザインをカスタマイズできます。
/* コンテナ全体のスタイル */
.container {
display: block;
height: auto;
overflow: visible;
}
/* メインコンテンツのスタイル */
.content {
width: 100%;
padding: 20px;
}
/* 記事アイテムのスタイル */
.article-item {
text-align: center;
margin-bottom: 20px;
}
/* サムネイル画像のスタイル */
.thumbnail {
width: 100%;
max-width: 180px;
height: auto;
display: block;
margin: 10px auto;
border-radius: 5px;
}
/* 公開日のスタイル */
.published-date {
font-size: 0.9em;
color: #666;
margin-bottom: 5px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
/* サムネイルの最大幅を調整 */
.thumbnail {
max-width: 150px;
}
}
@media (max-width: 600px) {
/* サムネイルがさらに狭くなる場合 */
.thumbnail {
max-width: 120px;
}
}