【GitHub Pages】５分でできる。自分の作品を公開するためのポートフォリオサイトを持つ方法

ゆかりん

こんにちは、ゆかりんです。

先日、GitHub Pagesを使って自分のポートフォリオサイトを作成しました。

悩む人

プログラミングを学んでみたけど、それを見せる場所がないな…簡単に作成した物を載せておけるサイトはないかな？

プログラミングを学んでみたけど、それを見せる場所がないな…簡単に作成した物を載せておけるサイトはないかな？と悩んでいる方に、簡単に出来るポートフォリオサイトの作り方をお伝えします。

プログラミング初学者がまずやるべきこと、それがポートフォリオサイトを作ることです。

５分でできる！と書きましたが、実際のところ私はつまづいて30分ほどかかってしまいました。

その時に悩んだ事を忘備録もかねて残します。

うまくいけば本当に5分でできますので、頑張ってください!

GitHub Pagesで自分のポートフォリオサイトを持つ方法
参考にしたサイト
まとめ

GitHub Pagesで自分のポートフォリオサイトを持つ方法

事前準備

GitHubに登録
自分のパソコンのデスクトップに新しいフォルダを用意（名前はなんでもOKです。今回はgithubとしました）

※ちなみにパソコンはMacを使用しています。

GitHubサイトで作業

①GitHubにログインします。

②自分のページの右上にある『＋』ボタンを押して『New　repository』をクリックします。

③Repository name　にわかりやすい名前を入れます。（今回私の場合はgithub-pagesとしました。）

Description (optional)　には簡単な説明を入れられます。入力はどちらでも大丈夫そうです。

④create repository を押します。

githubのnew repositoryのページ — githubのnew repositoryです

×開けて→◎空けて

続いて自分のパソコン側にうつります。

自分のパソコンで作業

ここから自分のパソコンのターミナルでの作業となります。

自分のパソコンにGitHubのリポジトリを取り込む

ターミナルでコマンド入力をします。

①cd~/github で、事前準備の時に作ったフォルダへ移動します。

②git cloneしてgit hubにあるリポジトリを取り込みます。

③先ほどのリポジトリへ移動します。

④index.htmlファイルをターミナルから作成します。

% cd~/[事前準備の時に作ったフォルダ　]
% git clone git@github.com:[自分のページ名]/[先程のリポジトリ名].git
% cd  [先程のリポジトリ名]
% echo "Hello world GitHub Pages" > index.html

ゆかりん

私の場合…

cd github

git clone git@github.com:yukarin-i/github-pages.git

cd github-pages

echo “Hello world GitHub Pages” > index.html

となります。

出来たサイトがこちらです↓

自分のパソコンからGitHubのリポジトリに記入する

①ターミナルから、先ほど作ったhtmlファイルをgithubにコミット＆プッシュします。

% git commit -m 'add:newfile up' 
% git push origin master

今回、私はgit push origin masterをした時にエラーが起こりました。

MacBook:github-pages yukarikawagoe$ git push origin master
error: src refspec master does not match any.
error: failed to push some refs to 'https://github.com/yukarin-i/github-pages.git'
MacBook:github-pages yukarikawagoe$ 
MacBook:github-pages yukarikawagoe$ echo "# github-pages" >> README.md
MacBook:github-pages yukarikawagoe$git init
Reinitialized existing Git repository in /Users/yukarikawagoe/projects/github/github-pages/.git/
MacBook:github-pages yukarikawagoe$git add README.md
MacBook:github-pages yukarikawagoe$ git commit -m "first commit"
[master (root-commit) 573ddf3] first commit
 1 file changed, 1 insertion(+)
 create mode 100644 README.md
MacBook:github-pages yukarikawagoe$ git remote add originhttps://github.com/yukarin-i/github-pages.git
fatal: remote origin already exists.
MacBook:github-pages yukarikawagoe$ git push -u origin master
Counting objects: 3, done.
Writing objects: 100% (3/3), 233 bytes | 233.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/yukarin-i/github-pages.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

解決策としてgithubの自分のページのcode というカテゴリを開きます。

２番目の

…or create a new repository on the command line

こちらをチェックします。

% echo "# github-pages" >> README.md
% git init
% git add README.md
% git commit -m "first commit"
% git remote add origin
% git push -u origin master

あとは上記を入力いただければサクサク進むはずです。

GitHubサイトでweb公開する

①GitHubサイトに移ってweb公開の準備をします。

githubで作ったサイトに入ります。
settingsをクリックします。
settingページを下にスクロールしていき、GitHub Pages のセクション内にある None をクリックします。
master branch を選択します。
saveをクリックします。

以上で完了です。

参考にしたサイト

GitHub Pagesを使ってサクッとWebページを公開するhttps://qiita.com/0084ken/items/4acdc7a00bf2e6f41f94
(No.2) おじさんが、Git・GitHubを利用できるようにしてみる – GitHubを利用してみるhttps://qiita.com/resojisan/items/75dcc83ea55af0db329f
GitHub Pages公式サイトhttps://pages.github.com/