😎

GitHub Pagesでホームページを作ろう

に公開
GitHub
IE
tech

本記事は，いちぴろ・エクスプローラの勉強会"GitHub Pagesでホームページを作ろう"の資料です．

1. GitHub アカウントの作成とリポジトリ作成

アカウント作成

GitHub の公式サイト（https://github.com）にアクセスし，「Sign up」からアカウントを作成します．

リポジトリの作成

ログイン後，以下の手順で新しいリポジトリを作成します．

https://github.com/ie-ikepe/ie-ikepe.github.io へアクセスし，Use this template > Create a new repository を選択します．

Repository name は ユーザ名.github.io と入力します．

"Create repository" をクリック

2. VSCodeのダウンロード

VSCode がインストールされていない場合は，事前にインストールしておきましょう．
https://code.visualstudio.com/ からダウンロードできます．

日本語化パックもあります．

3. リポジトリのクローン

VSCodeのターミナルより，以下のコマンドでクローンします

git clone https://github.com/[username]/[username].github.io.git

4. コードの編集

ファイルの説明

ファイル名 内容
index.html Webページの本文を記述するHTMLファイルです．ページの構造や文章，画像の配置などはこのファイルに記述します．
style.css index.html に適用されるスタイルシートです．文字の色，大きさ，レイアウトなどのデザインをここで調整します．
profile.jpg ページ内で使用される画像ファイルです．プロフィール写真として表示されます．

編集の反映

# 変更内容の確認
git status

# すべての変更をステージング（add）
git add .

# 変更をコミット（内容の説明を付ける）
git commit -m "具体的なメッセージ"

# GitHubへプッシュ（反映）
git push

5. ページの公開

最後に，作成したサイトを公開します．

  1. リポジトリの GitHub ページを開く
  2. Settings → Pages タブを開く
  3. 「Branch」項目で main と /（root） を選び，「Save」ボタンを押します

https://ユーザ名.github.ioにアクセスすれば，作成した内容が公開されているでしょう！

GitHubで編集を提案

Discussion