#CloudflareページをPubliiで設定します　#ニ25

 Cloudflare ページを Publii で設定する手順について、以下にまとめます。

1. GitHub リポジトリの設定

まず、Publii がサイトに変更をアップロードするための GitHub リポジトリを作成します。これは簡単なプロセスで、詳細は GitHub deployment の記事を参照してください。GitHub Pages サイトの作成手順について、以下に詳しく説明します。

1. アクセストークンの生成

GitHub Pages を作成する前に、Publii が GitHub にアクセスできるようにするためのアクセストークンを生成します。このトークンにより、Publii が GitHub ページに変更を加えたり、サイトを作成・編集したりできるようになります。

アクセストークンの生成手順

  1. GitHub にサインインします。アカウントをお持ちでない場合は、サインアップして登録します。
  2. プロフィール設定を開きます。
  3. 左側のサイドバーで「開発者設定」をクリックします。
  4. 「個人アクセストークン」を選択し、「トークン（クラシック）」をクリックします。
  5. 「新しいトークンを生成」をクリックします。
  6. トークンに名前を付けます（例: 「Publii GitHub Page」）。
  7. スコープのセクションで「repo」にチェックを入れます。これにより、リポジトリ管理の全ての側面にアクセスできるようになります。
  8. 必要に応じてトークンの有効期限を設定します（例: 90日）。
  9. 「トークンを生成」をクリックします。

トークンが生成されたら、必ずコピーして安全な場所に保存してください。トークンは生成後に再表示されません。

2. GitHub Pages で静的 Web サイトを作成

アクセストークンを取得したら、次に GitHub 上にサイトを移動するためのリポジトリを作成します。

GitHub リポジトリの作成手順

  1. GitHub にログインし、トップバーのプラスアイコンをクリックして「新しいリポジトリ」を選択します。
  2. リポジトリ名を入力し、リポジトリを「公開」に設定します（GitHub Pages は公開リポジトリでホストされます）。
  3. 「リポジトリを作成」をクリックします。

README ファイルの作成

  1. 「クイックセットアップ」画面で「README」をクリックします。
  2. README の編集画面で「新しいファイルをコミットします」ボタンをクリックします。このファイルは、Publii が GitHub Pages と初めて同期する際に自動的に削除されます。

3. GitHub Pages の設定

  1. ファイルをコミットした後、リポジトリの設定画面に移動します。
  2. 左側のサイドバーで「ページ」をクリックします。
  3. 「ビルドと展開」セクションの「支店」ドロップダウンリストをクリックし、「main」を選択します。
  4. 「保存する」をクリックして変更をコミットします。

これで、GitHub Pages は静的な Web サイトホストとして使用できるようになります。ウェブサイトを表示するには、メッセージボックスに表示される URL に移動する必要があります。ページを更新することで、URL ボックスが表示される場合があります。

4. Publii との同期

GitHub 上の準備が整ったら、次は Publii を開いて、作成した GitHub Pages リポジトリと同期します。

Publii の設定手順

  1. Publii を開く: まだウェブサイトを作成していない場合は、ウェブサイトを作成し、少なくとも 1 つの投稿を追加し、テーマを選択します。

  2. サーバー設定を開く: 左側のサイドバーから「サーバー」をクリックします。

  3. 必要な情報を入力:

    • ウェブサイト URL: YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME の形式で入力します。
    • API サーバー: デフォルトのままで問題ありません。
    • ユーザー名: GitHub のユーザー名を入力します。
    • リポジトリ: GitHub リポジトリの名前を入力します。
    • 支店: main と入力します（大文字と小文字を区別）。
    • トークン: 先ほど生成したアクセストークンを入力します。
    • 並列アップロード: デフォルトは 1 ですが、必要に応じて変更できます。

  4. 設定を保存: すべてのオプションを設定したら、「設定を保存」をクリックします。

5. ウェブサイトの同期

すべての設定が完了したら、Publii のサイドバーにある「ウェブサイトを同期」ボタンをクリックして、サイトのアップロードを開始します。

注意点

  • アップロードされたサイトは、同期プロセスが完了してもすぐには表示されない場合があります。変更が表示されるまでに約 1 分かかることがあります。
  • GitHub のコミットセクションで最新のコミットを確認し、変更が適用されたかどうかを確認できます。

これで、GitHub Pages を使用して静的なウェブサイトをホストする準備が整いました。Publii を活用して、簡単にウェブサイトを管理・更新できます。

Publii 静的サイトを GitHub と同期する手順

GitHub 上での準備が整ったら、Publii の接続設定を更新して、作成したばかりの GitHub ページリポジトリと同期できます。以下の手順に従ってください。

1. Publii を開く

まず、Publii を開きます。まだウェブサイトを作成していない場合は、ウェブサイトを作成し、少なくとも 1 つの投稿を追加し、テーマを選択していることを確認してください。これらがないと、サイトは適切に作成されません。

2. GitHub Pages の設定

次に、左側のサイドバーにある「サーバー」をクリックして、サーバーの設定画面を開きます。以下の情報を入力します。

  • ウェブサイト URL: YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME の形式で入力します。
  • API サーバー: デフォルトでは、このフィールドは標準 API サーバーが設定されています。独自の GitHub インスタンスを使用している場合は、ここに入力して変更します。
  • ユーザー名: GitHub のユーザー名を入力します。
  • リポジトリ: GitHub リポジトリの名前を入力します（前のステップで設定したもの）。
  • 支店: main と入力します（大文字と小文字を区別）。
  • トークン: 先ほど生成したアクセストークンを入力します。
  • 並列アップロード: デフォルトは 1 です。アップロードの速度を上げたい場合は数値を高く設定できますが、接続が遅いとエラーが発生する可能性があります。
  • API レート制限: GitHub Enterprise を使用している場合のみ、このオプションを無効にします。無効にすると展開エラーが発生する可能性があります。

すべてのオプションを設定したら、「設定を保存」ボタンをクリックします。接続テストを行うこともできますので、Publii が GitHub ページに接続できるか確認してください。

3. ウェブサイトの同期

すべての準備が整ったら、Publii サイドバーの「ウェブサイトを同期」ボタンをクリックして、サイトのアップロードを開始します。

重要な注意点

  • アップロードされた Publii サイトは、同期プロセスが完了してもすぐには表示されない場合があります。変更が表示されるまでに約 1 分かかることがあります。
  • GitHub のコミットセクションで最新のコミットを確認し、変更が適用されたかどうかを確認できます。アイコンがオレンジ色の点の場合、変更が受信されたがまだ展開されていないことを示します。

制限事項

Publii での GitHub Pages サポートには、以下の 2 つの制限があります。

  1. ファイル数の制限: 1000 を超えるファイルを含むウェブサイトをアップロードすることはできませんが、将来的には約 5000 ファイルに増加する予定です。
  2. API リクエスト制限: GitHub API は 1 時間あたり 5000 件のリクエストに制限されています。リクエスト制限が低すぎる場合、Publii が通知します。

役立つヒントとコツ

  • URL の簡略化: GitHub ページの URL を YOUR_USERNAME.github.io に簡略化することができます。リポジトリ名を YOUR_USERNAME.github.io に設定することで、URL を簡素化できます。
  • カスタムドメインの使用: 独自のドメイン名を使用したい場合は、Publii が CNAME ファイルを自動的に作成します。カスタムドメインの設定については、GitHub のチュートリアルを参照してください。
  • SSL の利用: GitHub Pages はデフォルトで SSL が有効です。
  • 異なるブランチの使用: 他のブランチを使用する場合は、Publii 設定でブランチ名を変更してください。マスター以外のブランチを使用する場合は、注意が必要です。

これで、Publii を使用して GitHub Pages と同期する準備が整いました。簡単にウェブサイトを管理・更新できるようになります。

  • プライベートリポジトリ: 実際には GitHub Pages をホストとして使用しないため、プライベートリポジトリを作成できます。これにより、Web サイトのファイルが GitHub で簡単に表示されなくなります。

2. Cloudflare Pages のセットアップ

GitHub リポジトリが設定されたら、次に Cloudflare Pages を構成します。

  1. Cloudflare アカウントにログインし、「ページ」を選択します。
  2. 「新しいプロジェクトを作成」をクリックします。
  3. 「GitHub アカウントを接続」を選択し、承認プロンプトに従います。
  4. 使用する GitHub アカウントとリポジトリを指定し、「セットアップを開始」をクリックします。

3. ビルドとデプロイの設定

  • プロジェクト名を設定し、使用するブランチ（通常は main または master）を指定します。
  • 「保存してデプロイ」をクリックします。

デプロイプロセスが開始され、完了するまで数分かかることがあります。完了後、表示されたリンクを使用してウェブサイトにアクセスできます。

4. カスタムドメインの設定

カスタムドメインを使用する場合は、以下の手順を実行します。

  1. 「カスタムドメイン」タブを開き、「カスタムドメインを設定」をクリックします。
  2. 使用したいドメインまたはサブドメインを入力し、「続行」をクリックします。
  3. 残りのプロセスは、Cloudflare の DNS サービスを使用するか、DNS プロバイダーを介してドメインを構成するかによって異なります。

まとめ

Cloudflare ページの使用は非常に簡単で、既存の GitHub アカウントを使用して設定できます。まだ GitHub リポジトリを作成していない場合でも、手順に従うことでスムーズに進められます。注意点として、Publii での変更は各同期後数分間はライブサイトに反映されないことがありますので、ビルドプロセスを考慮してください。

コメント

コメントを投稿

このブログの人気の投稿

#shadps4とは何か?shadps4は早いプレイステーション4用エミュレータWindowsを,Linuxそしてmacの #八21

   https://github.com/shadps4-emu/shadPS4 shadPS4は、Windows、Linux、macOS用のPlayStation 4エミュレーターです。このエミュレーターは、2022年10月にGeorge Moralisによって開発が開始され、主にPS4ゲームのエミュレーションを目的としています。shadPS4は、特に3Dゲームのサポートを強化するために、アーキテクチャにシェーダーを追加するなどの進展を遂げてきました。 主な特徴 : 対応プラットフォーム : shadPS4は、Windows、Linux、macOSで動作します。特にmacOSでは、Apple SiliconとIntelの両方のデバイスに対応しています。 ゲームの互換性 : 現在、shadPS4は約200タイトルが「ゲーム中」としてリストされており、そのうち155タイトルが「プレイ可能」とされています。特に「Bloodborne」や「Dark Souls Remastered」などの人気タイトルが動作しますが、すべてのゲームが完全にプレイできるわけではなく、特定のゲームに対してはハックが必要な場合もあります。 開発の進捗 : shadPS4は、2024年7月にバージョン0.1.0がリリースされ、その後も定期的にアップデートが行われています。最新のバージョンでは、レンダリングの改善や新機能の追加が行われており、ユーザーからは60FPS以上でのプレイが報告されています。 設定とカスタマイズ : エミュレーターは、初回起動時に「User」フォルダを作成し、その中にある設定ファイルを編集することで、さまざまなパラメータを調整できます。これにより、フルスクリーン表示や解像度の設定が可能です。 shadPS4は、PS4ゲームをPCで楽しむための有望な選択肢として注目されていますが、まだ開発段階にあるため、完璧なエミュレーション体験を期待することは難しいかもしれません。 shadPS4の開発者は ジョージ・モラリス（George Moralis） で、彼は「shadow」というユーザー名でも知られています。モラリスは、shadPS4の開発を2022年10月に開始しましたが、彼の背景には他の著名なエミュレーターの開発経験があります...
MORE »

#INVIDIOUSを用いて広告なしにyoutubeをみる方法　#士17

https://www.youtube.com/watch?v=XXXXXXXXXX ↑のURL↓のように入れ替えると広告なしにyoutubeをみれる。 https://yewtu.be/watch?v=XXXXXXXXXX Invidious は、 YouTubeに代わる無料のオープンソースのフロントエンドです。 Dockerコンテナとして、またはGitHubマスター ブランチから利用できます。公式 YouTube Web サイトの軽量で「プライバシーを尊重した」代替サイトとして使用することを目的としています。多くのプライバシー保護リダイレクト ソフトウェアおよび YouTube クライアントは Invidious インスタンスを使用します。 Invidious は、YouTubeの動画を広告なしで視聴できる、プライバシーに配慮したオープンソースのサービスです。Googleのトラッキングを避けつつ、YouTubeコンテンツを楽しみたい方におすすめです。 Invidiousのメリット 広告なし: YouTubeの煩わしい広告をスキップできます。 プライバシー保護: Googleのデータ収集を抑え、プライバシーを重視した視聴が可能です。 オープンソース: 誰でも自由に利用・開発できるオープンソースソフトウェアです。 多様なインスタンス: 世界中に多くのInvidiousインスタンスが存在し、それぞれ異なる特徴や機能を提供しています。 Invidiousの使い方 Invidiousインスタンスを探す: 検索エンジン: "invidious instance"などで検索すると、多くのインスタンスが見つかります。 リスト: いくつかのInvidiousインスタンスをまとめたリストサイトも存在します。 YouTubeの動画URLをInvidiousの検索バーに入力: 視聴したいYouTube動画のURLをコピーし、選んだInvidiousインスタンスの検索バーに貼り付けます。 動画を再生: 検索結果から目的の動画を選択し、再生ボタンを押せば広告なしで視聴できます。 Invidiousの使い方 Invidiousは、YouTube動画を広告なしで視聴できる便利なサービスです。 基本的な使い方 Invidio...
MORE »

nitterでYouTubeのリンクが飛ばされるinvidiousについて #一09

イメージ
  invidiousとは 軽量、公式よりも便利な機能が追加されたYouTubeフロントエンドです。 https://invidious.fdn.fr/watch?v=BBgmeB4PeK8&list=PLU5D5r4sn0DrmmL_rGqRTRTw7IxGL2yY3 以下（https://www.gnu.org/philosophy/whats-wrong-with-youtube.html）から YouTubeの何が間違いか YouTubeは特別なケースです。2020年9月の時点で、YouTubeの動画をなんら不自由なソフトウェアを実行することなく視聴することが可能です。Torを通じた場合でも、“Invidious” 中間サイトを通じて可能です。 YouTube にはLibreJSを使うことを推奨します。Invidiousサイトはどれもがすべて似ているわけではありません。不自由な JavaScript のコードなしでは使えないかもしれません。また、こういったサイトのほとんどの JavaScript のコードは自由なライセンスを運びますが、ひとつのファイル、handler.js はそうではありません。LibreJSはその実行を禁止しますが、動画の視聴はそれでも動きます。 Firefoxのための自由なアドオン、ViewTubeもあり、YouTubeの動画を視聴するために直接アクセスすることを可能とします。それはGNUブラウザのIceCatにプリインストールされてます。Firefoxにロードすることもできます。自由なプログラム youtube-dl も利用可能です。それはサイトのJavascriptのコードからデータを取得しますが、そのコードは実行しません。しかし youtube.com は、Torを通じた場合、こういったアクセス方法をブロックしそうです。 これらのアクセス方法の結果として、いまのところ、YouTubeにビデオを投稿することは自由な世界の境界の向こう側に置くことにはなりません。これは良いことで、それが続くことを願います。しかし、これが動き続ける、とわたしたちは依拠できません。そのアドオンは2019年にYouTubeの なんらかの変更により一度動かなくなりました。この時は、修正されたアドオンが数週間後にリリースされました。次回はどうでし...
MORE »