GitHub Pages 利用方法備忘録

こんばんは。現在Web開発の学習を行っているヒエと申します。

今回は自身の備忘録として、GitHub Pagesの利用方法について手順をまとめたいと思います。

GitHub Pagesを活用すると、GitHubリポジトリからHTML,CSS,またJavascriptファイルを直接取得して、静的なサイトを公開することができます。 またブランチで新たにコミットされると、その更新内容が反映されます。

試験的にサイトを公開する際に便利な機能です。

GitHub Pagesを利用する際のいくつかの注意点

手順を説明する前にいくつかの注意点に触れておきます。

商用利用の禁止

商用としてGitHub Pagesを使用されることは想定されておらず、また禁止されています。 機密情報のやり取りにこのサービスを使うべきではないとされています。 あくまで練習用、試験用として活用します。

GitHubの無料プラン (GitHub Free)の制約

GitHubの無料プランを使用している場合、リポジトリをPublicに設定している時のみGitHub Pagesを使用することができます。 Privateのリポジトリで本サービスを使用したい場合は、有料プランの契約が必要です。

容量制限

公開されたGitHub Pagesのサイトは1GB以内にする必要があります。またGithub Pagesのソースリポジトリも1GB以内にするのが良いとされています。 また、GitHub Pagesサイトには月当たり100GBのソフトな帯域幅制限が設定されています。

以上のことは留意してGitHub Pagesを活用しましょう!

GitHub Pagesのはじめかた

それでは、GitHub Pagesの使用方法をスクショを交えながら紹介します。

⓪まずはHTML、CSSJavascriptファイル等を特定のリポジトリにpushします。 静的なサイトに必要なファイルを全て用意しておきます。

GitHubにログインして、GitHub Pagesを使用したいリポジトリを選択し、Settings(スクショ赤枠)を選択します。

②左枠の項目のうち、「Pages」を選択します。

GitHub Pagesの設定画面が開きます。

ここの設定項目のうち、「Branch」がGitHub pagesで公開したいブランチを選択する部分となっています。

デフォルトではNoneになっているため、ここを変更します! Noneのタブを選択しましょう。

リポジトリで使用しているブランチの一覧が表示されるので、公開したいブランチ名を選びます。その後に「Save」を選択します。

GitHub Pagesで公開するブランチが選択できました。

以上で設定は完了なのですが、すぐにはサイトは公開されません。

慌てず数分ほど待ちましょう。

⑥しばらく待った後にブラウザを更新すると、GitHub Pagesの公開に成功すれば下記画面のように公開されたサイトのURLと「Visit site」が表示されます。

こちらの「Visit site」を選択すると、GitHubで公開されたサイトを閲覧することができます。

⑦実際に公開されたサイトは以下のようになります。

以上でGitHub Pagesによる静的サイト公開ができました。簡単ですね!

GitHub Pagesのページの非公開・削除方法

GitHub Pagesのページを非公開するには、上記③のページで「None」を選択すれば非公開設定に戻ります。

また、リポジトリ自体を削除するとGitHub Pagesのページも削除されます。

まとめ

GitHub Pagesは以上のように非常に簡単な手順でサイトを公開することができます!

Web開発の学習の中でサイト公開を試すときに活用したい便利機能ですね。

Linuxの基本コマンドを振り返る

こんにちは。先週より筆者はLinuxの基礎を学習しております。 そこで、特に使用頻度の高いコマンドを振り返り、復習したいと思います。

この記事はコマンドの復習がメインであるため、頻出コマンドの重要ポイントを書き出していきます。

ディレクトリの操作コマンド

cd

cdは、ディレクトリの移動に使用します。

コマンド記述方法は以下の通りです。

$ cd [オプション][ディレクトリ]

このコマンドを実行すると作業ディレクトリを指定した[ディレクトリ]に移動します。

aaa/bbb/ccc...といった、絶対パスによるディレクトリ指定も可能ですが、他には以下の記述を使用して指定することも可能です。

ディレクト 意味 指定方法
カレントディレクト 現在自分が作業しているディレクト .
ディレクト カレントディレクトリの一つ上(rootに近い)のディレクト ..
ホームディレクト /home/(自分のユーザー名) のディレクト ~(チルダ)
ルートディレクト / ディレクト /

例えば、 ../aaa/bbb といったように、現在のディレクトリから特定のディレクトリを指定するといったパスの書き方(相対パス)も可能です。

上記の指定を行うと、親ディレクトリに移動した後、aaa/bbbのディレクトリへ移動します。

pwd

pwdは現在のカレントディレクトリを表示します。

$ pwd [オプション]

こちらのコマンドを実行すると、現在のカレントディレクトリの絶対パスを表示します。 現在のディレクトリがわからなくなった時に確認用として使用します。

ls

lsコマンドは、任意の対象のファイルディレクトリのファイル・ディレクトリ一覧を表示します。

$ ls [オプション][ディレクトリ・ファイル名]

このコマンドを実行すると、[ディレクトリ]のファイル・ディレクトリを一覧で表示します。 こちらのコマンドでディレクトリを指定せずに実行した場合は、カレントディレクトリのファイル・ディレクトリを表示します。

またコマンドでディレクトリを複数指定すると、複数のディレクトリに対して本コマンドをまとめて実行することができます。

よく使うオプジョン
オプション 効果
-a 隠しファイル(. ドット から始まるファイル)も含めて全てを表示する
-l ファイルモードやサイズ、タイムスタンプ等、ファイルの詳細情報を羅列する
-F ファイルの種類を各ファイルの末尾に表示する

-Fで表示されるファイルの種類は、記号なしの場合は通常ファイル、/の場合はディレクトリ、*の場合は実行可能ファイル、@の場合はシンボリックファイル(lnコマンドで解説) を示します。

mkdir

mkdirコマンドは、ディレクトリの新規作成を行うコマンドです。

$ mkdir [オプション]<新規ディレクトリ名>

このコマンドを実行すると、入力したディレクトリ名をカレントディレクトリに新規作成することができます。

よく使うオプジョン
オプション 効果
-p ディレクトリ単体ではなく、親ディレクトリを含めてまとめて作成します。

例えば、mkdir -p aaa/bbb/ccc と入力すると、カレントディレクトリにaaa/bbb/cccのディレクトリを一括で作成します。

rmdir

rmdirは空のディレクトリを削除するコマンドです。

$ rmdir [オプション]<ディレクトリ名>

以上の内容を空のディレクトリに対し実行すると、ディレクトリが削除されます。 ファイルやディレクトリが入っている場合、エラーが発生し削除されません。

オプジョン
オプション 効果
-p 指定したディレクトリ配下のディレクトリも、まとめて削除することが可能になります。

以上のオプションを使用すれば、例えばカレントディレクトリのaaa/bbb(bbbの中身は空)のディレクトリはまとめて削除することができます。

ファイルの操作コマンド

cat

catはファイルの中身を表示するコマンドです。

$ cat [オプション]<ファイル名>

以上のコマンドを実行すると、ファイルのテキスト内容をそのまま出力します。 [ファイル名]を複数指定した場合は、連結して出力されます。

よく使うオプジョン
オプション 効果
-n ファイルの出力時に、左側に行番号を付記します。空白行にも行番号が振られます。
-b ファイルの出力時に、左側に行番号を付記します。空白行には行番号が振られません。

less

lessコマンドはファイルの中身をスクロール可能な状態で表示します。

$ less [オプション]<ファイル名>

このコマンドを実行すると、画面が切り替わり、ファイルの中身全体を閲覧することができます。

この状態では、vimのようにjで下方向、kで上方向にスクロールすることができます。

以下less実行時の操作を簡単にまとめます。

キー 動作
j``↓ 下方向にスクロール
k``↑ 上方向にスクロール
/``?+[文字列] [文字列]を検索(?は逆方向に検索)
G ファイルの最後に移動
g ファイルの最初に移動
q lessコマンドのファイル閲覧を終了

ただ中身を表示するcatとは異なり、様々な操作でファイルを閲覧することができるので、長めのファイルの中身を確認したい時に使用します。

オプジョン
オプション 効果
-N ファイルの出力時に、左側に行番号を付記します。空白行にも行番号が振られます。

tail

tailコマンドはファイルの中身の末尾を表示します。

$ tail [オプション]<ファイル名>

このコマンドを実行すると、ファイル内容の末尾10行を出力します。

よく使うオプジョン
オプション 効果
-n + [行数] ファイル末尾の出力の行数を指定することができます。
-f ファイル内容が更新されると、出力内容が更新されるようになります。

-fはリアルタイムでファイル内容の更新を出力できるようになるため、ログデータをモニタリングするときに活用することができます。 -fによる監視はctrl+Cで終了します。

touch

touchコマンドは、ファイルの新規作成をカレントディレクトリに行うコマンドです。

$ touch [オプション]<新規ファイル名>

上記コマンドを実行すると、新しいファイル(txt.mdファイル等)を作成することができます。 新規ファイルを複数続けて入力することで、複数ファイルを同時生成することもできます。

[ファイル名]について既存のファイル名を指定した場合、対象の既存ファイルのタイムスタンプを現在時刻に更新します。

rm

rmコマンドは、ファイルの削除に使用するコマンドです。

$ rm [オプション]<既存ファイル名>

こちらを使用すると、カレントディレクトリの[既存ファイル名]のファイルを完全削除します。 touchコマンドと同様、複数記述による複数削除も可能です。

よく使うオプジョン
オプション 効果
-r ディレクトリを対象に削除を実行します。ディレクトリの中のディレクトリ・ファイルも全削除します。
-f ファイル削除する際に、「ファイルが存在しない」等の警告文を表示しないようにします。
-i ファイル削除を行う際に確認を行うようにします。

rmコマンドは後戻りのできない完全削除となるため、(特に-rオプションを使用する際など)十分に気をつけて実行します。

mv

mvコマンドはファイル/ディレクトリの名前の変更、あるいはファイル/ディレクトリのディレクトリ間の移動を行うことができるコマンドです。

コマンドの書き方によって実行内容が異なるコマンドです。以下2通りの記述方法を説明します。

$ mv [オプション]<既存ファイル/ディレクトリ名><新規ファイル/ディレクトリ名>

こちらの内容で実行すると、[既存ファイル名]のファイル/ディレクトリ名を[新規ファイル/ディレクトリ名]に変更することができます。

一方で、

$ mv [オプション]<既存ファイル/ディレクトリ名><ディレクトリのパス>

こちらの内容で実行すると、既存のファイル/ディレクトリを[ディレクトリのパス]へ移動させることができます。

よく使うオプジョン
オプション 効果
-f ファイル/ディレクトリを移動する際に、警告文を表示しないようにします。
-i ファイル/ディレクトリの移動を行う際に確認を行うようにします。

cp

cpコマンドはファイル/ディレクトリをコピーする際に使用します。

$ cp [オプション]<既存ファイル名><新規ファイル名>

既存ファイルをカレントディレクトリに新規ファイル名としてコピーをしたい場合は上記コマンドを実行します。

なお、[新規ファイル名]が存在するファイル名の場合、既存ファイルの内容が上書きされます。

$ cp [オプション]<既存ファイル名><ディレクトリのパス>

既存ファイルを別ディレクトリに同名でコピーをしたい場合は、上記のようにコマンドを実行します。

なお、コピー先のディレクトリに[既存ファイル名]と同名のファイルが存在している場合、既存ファイルの内容が上書きされます。

よく使うオプジョン
オプション 効果
-r ファイルではなくディレクトリ全体のコピーを行うことができるようにします。
-i ファイル/ディレクトリのコピーを行う際に、ファイル名が重複し上書きを行う場合、処理前に確認を行うようにします。

オプションについて、-iを活用することで、意図しない上書きを回避することができるため、使用すると重大なミスを回避することができます。

ln

lnコマンドを使用することで、ハードリンク・シンボリックリンクを作成することができます。 前提知識として上記2つのワードについて解説します。

ハードリンクとは

ファイルに別名をつけて新たにファイルを作成します。 この新しいファイルも、既存ファイルと同じデータを参照します。元のファイルと性質が(ほぼ)同じものと考えます。

ハードリンクとして作成されたファイルを削除しても、ハードリンク元のファイルを全て削除しなければデータは完全削除されません。

また、ハードリンクはディレクトリに対しては作成することができません。異なるファイルシステムやデバイスを跨いでハードリンクを作成することもできません。

シンボリックリンクとは

一言で言うと普段Windows/Macで作成する「ショットカットファイル」のようなものです。 異なるファイルシステムやデバイスを跨いで、元ファイルを参照するファイルを別ディレクトリに作成することができます。

注意点として、元ファイルが削除されると、シンボリックリンクはリンク切れとなり、アクセスができなくなります。(この辺りもショートカットファイルと性質が同じです) ハードリンクとは異なり、ディレクトリに対しても作成することができます。

長いパス名を省略して活用したいとき、ローカルのファイルパスをネットワーク上のファイルシステムのパスに関連つけたいとき等々、さまざまな活用方法があり、多用されております。

以上の2つのリンクは、lnコマンドによって作成することができます。

$ ln [オプション]<リンク元ファイルのパス><リンク名のパス>

オプション無しで実行すると、ハードリンクが作成されます。 カレントディレクトリからの相対パスを指定することで別ディレクトリにハードリンクを作成できます。

よく使うオプジョン
オプション 効果
-s ハードリンクではなくシンボリックリンクを作成します。
-v リンクを作成するときに、作成したリンクと、そのリンク先を出力します。

多用するシンボリックリンクを使用するときは、上記のように必ずオプション-sを使用します。

find

findコマンドは、ファイルの検索を行うことができるコマンドです。

$ find <検索開始ディレクトリ><検索条件><アクション>

<検索開始ディレクトリ>の部分にディレクトリを記述すると、そのディレクトリ配下の範囲のファイル検索を行います。 ここの部分で検索するディレクトリの範囲を絞ります。

<検索条件>の部分でファイルの検索条件を指定します。いくつか検索条件に種類があるため紹介します。

-name <ファイル名> ファイル名を指定してファイルの検索を行います。ファイルの大文字・小文字は区別します。

-iname <ファイル名> ファイル名を指定してファイルの検索を行います。ファイルの大文字・小文字は区別しません。

※①②の<ファイル名>の部分は以下のようなワイルドカードを使用することができます。 *は任意の文字列(文字数は問わない)を指定します。 ?は任意の1文字を指定します。

-type <ファイルタイプ> ファイルの種類で検索を行うことができます。 <ファイルタイプ>について以下の内容を記述するとファイルタイプを指定することができます。

<ファイルタイプ> ファイルの種類
f 通常ファイル
l シンボリックリンク
d ディレクト

-a 複数の検索条件を指定する際に付与します。 例えば①/②と③を併せて検索条件としたいときに記述します。

以上の条件を組み合わせることで、ファイルの種類やファイル名の一部分を検索条件として、特定のディレクトリ範囲のファイルを検索することができます。

ユーザー権限とアクセス権を扱うコマンド

chmod

chmodコマンドは、ファイル・ディレクトリのアクセス権を変更することができます。

このコマンドは既に設定されているアクセス権の一部を編集するやり方と、1からアクセス権を設定する2通りのコマンドの打ち方があります。

$ chmod [編集する権限の指定][権限操作の指定][編集する権限]<ファイル・ディレクトリ名>

以上の内容でカレントディレクトリのアクセス権の一部を編集することができます。

ここで、[編集する権限の指定]では、以下の半角英字を使用します。

半角英字 内容
u 所有者の権限
g グループの権限
o その他のユーザーの権限
a 全ユーザーの権限

次に、[権限操作の指定]では、以下の記号を使用します。

記号 内容
+ 権限を追加
- 権限を削除
= 記述した権限にする

最後に、[編集する権限]では、以下の半角英字(パーミッション)を使用します。 ※パーミッションは、例えばls -lで表示されるファイル権限の表記と同様です。重要!

半角英字 内容
r 読み取り
w 書き込み
x 実行

以上の組み合わせによってアクセス権の変更を行うことができます。

例えば、所有者の権限に書き込みを追加したいときは、 $ chmod u+w と入力します。

一方で、1からアクセス権の編集を行う際には以下のコマンド記述の方法もあります。

$ chmod <所有者の権限設定><グループの権限設定><その他のユーザーの権限設定> <ファイル・ディレクトリ名>

ここで、所有者・グループ・その他のユーザーの権限設定は、以下のパーミッションの設定の数値を足し合わせた値を入力します。

半角英字 内容 数値
r 読み取り 4
w 書き込み 2
x 実行 1

各項目の数値は2進数の値となっているため、0〜7の数値で3種の設定の全パターン8通りを網羅できる、という仕組みになっております。 例えば5と入力した場合は読み取りと実行を許可する設定を行います。

所有者・グループ・その他のユーザーの順に3つ設定した3桁の数値を<ファイル名>に付けることで、ファイルのアクセス権を1から設定することができます。

よく使うオプジョン
オプション 効果
-R ディレクトリ配下全体のファイル・ディレクトリの権限を編集できるようにします。

chown

chownコマンドを使用することで、ファイルの所有者を変更することができます。

$ chown <変更後の所有ユーザー名><ファイル・ディレクトリ名>

こちらを実行することで、<ファイル・ディレクトリ名>の所有ユーザーを変更できます。 なお、こちらのコマンドはrootユーザーでなければ実行することができません。

よく使うオプジョン
オプション 効果
-R ディレクトリ配下全体のファイル・ディレクトリの権限を編集できるようにします。

プロセス・ジョブを管理するコマンド

ps

psコマンドは、現在実行されているプロセスの一覧を表示するコマンドです。

$ ps [オプション]

こちらを実行すると、現在実行中のコマンドが一覧となって表示されます。 色々なプロセスの詳細が出力されますが、表示列の用語の意味は以下の通りです。

用語 意味
PID プロセスID
TTY 制御端末の種類・番号
TIME 消費したCPUの稼働時間
CMD コマンド名
よく使うオプジョン
オプション 効果
a 全てのユーザーの端末操作のプロセスを表示します。
u CPUやメモリの使用率など詳細に表示します。
x psコマンドを実行した全てのプロセスを表示します。

これら全てをあわせて、ps aux として実行すると、広範囲のプロセスを詳細に表示することができるため、頻繁に利用します。

kill

killコマンドはジョブ・プロセスを強制終了するコマンドです。

ジョブを終了させる場合は以下のコマンドを実行します。 (なお、ジョブIDはjobsコマンドで調べることができます。)

$ kill [オプション] %<ジョブID>

プロセスを終了させる場合は以下のコマンドを実行します。

$ kill [オプション] <プロセスID>

killコマンドは、正確にはTERMという終了を意味するシグナルを送信するコマンドです。

よく使うオプジョン

killコマンドはデフォルトではTERMのシグナルが送信されますが、このシグナルの内容はオプションという形で<-[シグナル]>と入力することで、別のシグナルを送信することができます。

一つ覚えておきたいシグナルとしてSIGKILLがあります。 このシグナルを使用するとジョブ・プロセスを強制終了させることができます。 異常な動作をしており、killコマンドを受け付けない場合に、

kill -SIGKILL <プロセスID>

を実行することで強制終了します。

まとめ

以上でLinuxの基本コマンドの解説を終了します。 この他にもLinuxにはたくさんのコマンドやオプションが用意されていますが、特に頻出のコマンドについて内容をまとめてみました。 現在プログラミングの学習を継続しておりますが、Linuxの概念は必ずCUIを操作する場面で活用することになるため、よく覚えておきたいと思います。

Web技術の基本的な用語を振り返る

こんにちは、ヒエと申します。

現在は非IT業界にてITに関する企画を行う業務に主に取り組んでおりますが、webエンジニアへの転職を目指して日々少しずつ学習を進めております。

 

Qiitaも最近開設しましたが、はてなブログでは読んだ本の感想や学習の振り返りを記録するような使い方をしたいと考えております。

 

さて1回目の投稿ですが、webに関する基本的な用語が分からなければ今後の学習に影響が出るため、先ほど読了した「プロになるためのWeb技術入門」を振り返りつつ、この本で登場した用語についていくつか振り返りたいと思います。

 

サーバーとクライアントのリクエスト/レスポンスとは

webプログラムは、インターネット上のサーバーの中に設置されています。このサーバーのwebプログラムにアクセスする世界中の各ユーザーのことをクライアントと言います。

このクライアントからサーバーに対して何かしらの動作の要求をすることをリクエス、その要求に対するサーバからクライアントへの応答をレスポンスと言います。

なおHTTPリクエストのことを省略してリクエストと呼ぶこともありますが、SMTP等、他の通信プロトコルでもリクエスト・レスポンスという用語を使用します。

 

プロトコルとは

サーバーとクライアント等のコンピューター同士が通信を行う際に、どのような情報をどうやってやり取りをするのか、あらかじめ定義をしなければ、通信のやり取りは実現できません。そこで、あらかじめコンピューターの接続する方法や信号の送る内容等、通信の取り決めを決めておく必要があります。この取り決めを「(通信)プロトコルと呼びます。

TCPやIPなどネットワークの通信の基本を定義するものもプロトコルの一種です。一方でうWebブラウジングを行うHTTPやファイル転送を行うFTPなどアプリケーション層で機能するデータ通信も全てプロトコルの一例です。

 

ポートとは

クライアントとサーバーはIPアドレスというインターネット上の住所のようなものを頼りにデータのやり取りの宛先を特定しております。この宛先を特定しパケットに分割してデータ送信を行うプロトコルTCP/IPと呼びます。

このTCP/IPについて、受信をしたPC側が、どのアプリケーション層のプロトコルでどのように処理をするべきかどうか、TCP/IPでは判別ができないという課題があります。

そこで、TCP/IPによって情報を受け取るアプリケーションは、0から66535までの数字で表された「待ち受けポート」をあらかじめ決めて情報を待つようにし、この数字の場合はこの処理を行う、と事前に決めておくという手法を取り入れています。この処理の判別に使用する数字をポートと言います。

特に上記で挙げた代表的なプロトコルであるFTPSMTP、HTTPは、頻繁に利用されるために使用するポート番号が固定されております。(右から順に20-21,25,80)このようなポートをウェルノウンポートと呼びます。

 

ステートフルとステートレスの違い

クライアントとサーバ間のやり取りは、ステートフルとステートレスの2種類の仕組みに分類されます。

ステートフルとは、クライアントとサーバーが1回やり取りした内容をサーバー側が保持して、その内容に応じて2回目以降のやり取りも継続する手法です。
ステートフルのやり方では、やり取りの内容を元に処理内容を分岐させることもできるため、効率よくクライアント・サーバー間でコミュニケーションが取れるというメリットがありますが、複数のユーザーがサーバーにステートフルな通信を行うとサーバーの負荷が大きくなるというデメリットがあります。

ステートフルな通信プロトコルの例として、FTPSSHなどが挙げられます。

一方、ステートレスは、サーバー側がクライアント側とやり取りした内容や状態は保持せず、同じリクエストには同じレスポンスを返すという仕組みです。ステートフルと比べるとオーバーヘッドが小さいというメリットがあります。

ステートレスな通信プロトコルの例として、HTTPが挙げられます。

 

Cookieとは

上記のようにHTTPはステートレスですが、オーバーヘッドの少ないHTTPのプロトコルでも、ログイン保持やショップの購入情報の保持を行いたい場合があります。これを解決するために利用する技術がCookieです。

Cookieはステートレスな通信を行うときに、サーバーからのレスポンスとしてクライアント側にCookieを一緒に送信します。次回の同じサーバーへのリクエスト時にこのCookieをサーバーに送り返すことにより、前回のリクエスト時に使用した変数等の情報を引き続き扱うことができます。
この手法により、ステートレスなプロトコルでも情報を保持してクライアントとサーバー間でやり取りを継続できます。