0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiita全国学生対抗戦Advent Calendar 2023

Day 24

【GitHub Pages】1分30秒でWebサイトを立ち上げる

Last updated at Posted at 2023-12-25

TL;DR

1分30秒でGitHub Pagesでウェブサイトを立ち上げ、hello!表示できるサイトを立ち上げます!!!

必須スキル

  • GitHub、Gitの基礎的な操作ができること

手順の概要

  • Repositoryを新規作成してCloneする
  • index.htmlを作成する
  • index.htmlを編集し、bodyに任意のメッセージを書く
  • CommitしてPushする
  • 設定からGitHub Pagesを有効にする
  • GitHub Actionが勝手に始まるので見守る
  • Deployが完了したらサイトを確認する

これだけです。作業の半分くらいはGitHub Actionが頑張ってくれてるのを見守る時間なので、作業時間は理論値で40秒くらいだと思います。

1. Repositoryを新規作成してCloneする

流石に誰でもできるので省略します。

2. index.htmlの準備

このような階層構造になれば大丈夫です。ファイル名は必ずindex.htmlにしてください。

スクリーンショット 2023-12-25 23.12.43.png

今回はシンプルなサイトを作るチュートリアルのため、内容は全然記述していませんが、このリポジトリ内に.jsや.cssを配置して読み込ませることもできます。

3. CommitしてPushする。

流石に誰でもできるので省略します。

4. 設定からGitHub Pagesを有効化する

リポジトリのSettingsに移動し、Pages→Build and deployment→Branchをmainに設定します。

スクリーンショット 2023-12-25 23.15.30.png

5. GitHub Actionを見守る

Actionsタブ→最新のpages build and deploymentをおし、走り出したActionを確認します。

スクリーンショット 2023-12-25 23.17.28.png

数十秒まつと、deployが終了するので、表示されたリンクにアクセスします。

スクリーンショット 2023-12-25 23.18.20.png

6. できたサイトを確認

サイトが公開されました!!!

スクリーンショット 2023-12-25 23.19.09.png

補足

  • これでindex.html(トップページ)ができたので、このリポジトリ内にhtmlファイルを追加していくことでサイトのページ数を増やすことができます。
  • cssやjsも使えます。
  • 大体なんでもできます。ただし動的サイトは作れず、静的サイトのみという制限があります。
  • 別に僕はhelloを言うサイトをみんなに作って欲しいわけではなくて、サイトを立ち上げるハードルって意外と低いんだよってことを伝えたかっただけです。
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?