【脱ド素人】github Pagesでウェブサイトを公開した話
(拾いものですが、一応、大丈夫な画像です。）
こんばんは。
先日から「サイトが公開できないよぉ…辛いよぉ…」と苦しんでいましたが、ついに公開に成功しました。
しかも無料で。
ウェブサイト公開するのに、サーバーっていらないんですね笑
progate終わったけど次何すりゃ良いんだろとか、ウェブサイト公開してみたいけどやり方が全くわからんという人は、ぜひさっくり目を通していただければと思います。
前回までのあらすじ
プログラミングの勉強を初めて早1ヶ月半。
プログラミングの勉強始めて最初の一ヶ月でやったこと。
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月19日
・progateでHTML/CSS/JS/Pythonを終わらせる
・Dai(@never_be_a_pm )さんのスクレイピング入門の写経（２週）
・もくもく会３回開催（うち２回はリモート）
・N予備校入会javaScriptを本格的に
・プログラミング関係のブログを７記事
はじめのうちこそスピーディーに成長できていた僕ですが、５，６週目に入り「作ったものをオンラインで公開できない」という壁にぶち当たっていました。
最初はherokuってやつを使って公開しようとし挫折。
そのあとふらふらとN予備校に入会し、とりあえずjavaScriptを触っていました。
でも公開の仕方わかんなーい、、ってなっていたときにかの名著「わかばちゃん」を本屋さんで発見。
ふへへ pic.twitter.com/dMipJGgDgl
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月15日
あと、わかばちゃんのgitのやつ読んで感動した。こんな便利なものが世の中にはあるのか。エンジニアだけじゃなくてホワイトカラーな人類すべてがつかうべきではないのか。なんで無いんだ。
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月15日
とはいえ、読んでわかった気にはなったものの、すぐには公開できませんでした。
今週もリモートもくもく会します！
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月21日
明日の14時〜17時です！
何かやらなきゃいけない作業がある方はぜひリプ下さい！
DMでSLACKのリンク送ります！#駆け出しエンジニアと繋がりたい #駆け出しwebデザイナーと繋がりたい #もくもく会#リモートもくもく会
今日の2時からリモートもくもく会やるので、作業溜まってる人いたらぜひー。一緒に作業しましょー。
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月22日
はじめます#もくもく会 #リモートもくもく会 #プログラミング https://t.co/tFEX6luHJO
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月22日
あ、明日も１４時〜１７時でリモートもくもく会しております。何か作業がある方、予定がなくてひましてる方、勉強が停滞してきている方、台風で外に出れない方ぜひいっしょにもくもくやりましょー！リプかDMくれればSlackにご招待します！#もくもく会#駆け出しエンジニアと繋がりたい#台風 https://t.co/V34sDFNiAd
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月29日
それでも週末のもくもく会を欠かさず、試行錯誤を続けていたら、ついに道がひらけました…！
https://t.co/5jSqbkXrLg
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月30日
我が二個目の作品。今度は課題の品ではなく、自作です。やってることはN予備校第一章と大差ありませんが。。
というわけで、本題。
「github pagesでウェブサイトを公開する」方法を公開します。
超具体的な公開方法を公開します
ステップ０ 公開したいプログラムを作る
まずは自分のパソコンで公開したいプログラムを書きましょう。
公開だけならHTMLで”HELLO WORLD”するだけでもおっけーです。
ステップ１ githubのアカウントを作る
とりあえずgithubでアカウントを作りましょう。
うえの記事とか参考になると思います。
githubっていうのはプログラミングのコードを共有するSNSみたいなものらしいです。
エンジニア界隈では常識ツールらしいので調べてみると良いでしょう。
無料のアカウントでおっけーです。
ステップ２ Sourcetreeを入れる
本来、プログラムをアップするにはCUI（あの真っ黒でよくわかんない画面）を使って、コマンドラインを駆使してプログラムをアップロードしないといけません。
ですが、僕のような初心者未満のド素人には、荷が重い話です。
そういうのいいからとりあえず一回公開させてくれ、と思います。
そこで「Sourcetree」というツールが役にたちます。
あの神書籍「わかばちゃん」推薦のツールです。
もちろん無料。
Sourcetreeの使い方に関しても無限に記事があるので、ぜひ調べて見てください。
ステップ３ githubでリモートリポジトリをつくる
僕は最初リポジトリが何なのかわかりませんでした。
新種の鳥とかでしょうか。（わかばちゃん読みましょう）
リポジトリっていうのは データを保管する「貯蔵庫」のことです。
詳しくは僕も良くわかっていませんが、作ったプログラムを保存する場所、というふうにだけ理解しておけば公開には差し支えありません。
githubではオンライン上に貯蔵庫を作成することができます。
これが「リモートリポジトリ」ですね。
リモートリポジトリに保存されたコードの中で、メイン（マスターブランチっていいます）に設定したものをgithub pagesという機能を使って公開することができるわけです。
なんか良い感じの記事があった気がしたんですが、見つからなかったので簡単に書いときます。
（僕より詳しい人とか無限にいるので、ぜひ一度ググってみてくださいね）
ログインしたあとにプラスのところをクリック。
そしてNewRepositoryをクリックします。
そしたらこういう画面が出てくるので、URLになる名前を半角英数で打ち込んで、下の方にあるCreateRepositoryをクリックします。
これでリモートリポジトリができました。まだ空白ですけども。
ステップ４ ローカルにクローンする
リモートリポジトリを作ったは良いもののまだ空っぽなので何も表示できません。
なので次にローカルリポジトリを作って、リモートリポジトリをクローン（コピーみたいな感じ）していきましょう。
クローンの仕方は簡単。
Sourcetreeが全てやってくれます。
最後のtestってやつは、さっきこの記事のために作ったやつです。
Sourcetreeをgithubと連携すれば、リモートリポジトリを一覧にして教えてくれます。
これの該当のものに関して、右側の「クローン」をクリックすると、ローカルリポジトリが作成されリモートリポジトリの内容がコピーされてきます。
まだtestは空っぽなので、クローンしてもからのフォルダができるだけです。
クローンをクリックすると、下のような画面がでてきて、「保存先のパス」のところに新しいフォルダが生成されます。
そのフォルダがローカルリポジトリになります。
ステップ５ コミット＆プッシュ
できたらコミットしてプッシュしましょう。
言葉の細かい意味はわかばちゃんを読みましょう笑
アップロードみたいな意味だと思って入れば概ね間違いはないはずです！
さっき作ったローカルリポジトリのフォルダに、公開したいプログラムをすべて突っ込みます。
僕が作ったやつは、HTML/CSS/javaScriptをいれました。
画像とかあったらそのファイルも必要だと思います。
入れたらSourcetreeを開きましょう。
「ファイル」の「開く」を選んで、該当のフォルダをオープン。
ちゃんと合っていれば、左端に?マークのあるファイルが幾つか表示されるはずです。
チェックマークを入れて、コミットボタンを押しましょう。
コミットしたら、リモートリポジトリにプッシュしましょう。
（いっぱい記事あるので、詳しいやり方はググってください）
ステップ６ githubのセッティングでマスターブランチを公開する
ここまでで作ったコードをgithubに載せるところまでは行きました。
ですがこれだけではコードが公開されただけで、ウェブページは作成されていません。
githubの設定を変更すれば公開できます。
①githubを開く
②右上のアイコンからyour repositoriesをクリック
③リモートリポジトリの一覧から該当のものを選択
④セッティングを選ぶ
⑤下の方にいってー
⑥マスターブランチを選択（一番上のやつ）
⑦リンクが生成されます
https://kakipy.github.io/test/
はろーわーるど！！
【宣伝】１０月７日、もくもく会やります
はい。サイトを公開できましたね。
モチベーション維持だけでなく、能力の向上の面からいっても、作ったものをガンガン公開していくことはメリットがあるように思います。
作る→公開→改善のサイクルを回して行きましょう。
あと最後に、宣伝させてください。
１０月７日、都内でもくもく会やります。
あ、技術書展の日休み取れそうだから都内いく！！
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月18日
いぇいいぇい！
— かきぴー@駆け出したエンジニア (@kakipy722) 2018年9月18日
というのも１０月８日の技術書展5に行くことにしたから、早めに都内にいってもくもく会するのがベストだなと思ったわけです。
詳細は下記。
日程：１０月７日
時間：１２時〜１６時予定（※変更の可能性あります）
場所：渋谷あたり予定（※変更の可能性あります）
参加費：無料（※会場の確保ができなければ変更の可能性あります）
必要なもの：当日やるタスク、ノートパソコン
※一部変更の可能性あり
※あまりに参加者が多ければ人数制限も考えてます
対象者
・最近プログラミングの勉強が滞っているなっていう方
・勉強会とかもくもく会とか興味あるけど参加したこと無いっていう方
・他のプログラマとあってみたいという方
・駆け出しエンジニア
・駆け出しエンジニアと繋がりたい人
・ド素人エンジニア
・駆け出しWEBデザイナー
・駆け出しWEBデザイナーと繋がりたい人
・やらなきゃいけない作業が溜まっている人
などです！
僕自身、まだまだ初心者も初心者、ド素人もド素人です。
多分、当日もprogateとかN予備校とかを触っていると思います。
なのでどんなレベルの人でも気軽に参加してください！
参加希望の方は、僕のtwitter（@kakipy722）にリプかDMをいただければ詳細をお伝え致します。
せっかく交通費と宿泊費を使って都内に行くので、多くの人と作業できればと思っています(^^)
ぜひご連絡くださいー！
よろしくお願い致しますm(_ _)m
