LoginSignup
1

More than 5 years have passed since last update.

今までに作成したリポジトリをGitHub.ioで簡単にWEBページ化する方法

Last updated at Posted at 2018-12-30

自分で作成する際に情報が分散しててちょっと手間取ったので書きます。
使ってるのはVSCodeです。
ド初心者なので間違いがあったら優しくコメントでお知らせ下さい。

知り合いから教えてもらったのですが、各リポジトリのmaster branchにプッシュすれば自動的にWEBページもアップデートされるという便利仕様。
github.ioのトップページから各リポジトリにリンクつなげたりとかするだけで簡単にポートフォリオが出来てしまう…。なんてこった。

GitHubのmasterブランチをWebページとして公開する手順(GitHub Pages)
たった5ステップ!Githubの機能「GitHub Pages」でホームページを制作しよう
を参考にしています。ありがとうございます!

①github.ioのリポジトリを作成

まず、githubのページでgithub.ioのリポジトリを作成します。
名前の付け方は、ユーザ名がHogehogeだったらHogehoge.github.ioとなります。
これがいわゆるトップページになります。

screenshot-github.com-2018.12.30-20-32-29.png

②先程作ったgithub.ioリポジトリをクローンする

ローカルにクローンします。

screenshot-github.com-2018.12.30-20-35-10.png

リポジトリのページにある、ここのURLをコピーして

VSCodeで適当なフォルダを開き、そこでterminalを開いて
git clone https://github.com/USERNAME/USERNAME.github.io.git(https://の部分は先程コピーしたURL)
と打てばクローンされます。
git clone.PNG

他のソフト使ってたりでよくわかんねー!って場合はすまんがググってくれ。
目的はgithub.ioリポジトリ内にindex.htmlを突っ込むことです。

③index.htmlを作成してコミット、プッシュ

リポジトリの直下にindex.htmlを作成します。htmlはすっからかんのままでも大丈夫です。

git clone 2.PNG

作成したら適当にコメント入れてコミット、プッシュを行います。

git clone 3.PNG

git clone 4.PNG

この時点でhttps://[USERNAME].github.ioというトップページが生成されます。やったぜ。

④公開したいリポジトリのソースコードを/docsに入れる

次はいよいよリポジトリの公開です。
つってもそんなに複雑なことはやらない。

こんな感じで、リポジトリのソースコードをまるっと/docsに入れます。
git clone 5.PNG
git clone 6.PNG

入れたら、Settingsタブを開いて
git clone 7.PNG

git clone 8.PNG

OptionsのGitHub PagesのSource部分を"master branch /docs folder"と選択し、SAVEを押します。
そうすると図のように"Your site is published at https://xxxxx.github.io/xxxxxx"と表示されます。
少々ラグがあったりするのですぐには表示されないこともありますが、これでリポジトリをWEBページとして公開できます。
以上です!

新しくリポジトリ作る際も/docsにソースコード全部入れて作るようにすれば、Settingsいじるだけで簡単にWEBページになるという…。すげえ。

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
1