GitHub Pagesを公開する方法
このページでは、Webサイトを公開する方法を説明します。自分で作成したWebサイトを公開する方法はいくつかありますが、ここではGitHub Pagesを使ってみましょう。GitHub Pagesを使う場合、追加で用意するものは無料のGitHubアカウントのみですから、初心者がWebサイトを公開する一番気軽な方法だと言えるでしょう。
※ GitHubのアカウントを持っていない方は、こちらからGitHubに登録することができます。
1. 新規リポジトリの作成
GitHub上に新規リポジトリを作成し、公開設定をPublicにします。
2. ファイルのアップロード
1.で作成したリポジトリに移動し webサイト用のファイルをupしたら、Settingsに進みます。
※ ここでは無料のbootstrapテンプレート (Resume–Start Bootstrap) を使用しています。
3. レポジトリの設定
Settings > Pages > Build and development の設定をします。
- Source: Deploy from a branch
- Branch: main / (root) *
を選択して保存。* ファイルを置いたディレクトリの場所(ここではresumeディレクトリの場所)を指定しています。
4. Webサイトの公開を確認
https://GitHubのアカウント名.github.io/リポジトリ名にアクセスして、Webサイトが公開できたことを確認しましょう。
注意
GitHub Pagesには使用規約があり、たとえば商用サイトを公開することは禁止されています。個人的な使用であれば規約の範囲内ですが、気になる人はこちらから確認してみてください。
参考
GitHub Pages について－GitHub Doc
自分で作ったWebページをインターネット上に公開しよう！－Progate
Linuxの基本操作
代表的なディレクトリへのショートカット
| コマンド | ディレクトリ |
|---|---|
| . | カレントディレクトリ |
| .. | 親ディレクトリ |
| ~ | ホームディレクトリ（デフォルト） |
| / | ルートディレクトリ |
cd (change directory)
ディレクトリの移動
cd [opt]
例: ルートディレクトリに移動
cd /
pwd (print name of working directory)
カレントディレクトリの表示
pwd
ls (list)
カレントディレクトリの子の階層のファイルやディレクトリの一覧を表示
ls [opt]
例1. 拡張子がhtmlのファイルを表示する
ls *.html
例2. binディレクトリの中にある、zからはじまる4文字のファイルを表示する
ls /bin/z???
例3. ファイルの詳細情報も併せて表示
ls -l
例4. 隠しファイルも含めた全てのファイルを表示
ls -a
例5. ファイル種別も表示
ls -F
mkdir (make directory)
ディレクトリの作成
mkdir [opt] <ディレクトリ名>
例: test/2023/09/のディレクトリを作成する（-pをつけると深いディレクトリを一度に作成できる。）
mkdir -p test/2023/09
rmdir (remove directory)
rmdir <ディレクトリ名>
例:
rmdir test/2023/09
cat (concatenate)
ファイルの中身を表示する
cat [opt] <ファイル名>
例: -nで行番号を表示してetc/hostsの中を表示
cat -n etc/hosts
less (opposite of more)
ファイルの中身をスクロール表示する（長いファイルの中身を見るときにつかう）
less <ファイル名>
スクロール画面でのショートカット
| コマンド | 内容 |
|---|---|
| スペース or f | 1画面下にスクロール |
| b | 1画面上にスクロール |
| j | 1行下にスクロール |
| k | 1行上にスクロール |
| q | lessコマンドを終了 |
| /文字列 | 下に向かって検索 |
| ? | 上に向かって検索 |
| n | 次の検索結果に移動 |
| N | 前の検索結果に移動 |
tail
ファイルの末尾から指定された行数、バイト数などを表示する
tail [opt] <ファイル名>
例: -n出力する行数を指定して表示する
tail -n 2 file
例: -c 出力する文字数を指定して表示
tail -c 10 file
touch
空のファイルを作成する。同じ名前のファイル名があっても上書きしないところが、touchコマンドのいいところ。
touch <新規ファイル1> <新規ファイル名2>
touch README.md
rm (remove)
ファイルを削除する。ディレクトリを削除する場合中のファイルも削除してしまいたいことが多いが、そういう場合はrmコマンドを実行する。空のディレクトリしか削除したくない場合は、rmdirを使う。
rmを実行すると、ゴミ箱に入るのではなく本当に削除されるので、よく確認してから削除する。
rm [opt] <ファイル名>
例1.
rm README.md
例2: -rディレクトリの中のファイルやディレクトリもまとめて削除する場合。recursionのr。
rm -r dir
例3: 警告文を表示せずにファイルを削除する場合。ちょっと危険。警告文が多い場合に使う。
rm -f file
例4: ファイルの削除前に確認が入る
rm -i file
mv (move)
mv [opt] <移動元><移動先>
ファイル名を変更する場合
mv file file 1
ファイルを移動する場合
mv file1 dir/
上書きする前に確認したい場合 -iオプション。
mv -i file file1
cp (copy)
cp [opt] <コピー元><コピー先>
ファイルをコピー （コピー先がすでに存在していると上書きされてしまう）
cp file new file
ディレクトリをコピーする時は-r(-rがないとエラーになる)
cp -r file dir/
ln (link)
- リンクとは: ファイルに別名をつけることをLinuxでは「リンクを貼る」という。Windowsでいうショートカットのようなもの。リンクには2種類ある
- 長いパス名を省略したい時
- 複数のバージョンを共存させて最新を区別したい時 file1にfile2というハードリンクを貼る。
ln file1 file2
file1にfile3というシンボリックリンクを作成する。
ln -s file1 file3
find
find <検索開始ディレクトリ><検索条件><アクション>
カレントディレクトリ以下の README.meというファイルを見つけて、パス名を表示する場合
find . -name README.md -print
ワイルドカードを使ってhtmlファイルを検索
find . -name '*.html' -print
大文字小文字を問わずに検索。
find . -iname readme.md
検索条件色々
- -type f 通常ファイルを検索
- -type lシンボリックリンクを検索
- -type dディレクトリを検索
- -a&検索
chmod(change moder)
所有者、グループ、その他のユーザーの権限を変更する
chmod [ugoa] [+-=] [rwx] <ファイル名>
| 記号 | 内容 |
|---|---|
| u | 所有者権限 |
| g | グループの権限 |
| o | その他のユーザーの権限 |
| a | 全ユーザーの権限 |
| + | 権限を追加 |
| - | 権限を削除 |
| = | 記述した権限にする |
| 記号 | 意味 | 数値 |
|---|---|---|
| r | read読み取り | 4 |
| w | write書き込み | 2 |
| x | execute実行 | 1 |
chmod rw-r--r-- /Users/suzuki/work/readme.md
chmod u+r file
| オーナー | グループ | その他 |
|---|---|---|
| rwx | r-x | r-x |
| 421 | 41 | 41 |
| 7 | 5 | 5 |
8進数の数値で指定する場合次のようになる。通常指定は相対指定、数値指定は絶対指定。
chmod 755 file
chown (change owner)
rootユーザーとしてファイルやディレクトリの所有権を変更するコマンド
chown [opt] <ユーザー名orグループ名> <ファイルorディレクトリ>
ls -l user # ファイルの所有者と所用グループを表示 su # rootユーザーへ移行してパスワードを入力 # ↓ chown hoge user # hoge(ユーザー)を所有者に変更
ps (process status)
実行中のプロセスを表示するコマンド
$ps [opt]
↓結果
PID TTY TIME CMD 59511 ttys007 0:00.07 /bin/zsh -il
例: 詳細情報を表示 (optだけど -をつけない)
$ps aux
たくさんのプロセスが同時に大量に実行されていることがわかる。
kill
プロセスとジョブを終了する。
kill [opt] %<ジョブID> kill [opt] <プロセスID>
例:
kill %1 kill 4965
ctrl + c と killの違い - ctrl + c : foregroundで実行中のジョブを終了する - kill: 停止中 or backgroundのジョブを終了する
正確に言えばkillはシグナルを送信するコマンド。
kill -<シグナル名> <プロセスID>
デフォルトでは「TERM」という終了を指示するシグナルを送信している。以下の2つは同じ動作を意味している
kill 4965 kill -TERM 4965
たまに -SIGKILL（強制終了）のシグナルを使う。以下の2つは同じ動作を意味している。（最終手段であることに注意。）
kill -SIGKILL 4965 kill -9 4965
Vimの基本操作
はじめに
Vimに初めて触ってから3日、隙間時間にVimtutorとVim Adventureで練習を続けています。膨大な数のコマンドがあり、操作に慣れるまでにまだまだ時間がかかりそうです。
ここでは実際にVimを使ってMarkdownの記事を書きながら、Vimについて学んだことやその感想をまとめてみます。
Vimとは
Linuxのテキストエディタ。Vimを使うと、マウスを使わずにターミナル上でファイルの操作やコードの編集をすることができます。
通常の開発ではVS Codeをはじめとする高性能テキストエディタを使用すればOK。一方、Vimの操作が必須になるケース（サーバの構築など）があるため、操作に慣れておく必要があります。
Vimの導入
今回はVS CodeにVimのプラグインをインストールしました。インストール後、ターミナルからvimと打つと起動します。
「vim、なんもわからん」という私のような初学者の方はここでvimtutorと打って、vimの基本操作を一通りさらうのがおすすめです。vimtutorについてはこちらのブログが参考になります。→【vim入門】vimtutorはいいぞ - Qiita
4つのモードと起動方法
| モード | 機能 | 起動方法 |
|---|---|---|
| Command Mode | 変更の保存・Vimの終了・他コマンド入力 | : |
| Normal Mode | カーソルの移動、他のモードへの移行、テキストのコピーカットペースト | Esc (ctrl+c) |
| Insert Mode | テキストの編集・入力 | i/a/I/A... |
| Visual Mode | テキストの選択 | v/V... |
代表的なコマンド
Command Mode
保存・終了
| コマンド | 動作 | 意味 |
|---|---|---|
| :sav filepass | 新規保存 | save |
| :w | 上書き保存 | written |
| :q | Vimを終了 | quit |
| :q! | 強制終了 | quit! |
| :wq | 上書き保存してVimを終了 | written & quit |
検索
| コマンド | 動作 | 意味 |
|---|---|---|
| /word | /の後の文字列を検索 | |
| n | /で検索した文字列の次の候補に飛ぶ | next |
| N | /で検索した文字列の前の候補に飛ぶ | next |
Normal Mode
カーソル移動
| コマンド | 動作 | 意味 | 移動距離 |
|---|---|---|---|
| h | ← | ちまちま | |
| l | → | 〃 | |
| j | ↓ | 〃 | |
| k | ↑ | 〃 | |
| w | 単語移動→（次の単語の頭まで） | word | 単語 |
| e | 単語移動→（末尾まで） | end | 〃 |
| b | 単語移動←（前の単語の頭まで） | back | 〃 |
| 0 | 行頭へ移動 | 行 | |
| $ | 行末へ移動 | 〃 | |
| ctrl + y | カーソルを固定して上スクロール | 〃 | |
| ctrl + e | カーソルを固定して下スクロール | 〃 | |
| ctrl + d | 下に画面半分移動 | down | 長距離 |
| ctrl + u | 上に画面半分移動 | up | 〃 |
| ctrl + f | 画面1つ分進む | front | 〃 |
| ctrl + b | 画面1つ分戻る | back | 〃 |
| H | 画面の一番上 | high | 〃 |
| M | 画面の中央 | middle | 〃 |
| L | 画面の一番下 | low | 〃 |
| gg | ファイル始端へ移動 | go go | ファイル |
| G | ファイル末尾へ移動 | Go | 〃 |
テキストの編集
| コマンド | 動作 | 意味 |
|---|---|---|
| u | 元に戻る | undo |
| ctrl + r | やり直し | redo |
| y | コピー | yank |
| yy | 行コピー | yank |
| p | 後プット | put |
| P | 前プット | put |
| x | 1文字削除 | x |
| dd | 行削除 | delete |
| D | 右全削除 | delete |
| . | 直前やったことの繰り返し |
Insert Mode
| コマンド | 動作 | 意味 |
|---|---|---|
| i | カーソル位置の1文字後ろからInsertModeに入る | insert |
| a | カーソル位置からInsert Modeに入る | append |
| I | カーソルのある行の最初にInsert Modeで飛ぶ | insert |
| A | カーソルのある行の最後にInsert Modeで飛ぶ | append |
| c | 削除してInsert Modeに入る | change? |
| C | 右削除してInsert Modeに入る | change? |
| s | カーソル位置の文字削除してInsert Modeに入る | |
| S | 行削除してInsert Modeに入る |
Visual Mode
| コマンド | 動作 | 意味 |
|---|---|---|
| v | Visual Modeに入って文字単位で選択 | visual |
| V | Visual Modeに入って行単位で選択 | visual |
| y | 選択範囲をヤンク | yank |
| d | 選択範囲を削除 | delete |
| c | 選択範囲を削除してInsertModeに入る | change? |
| = | 選択範囲を整形 | |
| > | 選択範囲を1タブ右に移動 | |
| < | 選択範囲を1タブ左に移動 |
感想
- 頻繁に打つEscが遠くていちいちつっかかってましたが、Esc =
Ctrl + [orctrl + cと知って、途端に操作が楽になりました。 - Insert Modeでテキストをタイプする時、Macのカーソル移動ショートカット ctrl + A E F B P N等々が使えないことにちょっと難儀しました。カーソル移動が必要な場合、Vimでは「EscでNormal Modeに入り移動と修正、またInsert Modeに戻ってテキストを編集する」のですね。慣れればいけるか……。
参考URL
「プロになるためのWeb技術入門」で学ぶ、Web技術の基本用語まとめ
リクエストとレスポンス
クライアントからサーバへの要求を リクエスト Request といい、サーバからクライアントへの応答をレスポンス Responseという。
プロトコル
複数の主体が情報をやりとりするために必要とされる取り決めのこと。主として「情報の伝達方法」と「情報の意味づけ」を規定する。
例えば、原始的な通信手段である狼煙の場合、敵襲に備えて 1. 「狼煙を使って合図を伝えること」 2. 「煙は敵の襲来を示す」 3. 「狼煙の煙を見たら、自分たちも狼煙をあげてさらに周囲に伝達すること」 といったプロトコルを設定することができる。これらの手続きが正しく共有され、各人がこの取り決めに従って行動することで初めて、意味のあるものとして情報をやりとりすることができる。
インターネットにおいても同様で、接続された膨大な数のコンピューターが、どのように情報をやりとりするか、相互にルールを共有しておく必要がある。このルールを通信プロトコル、または単にプロトコルと呼ぶ。
URL
Uniform Resource Locator 統一資源位置子 の略称。スキーム + ホスト名 + パス名を組み合わせたもの。
- 例: http://www.littleforest.jp/webtext/index.html
- スキーム http
- ホスト名 www.littleforest.jp
- www ローカル名
- littleforest 親ドメイン名
- パス名 /webtext/index.html
IPアドレス
インターネットに接続されたコンピューターに割り当てられる、個体識別のためのアドレス。0以上255以下の4つの文字の組み合わせで構成される。
DNSサーバ
DNS サーバ Domain Name System Serverは、ドメインとIPアドレスの対応表を持つコンピューターのこと。URLのドメインから対応するIPアドレスを教えてくれる。クライアントがURLにアクセスすると、DNSサーバがドメインをIPアドレスを変換して渡す。クライアントは得られたIPアドレスを使ってwebサーバへHTTPリクエストメッセージを送り、WebサイトのHTMLを渡すように命令する。
TCP/IP
TCP: Transmission Control Protocol と IP: Internet Protocol という2つのプロトコルからなる通信プロトコル。IPアドレスにより宛先のホストを特定し、任意の情報を届けるもの。住所と宛名がIPアドレスだとすると、郵便配達がTCP/IP。情報はパケットと呼ばれる単位に分割されて、TCP/IPの責任により送受信される。
ポート
TCP/IPによって送信された情報を受け取る場所。ポートの意味は「港」。情報を受け取るための桟橋がポートである。0-65535の65536個のポートがあり、それぞれのポートでアプリケーションが情報を待っている。
http://www.littleforest.jp:80
と記述される。代表的なプロトコルで使用されるポート番号をウェル・ノウン・ポートWell known port という。例えばHTTPのポート番号は80、FTPは20、21。HTTPSは443。DNSは53。
ステートフルとステートレス
前回のリクエストをサーバが保持し、それをふまえてリクエストを実行するプロトコルをステートフル・プロトコル Stateful Protocolという。これに対し「リクエストを受けたらレスポンスを返す」だけのシンプルなやり取りを繰り返し、サーバが状態を保持しないプロトコルをステートレス・プロトコル Stateless Protocolという。FTPはステートフル性、HTTPはステートレス性をもったプロトコルである。
ステートレス・プロトコルには「サーバが情報を保持しないため、通信の結果が毎回リセットされてしまう」という特徴がある。例えば、ブラウザからIDとパスワードを入力してログインをリクエストしたとする。入力された値が正しければ、サーバから「ログインできました！」とレスポンスが来る。一見ログインが成功したかのように見えるが、次の通信でログイン済ユーザー限定のページを表示するようにリクエストすると「そのページは見せられません」とレスポンスを返されてしまう。（サーバは「このユーザーはログインしている」という情報を保持しないので、未ログインユーザーとして扱ってしまう。）
ステートレス・プロトコルの抱える問題を解消する手法として、クッキーやセッションがある。
クッキー Cookie
クッキー Cookie は、Webサーバがクライアントのコンピューター内に作成する小さなファイルのこと。同一のクライアントとサーバの間で通信が発生するごとに、ブラウザは前回の通信でサーバが作成したCookieをサーバに送信しクライアントの情報（例えばユーザー情報や、カートに入っている商品、クレジットカードの番号など）を渡す。これによりクライアントの状態を保持することができる。
クッキーは、HTTPのリクエスト・ヘッダやレスポンス・ヘッダを利用して運用される。またPC上にテキストファイルとして保存される。こういった仕様のため、少し知識があると個人情報を簡単にのぞけてしまう、というセキュリティ上の問題がある。
セッション Session
より安全に多くの情報を保持するための方法として考案されたのがセッション Sessionとよばれる情報の管理方法である。これは、CookieにセッションIDと呼ばれる受付番号を格納する方法で、サーバはCookieからセッションIDを取り出して、メモリの中に残されたユーザーの情報を参照する。セッションIDはただの数字や文字列で意味を持たないので、セキュリティ上安全性が強い技術であるといえる。
参考文献
小森祐介. 『プロになるためのWeb技術入門』――なぜ，あなたはWebシステムを開発できないのか . 技術評論社. 2010.
