ホームページ  >  記事  >  開発ツール  >  Gitee Pages を使用して静的 Web サイトとインタラクティブな機能を展開する方法

Gitee Pages を使用して静的 Web サイトとインタラクティブな機能を展開する方法

PHPz
PHPzオリジナル
2023-03-30 16:36:343076ブラウズ

Gitee は非常によく知られた Git コード ホスティング プラットフォームです。Gitee でコードを管理できるだけでなく、Gitee Pages を通じて独自の静的 Web サイトを展開することもでき、非常に便利です。この記事では、Gitee Pages を使用して静的 Web サイトを展開する方法と、Web サイトをより活発で興味深いものにするためのインタラクティブな機能を追加する方法を紹介します。

1. Gitee Pages プロジェクトの作成

まず、Gitee 上に Pages プロジェクトを作成する必要があります。具体的な操作は次のとおりです。 Gitee Web サイトに移動し、個人のホームページに入ります。

    [ウェアハウスの作成]ボタンをクリックします。
  1. ウェアハウス名を設定し、「パブリック」オプションをチェックし、「Initialize README.md」オプションを選択して、最後に「ウェアハウスの作成」ボタンをクリックします。
  2. 新しく作成したウェアハウスページに入り、「設定」ボタンをクリックします。
  3. [Pages サービス] タブをクリックし、[Pages サービスを有効にする] ボタンを選択します。
  4. Web サイトのアクセス パスとデフォルトの表示ページを設定します。たとえば、「/my-website」に設定し、デフォルトの表示ページは「index.html」に設定し、最後に「保存」をクリックします。ボタン。
  5. 次に、ローカルに新しいフォルダーを作成し、静的 Web サイトの関連ファイルをこのフォルダーに配置します。
  6. コマンド ラインをローカルで開き、作成したフォルダーに移動し、次のコマンドを入力します:
  7. git init
  8. git add .
git commit -m "初期コミット "



Gitee リポジトリに接続し、次のコマンドを入力します:

  1. git Remote add Origin [Gitee リポジトリ アドレス]
  2. git Push -u Origin master


上記の手順を完了した後、Gitee ウェアハウス ページを更新すると、デプロイされた静的 Web サイトが表示されます。

  1. 2. インタラクティブ機能の追加
静的な Web サイトをベースに、インタラクティブな機能を追加すると、Web サイトがより生き生きとして興味深いものになります。インタラクティブ機能を追加する 2 つの方法を次に示します。

JavaScript の使用

  1. JavaScript は、ページ インタラクション効果を実現できるスクリプト言語です。 HTML ファイルに