GitHubの機能の１つであるGitHub Pagesを使うことでこのようなWEBページを簡単に作れます。
初めにWEBページの元となるHTMLファイルを作成します。
まずHTMLファイルを作成します。
デスクトップ上でメモ帳を開き、下のHTMLをコピペし、「index.html」というファイル名で保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GitHub Pagesの機能で作ったホームページだよ</title>
<meta name="description" content="GitHub Pagesの機能で作ったホームページだよ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header id="header">
<h1 class="site-title">
My page
</h1>
</header>
<main>
<div id="mainvisual">
GitHub Pagesで作ったホームページ
</div>
<section id="index">
<div class="inner">
<h2 class="section-title">GitHub Pagesの３つの特徴</h2>
<ol class="index-list">
<li>無料で簡単にWEBページを作成できます。</li>
<li>必要なものはGitHubアカウントだけ！</li>
<li>HTMLとCSSに加えてJavaScriptも組み合わせることができます。</li>
</ol>
</div>
</section>
<section id="detail">
<div class="inner">
<h2 class="section-title">作った人</h2>
<div class="content">
<img class="img" src="cat.png" alt="">
<div class="text">
<p class="title">よしを</p>
<p>猫と焼き肉が大好きなエンジニア１年生</p>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>せっかくなのでWEBページの見た目を少しおしゃれにしましょう。
WEBページの見た目を変えるためのCSSファイルを作成します。
デスクトップ上でメモ帳を開き、下のCSSをコピペし、「style.css」というファイル名で保存してください。
@charset "UTF-8";
html {
font-size: 100%;
}
body {
background-color: #f4f9ff;
color: #333;
font-size: 0.875rem;
}
/* サイト全体のコンテンツ幅を設定 */
.container {
max-width: 1000px;
margin: 0 auto;
}
/* 中のコンテンツ部分の最大幅を設定 */
.inner {
max-width: 600px;
margin: 0 auto;
}
.section-title {
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 10px;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
margin-top: 60px;
}
#header .site-title {
width: 160px;
line-height: 1px;
margin-bottom: 15px;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
margin-bottom: 60px;
}
/*-------------------------------------------
Index
-------------------------------------------*/
#index {
background-color: #fff;
padding: 30px 0;
margin-bottom: 60px;
}
#index .index-list {
margin-left: 20px;
}
#index .index-list li {
margin-bottom: 20px;
}
/* リストの最後は下にマージンをつけない */
#index .index-list li:last-child {
margin-bottom: 0;
}
/*-------------------------------------------
Detail
-------------------------------------------*/
#detail {
margin-bottom: 100px;
}
#detail .content {
display: flex;
align-items: flex-start;
}
#detail .content .title {
font-size: 1.125rem;
font-weight: bold;
}
#detail .content .img {
width: 270px;
margin-right: 60px;
}
#detail .content .text p {
margin-bottom: 20px;
}ここからGitHubでの操作となります。
まず、WEBページの元となるHTMLファイルやCSSファイルを格納するための箱（リポジトリ）を作成します。
下の画像の様に「＋」ボタンから「New repository」を選択します。
次のような画面になるので、「Repository name」にリポジトリに名前を入力します。
今回の場合、「GitHub-Pages-Tutorial」としています。
次のような画面になるので、「uploading an existing file」をクリックします。
次のような画面になるので、「index.html」と「style.css」をドラッグ&ドロップ操作でアップロードします。
そして、緑色の「Commit Changes」ボタンを押してリポジトリに反映させます。
すると作成したリポジトリにアップロードした「index.html」と「style.css」があることが確認できます。
WEBページを公開する準備ができたので、GitHub Pagesの設定を行います。
- リポジトリの「Settingタブ」を選択します。
- 「Pages」の項目を選択します。
- 「Branch」の項目を編集します。下の画面の様に「None」→「main」にし、フォルダマークの部分を「root」にして「Save」ボタンを押します。
お疲れ様でした。作業は終了になります。
5分程度反映に時間がかかるので待機すると、先程の画面が次のように変わります。
そして、画面内の「Your site is live at」のリンクをクリックすると公開されたWEBページにアクセスすることができます。やったね。
※GitHub Pagesを使ったWEBページは「https://is0383kk.github.io/GitHub-Pages-Tutorial/」 の様に「https://アカウント名.github.io/リポジトリ名/」 でアクセスすることができます。
