# Qiita APIを用いたデータ取得とGitHub Pagesでの静的サイト公開

## 1-1 はじめに
この記事では、Qiita APIを用いてデータを取得し、そのデータを利用してGitHub Pagesで静的サイトを公開する方法について詳しく解説します。Qiita APIを利用することで、Qiita上のコンテンツをプログラムで取得し、自分のサイトに表示することができます。そしてGitHub Pagesを使用すれば、無料でホスティングが可能です。

## 1-2 目次
1. はじめに
2. Qiita APIの利用方法
   - 2-1 OAuthトークンの取得
   - 2-2 APIを用いたデータ取得
3. データの活用方法
   - 3-1 JSONデータの整形
   - 3-2 静的HTMLの生成
4. GitHub Pagesの設定
   - 4-1 リポジトリの作成
   - 4-2 GitHub Pagesのセットアップ
5. デプロイと確認
   - 5-1 デプロイ手順
   - 5-2 正常動作の確認
6. まとめ

## 2-1 Qiita APIの利用方法

### 2-1-1 OAuthトークンの取得
Qiita APIは、個人のアクセストークンを使用して情報を取得します。Qiita公式サイトでアカウントにログインし、指定された手順でトークンを取得してください。

### 2-1-2 APIを用いたデータ取得
Python言語を用いたデータ取得の例を以下に示します。Pythonの`requests`ライブラリを使用して、Qiita APIから記事情報を取得します。

![img](/mosaic-code.jpg)

## 3-1 データの活用方法

### 3-1-1 JSONデータの整形
APIから取得したJSONデータを、必要な形式に整形します。ここでは、タイトルとURLを取得し、テーブル形式でHTMLに表示します。

![img](/mosaic-code.jpg)

### 3-2 静的HTMLの生成
取得・整形したデータを用いて静的HTMLを生成します。

![img](/mosaic-code.jpg)

## 4-1 GitHub Pagesの設定

### 4-1-1 リポジトリの作成
GitHub上で新しいリポジトリを作成し、生成したHTMLファイルをそのリポジトリに追加します。

### 4-2-2 GitHub Pagesのセットアップ
GitHubリポジトリの「Settings」タブで、「GitHub Pages」セクションを見つけ、デプロイブランチを設定します。「Source」から「main branch」や「master branch」を選びます。

## 5-1 デプロイと確認

### 5-1-1 デプロイ手順
ローカルリポジトリからGitHubリポジトリへ変更をプッシュします。次に、サイトが正常に表示されることを確認するため、生成されたリンクをクリックします。

![img](/mosaic-code.jpg)

### 5-2 正常動作の確認
GitHub Pagesが設定されていれば、リポジトリの「Environments」セクションに公開URLが表示されます。当該URLを使って全てが期待通りに機能しているかを確認します。

## まとめ
Qiita APIを使ってQiitaからデータを取得し、GitHub Pagesでウェブサイトとして公開するプロセスを紹介しました。エンドツーエンドの手順として、APIトークンの取得からデータの整形、GitHubリポジトリの作成、GitHub Pagesの設定までの全てのステップを追って説明しました。データの自動取得とページのホスティングを組み合わせることで、効率的かつ無料でコンテンツを配信できます。これを機に、パーソナルな技術ブログを始めてみてはいかがでしょうか。

[cv:issue_marketplace_engineer] [cv:issue_marketplace_engineer]

# Qiita APIを用いたデータ取得とGitHub Pagesでの静的サイト公開

## 1-1 はじめに
この記事では、Qiita APIを用いてデータを取得し、そのデータを利用してGitHub Pagesで静的サイトを公開する方法について詳しく解説します。Qiita APIを利用することで、Qiita上のコンテンツをプログラムで取得し、自分のサイトに表示することができます。そしてGitHub Pagesを使用すれば、無料でホスティングが可能です。

## 1-2 目次
1. はじめに
2. Qiita APIの利用方法
   - 2-1 OAuthトークンの取得
   - 2-2 APIを用いたデータ取得
3. データの活用方法
   - 3-1 JSONデータの整形
   - 3-2 静的HTMLの生成
4. GitHub Pagesの設定
   - 4-1 リポジトリの作成
   - 4-2 GitHub Pagesのセットアップ
5. デプロイと確認
   - 5-1 デプロイ手順
   - 5-2 正常動作の確認
6. まとめ

## 2-1 Qiita APIの利用方法

### 2-1-1 OAuthトークンの取得
Qiita APIは、個人のアクセストークンを使用して情報を取得します。Qiita公式サイトでアカウントにログインし、指定された手順でトークンを取得してください。

### 2-1-2 APIを用いたデータ取得
Python言語を用いたデータ取得の例を以下に示します。Pythonの`requests`ライブラリを使用して、Qiita APIから記事情報を取得します。

```python
import requests

def get_qiita_articles(user_id, token):
    url = f"https://qiita.com/api/v2/users/{user_id}/items"
    headers = {"Authorization": f"Bearer {token}"}
    
    response = requests.get(url, headers=headers)
    if response.status_code == 200:
        return response.json()
    else:
        print("Failed to retrieve data:", response.status_code)
        return None
```

## 3-1 データの活用方法

### 3-1-1 JSONデータの整形
APIから取得したJSONデータを、必要な形式に整形します。ここでは、タイトルとURLを取得し、テーブル形式でHTMLに表示します。

```python
def create_html_content(articles):
    html_content = "<h1>My Qiita Articles</h1><table><tr><th>Title</th><th>URL</th></tr>"
    
    for article in articles:
        title = article['title']
        url = article['url']
        html_content += f"<tr><td>{title}</td><td><a href='{url}'>{url}</a></td></tr>"
        
    html_content += "</table>"
    return html_content
```

### 3-2 静的HTMLの生成
取得・整形したデータを用いて静的HTMLを生成します。

```python
articles = get_qiita_articles("your_user_id", "your_access_token")
html_content = create_html_content(articles)

with open("index.html", "w") as file:
    file.write(html_content)
```

## 4-1 GitHub Pagesの設定

### 4-1-1 リポジトリの作成
GitHub上で新しいリポジトリを作成し、生成したHTMLファイルをそのリポジトリに追加します。

### 4-2-2 GitHub Pagesのセットアップ
GitHubリポジトリの「Settings」タブで、「GitHub Pages」セクションを見つけ、デプロイブランチを設定します。「Source」から「main branch」や「master branch」を選びます。

## 5-1 デプロイと確認

### 5-1-1 デプロイ手順
ローカルリポジトリからGitHubリポジトリへ変更をプッシュします。次に、サイトが正常に表示されることを確認するため、生成されたリンクをクリックします。

```bash
git add index.html
git commit -m "Add Qiita articles list"
git push origin main
```

### 5-2 正常動作の確認
GitHub Pagesが設定されていれば、リポジトリの「Environments」セクションに公開URLが表示されます。当該URLを使って全てが期待通りに機能しているかを確認します。

## まとめ
Qiita APIを使ってQiitaからデータを取得し、GitHub Pagesでウェブサイトとして公開するプロセスを紹介しました。エンドツーエンドの手順として、APIトークンの取得からデータの整形、GitHubリポジトリの作成、GitHub Pagesの設定までの全てのステップを追って説明しました。データの自動取得とページのホスティングを組み合わせることで、効率的かつ無料でコンテンツを配信できます。これを機に、パーソナルな技術ブログを始めてみてはいかがでしょうか。

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary) [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

Qiita APIを用いたデータ取得とGitHub Pagesでの静的サイト公開

1-1 はじめに

続きを読むには単価診断を受けてください（30秒）