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

ポートフォリオのイメージイラストサロンワーク
ゆかりん
ゆかりん

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

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

悩む人
悩む人

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

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

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

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

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

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

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

gitとpcのイラスト
gitとpc

事前準備

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

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

GitHubサイトで作業

①GitHubにログインします。

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

githubの自分のページ
githubの自分のページ


③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で作ったサイト
githubで作ったサイト

自分のパソコンから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 というカテゴリを開きます。

2番目の

…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サイトの自分のページ
githubサイトの自分のページ
settingが完了した画面
settingが完了

以上で完了です。

参考にしたサイト

githubの公式サイトの写真

まとめ

これで、作ったアプリやサイトを誰にでも見てもらえます。

ゆかりん
ゆかりん

みんなに見てもらおう!

見せて説明できるので自己紹介の時に非常にわかりやすいのですね。

コメント

タイトルとURLをコピーしました