3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTML・CSSで作成したサイトをGitHub Pagesを使って公開しよう!

Last updated at Posted at 2023-02-20

GitHub Pagesとは

サーバーや他のSaaSを利用せずに、無料でインターネット上へ公開できるツール。
ポートフォリオなどで作成したコードをインターネットへ公開したい場合、手間をかけることなく設定ができるためとても便利です!

リポジトリの作成

はじめに、インターネット上へ公開するためのリポジトリを作成する。

スクリーンショット 2023-02-20 8.58.44.png

HTML:index.html、CSS:cssフォルダをアップロードします。
スクリーンショット 2023-02-20 9.31.35.png

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのGitHub Pages</title>
  <link rel="stylesheet" href="css/base.css">
</head>
<body>
  <h1 style="color: #aa0000;">はじめてのGitHub Pages①</h1>
  <h2>はじめてのGitHub Pages②</h2>
  <h3>はじめてのGitHub Pages③</h3>
</body>
</html>

css/base.css

h3 {
  color: #0000aa;
}

インターネットへ公開するための設定手順

「Settings」の「Pages」をクリックする。
スクリーンショット 2023-02-20 9.14.38.png

「main」ブランチを選択して、「Save」をクリックする。
他ブランチでも対応可能です!(mainブランチへマージする前に確認など)
スクリーンショット 2023-02-20 9.16.59.png

設定が全て完了したため、ブラウザからアクセスして確認できます!
インターネットへの公開URLは https://アカウント名.github.io/リポジトリ名 となります。
簡単に設定できるため、是非ポートフォリオや履歴書などで、有効活用してください!
スクリーンショット 2023-02-20 9.22.50.png

3
4
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
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?