
たった5ステップ!Githubの機能「GitHub Pages」でホームページを制作しよう
Web担当者の方であればご存知だとは思いますが、ホームページやランディングページを制作する際、必ず必要になるものの一つに「サーバ」があります。
ただ実際にサーバを準備するといっても、自前で用意するとなると大きな出費が発生しますし、どの企業でも簡単に用意できるものではありません。そこで重宝するのがレンタルサーバです。
レンタルサーバは全く費用がかからないわけではないですが、コストを大幅に抑えられ、管理する手間も省けることから、多くの企業・制作会社ではレンタルサーバを活用しています。
でも実は、もっとオススメしたい手段があります。
それがレンタルサーバなしで無料で簡単にホームページを作る方法です。
AppleやMicrosoftも活用するソースコード共有サービス「GitHub」の機能の一つ「GitHub Pages」を利用し、HTMLファイル等の必要なファイルをGitHubに入れるだけで簡単にホームページが作れてしまいます。
そこで今回は、GitHubの機能「GitHub Pages」を活用したホームページ制作方法をご紹介します。
今後、ホームページ・ランディングページの制作を考えている方、ぜひ一読ください。
参考 :
サーバ【Server】|ferretマーケティング用語辞典
GitHub Pagesとは?
「GitHub Pages」は、「GitHub」を使ってホームページを公開することができる機能です。
ちなみに、GitHubを使っているので、下記のようなメリット・デメリットがあります。
メリット
- Webサーバーが一切不要
- JavaScriptやjQueryも作動する
- GitHubアカウントを持っていれば3~5分程度で公開できる
- 「xxx.github.io」のドメインがもらえる (xxxはあなたのユーザー名)
- ドメイン設定をすれば独自ドメインの使用も可能
デメリット
- GitHubを使っているのでソースコードが公開される
- サーバーに接続する大規模サイトには向いていない
- GitHubを使っているため日本語ローカライズがされていない
つまり、ソースコードを公開しても別に気にしないので、無料でとりあえずホームページを持ちたい、という人に向いています。
GitHubは全て英語で書かれていますが、日本語のリファレンスや解説ブログもたくさん公開されているため、ハードルはそこまで高くはないでしょう。
「GitHub Pages」作成の5ステップ
それでは実際に、GitHub Pagesの機能を使って、ホームページを公開してみましょう。
事前準備
GitHubのアカウントを持っていない場合はGitHub公式サイトから作成します。
ホームページのトップに「ユーザー名」「メールアドレス」「パスワード」を入力することで、簡単にアカウントを作成することが可能です。
ユーザー名がGitHub PagesのURL「xxx.github.io」の「xxx」の部分になり、メールアドレスの認証まで済むと、実際にリポジトリの作成から行うことができます。
1. リポジトリを作成
リポジトリとは、関連するファイルやフォルダをまとめておく、GitHubにおける貯蔵庫のようなものです。
リポジトリ名(Repogitory Name)の欄には、「xxx.github.io」の形で入力し、ログイン後、https://github.com/new にアクセスしてリポジトリを新規作成します。
2. リポジトリをクローン
クローンとは、WebのGitHub上に作成したリポジトリ(リモートリポジトリ)やリポジトリ中のフォルダ・ファイルを、デスクトップにコピーすることです。クローンするには、ターミナルを使ってコマンドを打ち込む方法とGitHubのデスクトップ版ソフトをインストールして行う方法があります。
初心者の方は、リモートリポジトリのフォルダやファイルが可視化されるデスクトップ版がオススメです。
2-1. ターミナルを使う場合
ターミナルを使う場合は、下記のコマンドを参考にクローンします。
$ git clone https://github.com/xxx/xxx.github.io
※ xxxはユーザー名
2-2. GitHubのデスクトップ版ソフトを使う場合
リポジトリを作成した後に現れた画面で、「Set up in Desktop」ボタンを押します。
インストールされていない場合、ダウンロード画面に飛ぶのでデスクトップ版ソフトをダウンロードします。
ソフトを立ち上げた後、左上の「+」から「clone」を選び、先ほど作成したリポジトリをクローンします。
クローンの際にフォルダを指定しますが、新規でフォルダを作成して指定することも可能です。
3. indexファイルを作成
ここでは、試しにHello Worldを表示させてみましょう。
3-1. ターミナルを使う場合
ターミナルでは、任意のフォルダに移動して「Hello World」を出力させます。
cd xxx.github.io
~$echo "Hello World" > index.html
3-2. GitHubのデスクトップ版ソフトを使う場合
「Hello World」を出力させるHTMLファイルをクローンしたフォルダに入れます。
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
4. コミットして同期
デスクトップで「index.html」を作成した場合、コミットを行います。
コミットとは、ファイルやフォルダの追加・変更をリポジトリに記録することです。
左下のコミット欄に任意でコミット名を入力し、「Commit to master」をクリック。
右上の「Publish」ボタンが「Sync」に変わるので、クリックしてリポジトリと内容を同期します。
5. ブラウザで確認
先ほど作成したURLで確認すると、無事に「Hello World」と表示されたことがわかります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アカウント
- アカウントとは、コンピューターやある会員システムなどサービスを使うときに、その人を認識する最低必要な情報として、パスワードと対をなして使う、任意で決めるつづりです。ユーザー、ID、などとも言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- アカウント
- アカウントとは、コンピューターやある会員システムなどサービスを使うときに、その人を認識する最低必要な情報として、パスワードと対をなして使う、任意で決めるつづりです。ユーザー、ID、などとも言います。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
関連ツール・サービス
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング