5分でブログにコメント機能を設置-Gitalk

Gitalkでブログのコメントコンポーネントを5分以にセットアップする手順は以下のとおりです。

  1. ブログのコメントデータを保管するためにGitHub上で新しいリポジトリを作成します。例えば、「blog-comments」という名前のリポジトリを作成します。
  2. ブログプロジェクトのウェブページに Gitalk を導入するには、NPM を使用するか、ファイルをダウンロードします。具体的な方法は、Gitalk の公式ドキュメントを参照してください。
  3. ページにコメントを表示するためのコンテナを追加します。たとえば、ブログページの HTML ファイルに
    要素を追加できます。
<div id="gitalk-container"></div>
  1. Gitalk を初期化する。ブログページの JavaScript ファイル内で以下のコードを使用して Gitalk を初期化する:
var gitalk = new Gitalk({
clientID: 'YOUR_CLIENT_ID',
clientSecret: 'YOUR_CLIENT_SECRET',
repo: 'blog-comments',
owner: 'YOUR_GITHUB_USERNAME',
admin: ['YOUR_GITHUB_USERNAME'],
id: location.pathname,
distractionFreeMode: false
});
gitalk.render('gitalk-container');

上記のコードでは、YOUR_CLIENT_ID、YOUR_CLIENT_SECRET、および YOUR_GITHUB_USERNAME を、ご自身の GitHub アプリケーションのクライアント ID、クライアント シークレット、ユーザー名に置き換えてください。

  1. 更新版ブログプロジェクトを GitHub にプッシュする。

Gitalkのコメントコンポーネントは、上記のステップを完了することでブログページに表示されます。ユーザーはGitHubアカウントでコメントでき、コメントデータは新しく作成した「blog-comments」リポジトリに保存されます。Gitalkの公式ドキュメントでは、さらに多くの設定オプションや、Gitalkをローカルでデバッグする方法の詳細を確認できます。

bannerAds