Skip to content

Webサイトを公開する#

Webサイトを作って公開してみましょう。 自分でサーバを用意して、Wordpressでサイトを動かすのも良いですが、プロが管理してくれているインフラ上でページを公開してみましょう。

ここでは、GitHubを使って、Webページを公開する方法をご紹介します。 GitHubはソースコードを管理してくれるWebサービスです。 GitHubの機能の一つにWebページを公開してくれる、というものがあります。

前提条件#

GitHubアカウントを持っていること。なければこちらの手順で作成しておいてください。

GitHubのリポジトリを作成#

リポジトリとは、ファイルを置く場所です。 ブラウザで https://github.com にアクセスします。 リポジトリを最初に作る方は 最初に作る の左側にある緑色のボタン、Create repositoryから、 すでにリポジトリを持っている方は すでに持っている から、リポジトリを作成してください。

リポジトリを作成する

表示されるページで「Repository name」に myWebSite など、アルファベットの任意の名前（サイトのURLに含まれます）を入れ、「Private」を選択しCreate repositoryを押してください。

リポジトリの完成

リポジトリを作成したら、作成後のページの下の方までスクロールして、

リポジトリの完成

「Import code」を押して、

Import code

「Your old repository’s clone URL」に以下を入力して、

https://github.com/ukiuni/blankRepository.git

「Begin import」ボタンを押します。↑のURLは私が作成した、空っぽのリポジトリーです。WebページをGitHubのWebページを操作するだけで作れるように作成しました。

インポートが完了すると、↓のような画面になります。 Import code

「Your new repository {アカウント名}/{リポジトリ名} is ready.」とある、 {アカウント名}/{リポジトリ名} のリンクを押してください。 リポジトリができました。

次に、リポジトリ名の下のメニューの一番右にあるSettingsボタンを押します。 Settingsを押します。

開いたページの

Settingsページ

下のほうにスクロールしていくと、GitHub Pagesと記載されているので、

SettingsのGitHub Pages

Source に master branchを選択します。 master branch

リポジトリのトップページでCodeを押して、 Add Fileボタンを押します。 Add File

Create new fileを選択 Create new file

ファイルを入力するページが表示されるので、 Create new file

Name your file に index.html

Edit new fileの下に、以下のコードを入れてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>私のページタイトル</title>
  </head>
  <body>
    <h1>私のWebサイトが!</h1>
    <p>できました。</p>
  </body>
</html>

こんな感じです。 ファイルを入れる。

下の方にスクロールしていって、 下の方にスクロール

Commit new fileを押します。 これだけでWebページが作成されました。

ページのURLは、 https://{アカウント名}.github.io/{リポジトリ名}/ です。アカウント名とリポジトリ名はCodeの上にあるリンクから取得できます。 {アカウント名} / {リポジトリ名} となっています。 アカウント名とリポジトリ名 画像の例だと、URLは https://uniunin.github.io/mySampleSite/ です。

ブラウザでURLを開くと、 アカウント名とリポジトリ名 Webページが表示されましたね！

このように、無料でWebサイトを公開できます。

次はCSSを使って画面を装飾してみましょう！