デザイナーの僕がプログラミングを学ぶ | GitHub Pageのつくりかた

2018/12/5

こんにちは！マツイ(@takuo0327)です。
今回から、twitterのアカウントを表示してみました。

最近、Github Pageを作ったので、議事録も兼ね作り方をご紹介します。

Github pageとはなんぞや

まずソフトウェア開発プロジェクトのために作られたソースコード管理サービスのGithubというものがあります。紙面媒体のデザインをしているとなかなか出逢わなかったりすると思いますが、開発者がプロジェクトを進行しやすいようにと作られたサービスです。

Github Pageとは、このGithubを使って、無料でWEBページを公開できるサービスの事を呼びます。制作するまでは知らなかったのですが、jsは利用可能ですが、phpなどのサーバーサイドで何かすることはできません。あくまでも静的ファイルのみの公開できます。とはいえど、jsが使えるのである程度のフロント作業ができます。

サイト公開までの手順

レポジトリと呼ばれるGithubでの作業やhtml作業はありますが、デザイナーでもカンタンに公開できます。具体的には、下記の流れで進めて行きます。

1.リポジトリを作成
2.レポジトリをクローンする
3.webページを作成
4.GitHubにpushする
5.GitHubPageの公開設定
6.公開の確認

1.レポジトリを作成

まずGithub内でレポジトリを作成する必要があります。調べた所、ユーザのウェブページを公開する、ユーザサイトと、プロジェクト自体のウェブページを公開するプロジェクトサイトがあるようですが、今回は、ユーザサイト向けの記事となります。

早速レポジトリを作成して行きます。Githubページにアクセスし、ログインします。アカウントを作成してない方は、先にアカウントを作成します。ログインして、自分のアイコンの横にある「+」をクリックして「New repository」をクリック。

クリックしてレポジトリ名を入力。このレポジトリ名はサイトのURLにも使われるので、サイトに合った名前をつけましょう。

これで、レポジトリ自体の作成は完了。

2.レポジトリをクローンする

次に、作業する環境を整えるためレポジトリをgit cloneでクローンします。クローンは、ターミナルを開きコマンドを入力するか、sothtreeを使ってクローンする方法があります。ターミナルを使ってクローンするには、下記を実行します。

$ git clone https://github.com/username/xxxxx.git Myprojects  # 任意のディクレトリ名

これでクローンできたと思います。

3.webページを作成

作業環境ができれば、そのレポジトリに移動してindexファイルを作成して通常通りwebページを作成して行きます。

$ cd 任意のディレクトリ
$ touch index.html

phpなどのサーバーサイド以外は利用可のです。自由にwebデザインをお楽しみください。

4.Githubにpushする

今までGithubで作業してこなかった方には、pushがなんのこっちゃわかりません。pushは、サーバーに新しいファイルをアップするように、レポジトリにhtmlファイルなどをアップする事をpushすると呼びます。pushの方法は以下です。

$ git add --all
$ git commit -m "ファイルのアップ"
$ git push  origin master

5.GitHubPageの公開設定

pushするだけではインターネット上に表示されないので、Github側で公開設定を行います。公開設定も簡単で、Githubレポジトリのsettingをクリックして、ページ下部のGitHub Pagesのところで、master branchを選択してsaveを押すだけで公開完了です。

6.公開の確認

公開できたら、実際に確認してみましょう！URLはhttps://ユーザ名.github.io/リポジトリ名となります。自分のサイト名のところをレポジトリ名に変更する事で、確認できます。例えばこんな感じです。

https://takuoo.github.io/user_github_page/

7.さいごに

なんでもやった事ないことはチャレンジすることで、やってみたい人への情報の橋渡しになるし、ちょっと詳しくなった気もします。やって損しないことであれば、どんどんやった方がいいと思っています。デザイナーだからとか、プログラマーだからとか、自分のポジショントークをしていてもあまり意味がないと最近は思っています。そんな事で、自分の可能性を捨ててしまうのはもったいないです。

なので、作ったことがない人で作ってみたい人は、ぜひぜひ作ってみてください。新しい世界が広がるかもです！

実際に自分自身が作ったサイトは、こんな感じです。まだ未完成ですが、残作業も含めて公開していますのでご覧ください。