LoginSignup
2
3

More than 1 year has passed since last update.

GitHubPagesで無料で簡単にwebページを公開してみる

Posted at

GitHubPages について

GitHub Pages は GitHub でホスティングされる静的サイトを作成するための簡単な方法です。 あなたのリポジトリに README.md や index.html などのファイルをプッシュするだけで、無料でホストされたサイトが作成されます。

GitHub Pages サイトは Jekyll を使用して自動的に生成されます。 Jekyll は Markdown と Liquid テンプレートエンジンを使用してコンテンツをレンダリングします

GitHub Pages を使用する主な利点

  • 無料でホストされる - GitHub は無料でホスティングを提供します。 ホスティングやストレージについて気にすることなくサイトをホストできます。
  • シンプルなセットアップ - リポジトリに README.md や index.html などのファイルをプッシュするだけで、サイトが自動的に生成されます。 複雑な設定やデプロイメント手順はありません。
  • 自動生成 - 先述したJekyll がサイト全体を自動的に生成します。 コンテンツを更新するたびに、Jekyll が最新のビルドを生成してくれます。
  • カスタマイズ可能 - CSS と JavaScript ファイルを追加して外観と機能をカスタマイズできます。 完全にカスタマイズ可能なテーマも利用可能です。
  • グローバルにホストされる - サイトは世界中からアクセス可能です。
  • インテグレーション - GitHub とのシームレスな統合。コミットの履歴とブランチが表示されます。 コードリポジトリとサイトが密接にリンクされています。

GitHubPagesで公開する手順

GitHubアカウントの作成

GitHubのアカウントを所有していない方は、アカウントを作成するところから始めてください。

リポジトリの作成

ファイルをアップロードするために、リポジトリを作成します。注意点として、無料でGitHubPagesに公開するためには、Publicで公開する必要があります。

https://s4.aconvert.com/convert/p3r68-cdx67/awkuv-fsckg.jpg

リポジトリにファイルをアップロード/pushする

作成したリポジトリにHTML/CSS等のファイルをアップロードします。
アップロードに関してはProgate様のsec4.ファイルのアップロード

を参照ください。
GitHubを利用したことがある方は、作成したリポジトリにpushを行ってください。

https://s4.aconvert.com/convert/p3r68-cdx67/aarqp-7u5pn.jpg

ページを公開する

ようやくページを公開する設定に入ります。ファイルをアップロードしたリポジトリのsettings→Code and automationのPagesタブ→【Your site is live at …(生成されたURL)】が表示されていればGitHubPagesでの公開は完了です。
もし、表示されていない場合は「Branch」の項目が「None」となっていると思いますので、これをデフォルトブランチ(master or main)に変更して「Save」ボタンを押すことでURLが表示されます。

https://s4.aconvert.com/convert/p3r68-cdx67/ap84a-vsj6d.jpg

おわりに

GitHubPagesを用いることにより、静的サイトはお金を支払わなくても簡単に公開できるようになりました。そのため、実機での確認も容易で、とても優れているサービスだと思います。ぜひご利用ください!

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3