読者です 読者をやめる 読者になる 読者になる

公開したい。

公開したいです。佐久本です。
ポートフォリオをつくったので公開したいんです。

ググってみたら佐久本の作っているポートフォリオのような静的ページならGithub Pagesを使って公開することができるようです。僥倖。

こちらの記事を元にどうにか頑張ってみたらどうにかなったのでメモです。
ほとんど写経です。ご容赦ください。

techacademy.jp

流れ。

  • Github pages用のリポジトリを作る。
  • ウェブページの作成。
  • Githubにプッシュ。
  • ちょっと待ってからアクセス。
  • うれしくなる。

Github側でやること。

Githubアカウントは一応持っていたんで、新しくリポジトリを作ります。
ログインして下の画像のとこを順番にぽちぽちやっていきますよ。


f:id:sanjukyu:20161022161337p:plain:w180

1: +ボタンをぽち。
2: New repositoryをぽち。

新しいリポジトリが生まれました。やったー。


f:id:sanjukyu:20161022161357p:plain:w400

3: 新しいリポジトリに名前をつけてあげます。
[username.github.io]という具合に、usernameはそれぞれ自分のGithubユーザー名を入れておきます。



f:id:sanjukyu:20161022161416p:plain:w400
4: 公開したい感じなのでここのチェックは[Pabilc]にしときました。
5: 入力したら[Create repository]をぽち。


ターミナル側でやること。

Github側での作業が済んだので、次はローカル環境に作ったリポジトリをクローンしていきます。
ターミナルを開いて頑張っていきます。

$  git clone https://github.io.com/username/username.github.io

↑こいつをクローンしたい場所に移動して打ちました。
ここでもusernameのとこはそれぞれ自分のGithubユーザー名を入力します。
クローンすると、カレントディレクトリ(現在作業を行っているディレクトリ)に[username.github.io]と言うディレクトリができるので、そのディレクトリに移動します。

$ cd username.github.io

これで移動完了です。リポジトリを作れました。わーい。



ページを作ってく。

リポジトリが作れたので、つぎはページを作っていきます。
佐久本は既にローカルでせこせこ作っていたのでリポジトリにファイルをぶち込んだのですが、ここでファイルを作って追加したり更新したりできるようです。
HTML,CSS,JavaScript,画像などなど入れることができるので、

$ echo hoge > index.html

↑こんな感じで入力していきます。

ファイルを作ったりぶち込んだりしたあとは、リポジトリにコミットしていきます。

$ git add --all
$ git commit -m "Initial commit"

 ↑これでコミットできる。できるぞ。



GitHubにプッシュ。

ローカル上で作ったファイルや変更箇所を、GitHub Pagesで表示させるためにGitHubへプッシュしていきます。
マスターブランチをプッシュしていきます。

$ git push -u origin master

↑これを打った後にGitHubのユーザー名とパスワードを聞かれるので、入力してプッシュします。
以上で作業は完了です!

ちょっと待ってからアクセス。

https://username.github.io/
↑ここのusernameにも自分のGithubユーザー名を入力してアクセスします。 プッシュしたら反映されるまでちょっと待ってからのがいいみたいです。



うれしくなる。

反映されたらいよいよ嬉しくなるほかないですね。
出来栄えはともかくですが実際にページが表示されるとテンションあがりました。

手直しもしつつ練習用のページとしていきたい感じです。
今日のところはそんな感じです。
さらだばー。