Githubにリポジトリがあり、リポジトリのルートディレクトリに多数のcsv、json、ymlデータファイルが含まれています。
Github Pagesを使用してこれらのファイルを提供するにはどうすればよいですか?
たとえば、次のようになります。http://username.github.io/reponame/
に移動してから
/posts
posts.jsonファイルのコンテンツを提供します/users
sers.jsonファイルのコンテンツを提供します/comments
comments.jsonファイルのコンテンツを提供します/posts.csv
posts.csvファイルのコンテンツを提供しますリポジトリに.json
ファイルを追加するだけで、通常のJSONAPIのようにそれらにアクセスできます。
次のリポジトリにusername.github.io/reponame
次のファイルを追加します
posts.json
[
{"id": 1, "title": "Title 1"},
{"id": 2, "title": "Title 2"}
]
sers.json
[
{"name": "abc", "email": "[email protected]"},
{"name": "xyz", "email": "[email protected]"}
]
comments.json
[
{"post_id": "1", "text": "Comment 1"},
{"post_id": "2", "text": "Comment 2"}
]
posts.csv
id,title
1,Title 1
2,Title 2
そしてそれらにアクセスする
http://username.github.io/reponame/posts.json
http://username.github.io/reponame/users.json
http://username.github.io/reponame/comments.json
http://username.github.io/reponame/posts.csv
index.json
の代わりにindex.html
を作成して、application/json; charset=utf-8
ヘッダーを取得できます。
つまり、次のものを作成します。--posts/index.json
で提供されるhttp://username.github.io/reponame/posts/
、-users/index.json
で提供されるhttp://username.github.io/reponame/users/
など。
ディレクトリとして、末尾にスラッシュ(http://username.github.io/reponame/posts
)を付けずにアクセスすると、末尾にスラッシュがある同じパスへの301リダイレクトが返されることに注意してください。つまり、機能しますが、クライアントはリダイレクトに従う必要があり(curl
はデフォルトでは従わず、curl --location
は従います)、余分なラウンドトリップのために少し遅くなります...
実用的な例については、 https://github.com/cben/sandbox/tree/master/json ディレクトリを参照してください( https://cben.github.io/sandbox/jsonで提供) / )。
P.S. 1つのディレクトリに複数のindex.*
ファイルとREADME*
ファイルを含めることは避けてください。 index.jsonの横にREADME.mdを追加すると、READMEが勝ち、json/
で提供されたため、名前を別の名前に変更する必要がありました。
このタイプのURL(例:/ posts)は、htmlファイルでのみ機能します。 jsonファイルにposts.htmlという名前を付けて、その前書きを次のように設定できます。
---
layout: null
permalink: /posts/
---
{ "variable": "value" }
次に、/ postsまたは/ posts /でファイルにアクセスします。
唯一の欠点は、返されるファイルが/ posts/index.htmlであり、予期されるContent-Type: text/html
ではなくapplication/json
mimeタイプで提供されることです。
Githubからjsonを使用する方法に関するコードブロックを追加しています:
function logResults(json) {
console.log(json)
}
$.ajax({
url: "https://raw.githubusercontent.com/cben/sandbox/master/json/index.json",
dataType: "json"
}).done(function(result){
console.log(result);
});
Jfiddleの例を確認してください: https://jsfiddle.net/v_alishauskaite/dxm8cvkL/1/