Pocket

今回は、Githubを利用して誰でもアクセス可能なWebページを作成する方法をご紹介します!

Git、Githubの環境作成方法、また、基本的な使い方について詳しくは触れませんので、使い方に関しては他のサイトや、ドットインストールなどを参考にしてください。




準備するもの

  1. ・公開したいHtmlファイル、CSS、javascriptファイルなど
  2. ・Githubアカウント




Githubで公開用のリポジトリを作成する

Githubログインし、新たにリポジトリを作成します。

git_top


作成画面が表示されるので、各項目を入力していきます。
Repository name、Descriptionを入力します。
Publicが選択されるようにして、Initialize this repository with a READMEのチェックは付けないでおきます。
入力ができたらCreaterepositoryをクリックしてリポジトリを作成します。

make_repository


作成が完了すると、作成したリポジトリの場所が表示されるので、コピーしておきます。

git_https




ターミナル(コマンドプロンプト)でクローンを作成する

Macの場合はターミナル、Windowsであればコマンドプロンプトなどを起動します。
起動したらクローンを作成する場所まで移動し、

git clone コピーしたリポジトリの場所

をたたきます。
今回は、Macの環境で「/Users/ユーザー名/Sites/git_test」の場所にクローンを作成します。

先ほどのコマンドをたたくと、git_testの中にGithubで作成したリポジトリ名のフォルダが作成されます。




公開するHTMLファイルをGithubにアップする

公開したいHTMLファイルやCSS、画像ファイルなどすべてコピーして、
作成した「test_page」のなかに置きます。

※gh-pages初期表示されるのは「index.html」という名前のファイルになるので、index.htmlという名前になっていない場合は変更ください!


ファイルを配置したら、ターミナルで「test_page」の場所に移動し、

git add *

をたたき、まずはaddを行います。
addを行うとこで、インデックスと呼ばれるコミットの対象となるファイルを置いている場所に追加されます。


addしたら、コミットを行います。

git commit -m ‘コメントを記入’


最後にpushしてローカルリポジトリからリモートリポジトリに反映させます。
Githubのユーザー名とパスワードを聞かれる場合は、それぞれ入力します。

git push origin master




gh-pagesブランチを作成する

Githubの「test_page」リポジトリを確認すると、ファイルが追加させていることが確認できます。

test_page repository


ファイルが追加されていることを確認したら、「gh-pages」というブランチを作成します。

create gh-pages


create gh-pages2


ブランチを作成したら、Setting画面を確認します。

github setting


Setting画面の下のほうに、Github Pagesという項目があります。
gh-pagesブランチを作成するとここにgh-pagesブランチに配置してあるファイルで構成されたWebページのリンクが表示されます。
このリンクが公開されたWebページのリンクとなります。

github pages link



まとめ

Githubではバージョン管理だけでなくWebページを公開する機能もあり、少ない手順で公開するところまでできるので、demo用のサイトなど、さまざまな場面で使えるのでないでしょうか。


長文お読みいただきありがとうございました。

それでは!

Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.