基本 Linux コマンドの確認

さっそく HEXO をインストールしていきましょう、、、と言いたいところですが、まずは GAE 環境が問題なく作成できているかを確認していきましょう。

最初に大事な Linux のコマンドを一つ学習します。 pwd コマンドです。

ikari

いきなり出たけろ。CLI コマンド。

大丈夫!! 難しくありません。一つづつ理解していきましょう。

"pwd コマンド実行例"
1
2
$ pwd
/home/okina_freelife

pwd コマンドは “Print Working Directory” の略と覚えれば覚えやすいですかね。(Present Working Directory の説も)つまり今自分がどこにいるのかを確認するコマンドです。

今回の例だと /home/okina_freelife というディレクトリにいるということになります。

  
ワンポイント!

"okina_freelife" の部分は GCP プロジェクト名になっています。
(プロジェクト名で使われている "-" が "_" になっていることに注意して下さい。 )
ここから先も自分の GCP プロジェクト名に変えて読み進めていって下さい。

Windows などであればグラフィカルに今どのフォルダを開いているかが分かりますが、CLI の場合、自分がどこにいるのかをコマンドで把握する必要があります。

ちなみに、この /home/okina_freelife という directory を ホームディレクトリ と呼びます。 Clould Shell(CLI) を起動した時にはこのホームディレクトリから始まるので覚えておきましょう。

Windows を起動したら最初にデスクトップにいますよね? Clould Shell(CLI) も一緒です。起動したら最初にデスクトップではなくて ホームディレクトリ にいるんです。

ついでに後2つ Linux コマンドを覚えておきましょう。

namida

。。。

大丈夫大丈夫!!

今どこにいるのかを把握するのが pwd コマンドでしたが、今いるディレクトリにどんなファイルやディレクトリがあるのかをリスト(確認)するのが ls (List) 、今いるディレクトリに存在するディレクトリに移動するためのコマンドが cd(change directory) というコマンドです。

ls 使用例

"ls コマンド実行例"
1
2
$ ls
TargetDir test.txt

cd 使用例

"cd コマンド実行例"
1
2
3
$ cd TargetDir
$ pwd
/home/okina_freelife/TargetDir

ちなみに、今ご紹介した pwd ls cd コマンドは単純に表示をしたり移動したりするだけのコマンドなので、どんどん実行しちゃって大丈夫です。 (cd コマンドも、移動するディレクトリがなければ移動できないだけです。)

これらのコマンドは Linux の基本コマンドなので使い方は覚えちゃいましょう。

pwd で今どこのディレクトリにいるのかを確認したら、ls でどんなファイルやディレクトリがあるかを確認。目的のファイルがある場所まで cd を使って移動。

移動したら ls を使って移動したディレクトリにどんなファイルやディレクトリがあるか確認。これの繰り返しです。

ちなみに cd コマンドだけを実行 (移動対象となるディレクトリを指定しないで実行)した場合、ホームディレクトリに戻ります。
また、cd ../ とすると一つ上のディレクトリに戻ります。移動したけど目的のファイルがない、一つ上のディレクトリにある別のディレクトリに移動しなければ、、、という時に使って下さい。

  
ワンポイント!!

"pwd" で現在の位置を確認
"ls" で現在のディレクトリにどんなファイルやディレクトリがあるかを確認
"cd" でディレクトリを移動 (移動対象なしで実行するとホームディレクトリに戻る)
"cd ../ " で一つ前のディレクトリに戻る



GAE 環境の確認

それでは GAE に HEXO がインストールできる環境が作られているかを確認してしていきましょう。

また CLI を叩いていきますが、最初しか使わないのでひとまず何も考えずに実行して下さい。

まずは Node.js が入っているかを確認します。

1
2
$ node -v
v10.14.2

このように v10.14.2 のような version が出力されれば問題なく HEXO をインストールできる環境ができています。

version は、Google Application Engine(以下 GAE) を構築した時期によって違う version かもしれませんが、version が出ていれば問題ありません。

1
2
$ npm -v
6.4.1

ここも version が確認できていれば問題ありません。

npm というコマンドは Node.js で使用する package をダウンロードしたりインストールしたりするコマンドです。 HEXO 自体もこの npm コマンドを使って install していきます。

  
ワンポイント!!

v10.14.2 や 6.4.1 などの version が出てこない場合は Google Application Engine(以下 GAE)のインストール時に言語のところで "Node.js" を選んでいない可能性があります。そのような場合は、新しく Google Cloud Platform(以下 GCP) のプロジェクト作成のところからやり直しましょう。 (新しくプロジェクトを作ってしまって下さい。)

HEXO でブログ環境の構築

まずは以下を実行してホームディレクトリに移動して下さい。

1
2
3
$ cd
$ pwd
/home/okina_freelife/

HEXO のインストール

以下のコマンドで HEXO をダウンロードします。

"/home/okina_freelife で実行 (自分の home ディレクトリに読み換え)"
1
2
3
4
$ npm install -g hexo

<省略>
INFO Start blogging with Hexo!

何個か warning が出ますが “INFO Start blogging with Hexo” と出ていればインストール完了です。簡単ですね!

HEXO 実行ディレクトリの作成

自分のブログを構築していくディレクトリを作成しましょう。HEXO で構築していくのでわかりやすく hexo というディレクトリを作ります。

もちろん、hexo というディレクトリじゃなくても、分かりやすいディレクトリ名であればなんでもいいです。自分のホームディレクトリが GCP プロジェクトのため、プロジェクト名とすると同じディレクトリ名が2階層続いてしまうので、今回は “hexo” にしました。

1
2
3
$ pwd
/home/okina_freelife
mkdir hexo

“hexo” ディレクトリを作成し、さらに “hexo” ディレクトリへ移動しています。

ikari

おい! しれっと知らない Linux のコマンドが出てきたけろ! mkdir ってなにけ?

よく気がつきましたね! mkdir は “make directory” の 略で新しいディレクトリを作るという Linux コマンドです。

picture1

上記のようにコードエディタから新しいディレクトリを作成することが可能です。 ホームディレクトリ(“OKINA_FREELIFE”)を右クリックして “New Folder” で作成することができます。
新しいディレクトリ(folder) は mkdir を使ってもコードエディタを使っても OK です!

HEXO の実行

先ほど作った “hexo” ディレクトリへ移動及び確認。

1
2
3
$ cd hexo
$ pwd
/home/okina_freelife/hexo

HEXO 実行環境の作成

"/home/okina_freelife/hexo で実行。(自分のホームディレクトリに読み換え)"
1
$ hexo init

この hexo init を実行したディレクトリを HEXO ホームディレクトリ と呼ぶことにします。

"ここが HEXO ホームディレクトリ"
1
2
$ pwd
/home/okina_freelife/hexo

ここが HEXO ホームディレクトリです。これから先、HEXO ホームディレクトリ で実行しなければいけないコマンドも出てくるのでこの呼び方と、どこのことをいっているのかは覚えておいて下さい。

normal

覚えたけろ。 /home/okina_freelife/hexo/ が HEXO ホームディレクトリ!!
"okina_freelife" の部分は自分の環境に置き換えるけろ

ちょっとここでお願いしたい作業があります。何も言わずに以下の Linux コマンドを全部実施して下さい。(右のほうまで画面が動くので注意して下さい。)

"/home/okina_freelife/ で実行。 (自分のホームディレクトリに読み換え)"
1
2
3
$ cd
$ echo "export PATH=$PATH:/home/okina_freelife/hexo/node_modules/hexo/node_modules/hexo-cli/bin" >> .bash_profile
$ echo "export PS1='\u \w \$ '" >> .bash_profile

コピペで実施して欲しいんですが、2行目の /home/okina_freelife/hexo/….” は自分の GCP プロジェクト名に 必ず変更して 下さい。

normal

コピペするときは先頭の "$" の部分はいらないけろ。注意するけろ

いい指摘! ありがとう!!!

HEXO をインストールした時に hexo コマンドというものをインストールしているのですが、この hexo コマンドをどこのディレクトリにいても見つけられるように Clould Shell(CLI)に教えてあげているんですね。
(実際には bash というシェルに教えてあげているので、”.bash_profile” というものに書き込んでます。)

HEXO インストール完了後は上記を実行しなくても、HEXO ホームディレクトリ以下のディレクトリで hexo xxx (xxx には色々なオプションが入る) という hexo コマンドが使えるようになっています。

しかしながら、一度 Cloud Shell をログアウトしてしまうと、Clould Shell (bash というシェル) が、 hexo コマンドがどこあるのかを忘れてしまうため、ログアウト後も Clould Shell が覚えていられるように設定しています。

この辺りは Linux 関連の知識が必要になってきてしまいますので、今回理解できなかった方はそんなもんなんだなぁと思って実行だけして頂ければと思います。

くどいようですが、コピペして設定する時には okina_freelie の部分はご自身の GCP プロジェクト名に置き換えて実行して下さい。

HEXO のテスト

この時点ですでにブログを始める準備は一応完了しているので確認していきましょう。

HEXO ホームディレクトリに移動して hexo server と実施してみましょう。

"/home/okina_freelife/hexo で実行 (自分のホームディレクトリに読み換え)"
1
2
3
4
$ hexo server
INFO Start processing
INFO Hexo is running at http://l0calhost:4000 .
Press Ctrl+C to stop.

これ何をしているかというと、GAE 上に作成したブログ記事を公開する前に、ユーザがみたらどのように見えるかをシミュレートしてくれる仮想的な Webサーバを立ち上げてくれているんです。
(実際には作成したマークダウン形式の記事ファイルから、HEXO が作成する HTML/CSS を一時的に作成して表示してくれてます。)

この機能を使って、確認しながら記事を書いていくことができるんです。便利な機能ですね。

自分の PC などで HEXO を実行している場合は http://l0calhost:4000 とブラウザに打ち込めば HEXO を install 時に作成されている記事を確認することができます。
しかしながら、今回の環境では Web Browser がないのでそのままでは確認することができません。

ikari

便利な機能っていってたけろ! この環境だけで全部できるんじゃないのけ? やってくれたけろな!

安心して下さい。もちろんちゃんと確認できます!

picture2

Cloud Shell/コードエディタのページ右上にあるここをクリックして下さい。

“プレビューのポート: 8080” のというのとそのすぐ下に”ポートの変更” というのがあると思います。

そう、このポートを 4000 番に変えればいいんです。
2020年5月現在、CloudShell がβ版から正規版になっていてこのあたりの仕様が変わってしまったようです。これまで好きな port 番号に変更出来て 4000 も選択することができていました。
しかしながら、今は CloudShell で用意してある port 番号しか選べなくなっています。そのため一工夫して、hexo を立ち上げる port を CloudShell が用意してくれている port に変更して立ち上げて下さい。

hexo serve を実行するときに -p 5000 をつけて port 4000 の代わりに port 5000 を使うようにします。(970 とか 3000 も CloudShell 側で選択できるのですが、GAE 側ですでに使用している port だったりで使えないので 5000 を使用しました)

"/home/okina_freelife/hexo で実行 (自分のホームディレクトリに読み換え)"
1
2
3
4
$ hexo server -p 5000
INFO Start processing
INFO Hexo is running at http://l0calhost:5000 .
Press Ctrl+C to stop.

“ポートの変更”をクリックしてから”変更してプレビュー”をクリックすることでプリインストールされている “Hello World” のページを参照することが可能です。

picture3

私はすで少し変更してしまっているので、タイトルとか色々違うと思いますが、同じような見た目のページが確認できましたよね?

デフォルトでも結構かっこいいブログになっていることが確認できたと思います。リンク等も動くので色々中身をみてみて下さい。

確認し終わったら Clould Shell(CLI) にて “Ctrl+c” (Ctrl キーと”c” を同時押し)で、hexo の試験モードを終了することができます。

まとめ (オンライン講座の勧め)

どうでしたでしょうか。

kanashimi

Linux コマンドとか Git とか出てきて不安になったけろ。。。

そうですね。今回のセッションは HEXO というより、一般的に Linux とかにアプリを install する流れの説明でした。

HEXO は Node.js で作られているため npm という Node.js のパッケージ管理ソフト(インストールしたり削除したり、version up したり)を使ってインストールを行いました。

Linux の通常のアプリケーション、例えば telnet とか ssh とかは、通常 yum とか apt-get とか使って必要なアプリケーションをインストールしてきます。

PHP で作られている WordPress や Node.js で作られている HEXO など、こういった tool を使いこなそうと思えば Linux 関連のコマンドにはある程度精通しておく必要はどうしても出てきます。

Linux でも Redhat/CentOS と Ubuntu ではちょっとコマンドの癖が違っていたり、また Redhat/CentOS でも version6 と 7 の間でまたいろいろ大きく変わったり。。。

私は、ブログ運営の周りの技術はほとんど 0 から始めましたが、 Network については仕事で使っているので知っていましたし、Linux 周りの知識もある程度は持っていました。

特に Linux 関連では Redhat 社の RHCE という資格を持っています。これのお陰で Linux コマンドだったり、Web Server を始めとする Linxu に関する知識(設定からトラブルシューティングまで)は持っている状態でした。

短期間である程度デザインをいじれるようになったのはやはりこの辺りの知識の有無は大きいと思います。

今回のシリーズの記事でも書きましたが、何か技術を学ぼうと思った時、それを実際に使い続ける環境があるというはモチベーション維持の為にも技術向上の為にも非常に有用です。
ブログ運営を支える技術は Network, Linux server, プログラムと下のレイヤから順番に上のレイヤまで満遍なく学べる良い事例だと思います。

さらには、その上でブログを続けていく事でライティング技術ですとか、マネタイズに必要なマーケティングの技術、もし売り上げをのばしたいと思えばプレゼン力/営業力まで身に付けられちゃいます。
どれも社会人にとって必須な能力ばかりですね!

これを機にいろいろやってみたいなと思ったかたはこれを機に何か初めてみては如何でしょうか?

私のお勧めは Udemy というオンラインで学べる講座です。何がいいって、安くて質が高い。コスパ高いと思います。

自分でインターネット上から情報を集めて勉強していくのも可能です。しかしこの方法だとどうしても時間が掛かりますし、知識が偏ってしまう可能性があります。

今はオンライン上に非常に良いオンラインコースがあるので本当にいい時代ですよね。昔はこうはいかなかったと思います。どうしても物理的に人を集める必要があったので、場所代もあるし人数に制限が出る。
そうすると、利益を得るためには一人の単価を高くせざるを得ないので結局受講料に跳ね返ってきます。

トレーニングで 100 万円稼ごうと思えば、例えば 10,000 円のコースを 100 人に受講してもらいますが、ネットでは 1,000 円のコースを 1,000 人に受講してもらえばいいんです。
どっちの方が集客が楽そうですかね?

そして次のコースを受講してもらうには、たくさんの人に新しいものを知ってもらう必要がありますが、その場合は前のコースをなるべく多くの人に受講してもらってた方がもちろんいいですよね?

もちろん 多くの人にそのコースが有用だと思ってもらわなければならないので、コースの質も良いものにしなければなりません。

これが、オンラインコースのコスパが良い理由であり、私がオンラインコースでの受講をお勧めする理由になります。オンラインコースでももちろん質問等に答えてくれますし。

昔は英語のコンテンツが多かった気がしますが、今は日本語のコンテンツも充実してますので、是非 Udemy 使ってみて下さい!!

私は昔 Python を学ぼうと思い Udemy を使用したことがあります。その時は仕事で業務効率を上げるための tool を作ろうと思い受講したんですが、やはり目的があると効率よく学習できると思います。

あと、お勧めはやっぱり書籍ですね。
ちょっと前だと、仕事で IoT 関連のキャッチアップをしなくてはならずどのように始めようか考えていました。その時見つけたのは以下の本。

単元、単元だけ見ると真新しいことをいっているわけではなく、また難しいことをいっているわけではありません。ただ、秀逸なのは、体系的にまとめてあり、どんな観点で学習すれば良いのかというのが分かることでした。
まずは体系的に学んで、そこから興味がある部分などを深くしていけばいいんです。

こんな感じで Udemy のようなオンラインコースと、書籍を組み合わせて効率よく学習していきましょう!

normal

日々勉強けろ!!

話がそれましたが、もちろんとりあえず今はブログを書きたいんだという方、ご安心ください!

ブログを更新していく上で必要なカスタマイズは記事を読んでいけばできるようにまとめていきますね!

以上です。次は HEXO の Theme を変更していきましょう! お疲れ様でした。

シリーズ記事まとめ

“第 1 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.1 - Introduction 編”
“第 2 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.2 - account 作成編”
“第 3 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.3 - GAE 環境構築編”
“第 4 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.4 - HEXO インストール編”
“第 5 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.5 - Theme カスタマイズ編”
“第 6 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.6 - 最小限カスタマイズ編”
“第 7 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.7 - 記事作成編”
“第 8 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.8 - インターネット公開編”