【所要時間30分】ミジンコでもできる! 静的サイトの作り方(第2話)

ブログ

こんにちは。
テスト期間に突入しても何もしてないおこもちです。
今回は前回に引き続き、Hugoの解説ブログ。題して
ミジンコでもできる!
静的サイトの作り方

の第2話をお送りしていきます。

前回のあらすじ

前回は静的サイトとはなにか?準備方法、実際に制作環境を整える、サイトの新規作成のところまでを解説してきました。
今回はその続きとして、新規作成させたサイトをオンライン上に公開するところからの解説です。

サイトをオンラインにアップロードしよう!

前回作ったサイトは一応閲覧も可能ではありますが、オフラインなので、書いてる本人のパソコンの中でしか閲覧できません。(ネットに公開されてない)

なのでまずは作ったサイトをオンラインの世界にアップロードしてあげることから始まります。

作ったデータのアップロード先は?

よくあるフリーブログのようにアップロード昨日も備えている…
Hugo(静的サイト)の場合はそうは行きません。

Hugoはブログを書き出す機能は備えていますが、アップロード先までは用意されていません。つまり自分で見つけてこなければならないのです。

アップロード先として例を上げるならレンタルサーバーなどですが、これは年額で8000円とか利用料金がかかりますよね。今回の趣旨は完全無料でブログを維持することに念頭を置いているのでレンタルサーバーはナシです。

そこで!

GitHub

を使います!

GitHub
GitHubはソフトウェア開発のプラットフォームです。GitHubには8000万件以上ものプロジェクトがホスティングされており、2700万人以上のユーザーがプロジェクトを探したり、フォークしたり、コントリビュートしたりしています。
【Githubってなにそれ?】
・ギットハブと読みます。これは腕利きのガチのプログラマーたちが集う交流SNSのようなものです。今までプログラムに触れたことのない方から見れば異世界のようなものでしょう。
・上記のリンクはクリックしてみましたか?全部英語ですよね。プログラムの世界はなんたって英語なのですから!
GitHubは交流するだけでなく、プログラマー同士が作った製作中のプログラムファイルなどを保存して置けるクラウドスペースを確保できるのです!
簡単に言えば、GitHubアカウントを作ればGoogleドライブのようなオンラインドライブをただで使えるようになります。(ただし、プログラムファイルのためのドライブなのでそれ以外の使い方はできない。)
一応、このGitHubのオンラインドライブにはネットで公開できる機能を併せ持っており、レンタルサーバーのように活用することができます。(ちゃんとHttpsのURLも与えられる)
なので、今回の静的サイト作成で一番都合がいいサービスなのでここを活用しましょう。

とにかくGitHubアカウントを作ってきて。

まずはGitHubアカウントがないと話が進まないのでアカウントを作ってきてください。

Build software better, together
GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.
【ワンポイントアドバイス】
基本Githubは英語しかありません。
スマホの「Google翻訳アプリ」などを駆使して翻訳して登録作業を進めてください。
(英語が自分で読めるなら良いけど。)

Github上にブログの投稿フォルダを作ろう!

アカウントを作り終えたらまずは…

オフラインで作った静的サイトのフォルダを打ち込むフォルダを作って上げる必要があります。
ここでごちゃごちゃしがちな専門用語の登場です。

リポジトリー

リポジトリー=作業フォルダー

ぶっちゃけデーターの保存先のフォルダーを指す専門用語です。
この先しょっちゅうリポジトリーがでてくるので覚えておきましょう。

ユーザー登録を終えると、画面左上の部分に何やら緑色でNewボタンがありますね。

ここを押すとリポジトリー(作業フォルダー)の新規作成をすることになります。

早速Newボタンをクリックしましょう。

するとこんな感じの画面に飛ばされますね。
リポジトリーの新規作成画面です。

ここで入力することは「リポジトリーの名前」を入力して上げる必要があります。
今回筆者は「Mochiburo」と名前を入れました。

※日本語で入力はできないので要注意。英語で打ちましょう。

下には公開設定でプライベートにするか公開するかのボタンがありますがそのまま無視でいいです。

チェックボックスをクリックして「Create repository」ボタンをクリックしましょう。

うまく行けば上記写真の用にリポジトリが出来上がっているはずです。
早速クリックして中を見てみましょう。

GitHubのリポジトリフォルダの使い方を覚えよう!

之がリポジトリの画面です。難しい英語がダラダラですね。

パソコン本体にGithubをインストールしよう!

リポジトリの作成ができたあなた。よくついてこれてますね。頑張ってますね。でも難しい道のりはまだまだです。めげずに頑張っていきましょう。

一応、オンラインでGitHubのアカウント登録は完了しましたが、実際はブラウザー(Chrome)とかは使わずにPowerShellを使ってブログ投稿を行うのが基本の流れになります。

そうなると、パソコン本体にもGithubをインストールしなくちゃいけませんね。早速やり方を見ていきましょう。

まずはPowerShellを立ち上げよう!

前回もおさらいしたとおり、ブラウザー立ち上げてぇ…Githubの公式サイト行って…GitHubアプリをダウンロードボタン押して…

そんなバカみたいなことしなくても便利なチョコレートコマンドがあるのですから。PowerShellのチョコレートコマンドをつかってGitHubのInstall作業を行いましょう。

まずはPowerShellを立ち上げる。スタートボタンを右クリックしてPowerShell(管理者)で立ち上げましょう。

PowerShell(管理者)を押しましょう。

以下のコードをPowerShellにコピペしろ!(その1)

 

cinst git
【このコード☝は何をしたの?】
・chocolateコマンド経由でGitをインストールさせなさいという命令。
上記のコードをコピって貼り付けてエンタを押せばずらずらぁっとプログラムが実行します。
完了したら次のコマンドを打ってみましょう。

以下のコードをPowerShellにコピペしろ!(その2)

git version
【このコード☝は何をしたの?】
・インストールしたGitのバージョンを確認しろという命令です。
正しくインストールができていたら写真のようにバージョン番号が出ると思います。
次に行きましょう。

PowerShellの現在位置をブログの制作フォルダに移動する

Gitのインスコが終わったらアップロードの準備開始です。
PowerShellはおそらくC:Windows/system32フォルダにいると思うので、これから作業する以前作った「静的サイト」のフォルダに移動してあげる必要があります。

以下のコードをPowerShellにコピペしろ!(その3)

cd ¥
【このコード☝は何をしたの?】
・今現在PowerShellにいる位置情報は
Cドライブ>Windowsフォルダ>system32フォルダにいます。
・そこからCドライブのトップフォルダ(直下)に移動しろと命令するコマンドです。
コピペしたらこんな感じになったかと思います。
ん?何か変わった?ただCドライブのトップフォルダーに移動しただけです。
さ、次に進みましょう。

以下のコードをPowerShellにコピペしろ!(その4)

cd users/(ユーザー名)/desktop/(新規作成したブログのフォルダー名)
※ピンク文字のところはリスナーの環境に合わせて書き換えてね。
【このコード☝は何をしたの?】
・今現在PowerShellにいる位置情報は
Cドライブにいます。
・そこからユーザーフォルダ>○○さんフォルダー>デスクトップフォルダ>新規作成したブログフォルダに移動しろと命令するコマンドです。

移動が完了して、lsコマンドを打ったらフォルダーの中はこんな感じになってますね。ブログの記事データとかデザインデータ、設定ファイルなどが収まってます。

ちなみにエクスプローラーで除くとこんなかんじ。写ってるものは一緒です。

・エクスプローラー=視覚的に見やすい
・PowerShell=文字だけで表示する。

こんな感じです。次に行きましょう。

Gitのアップロードの際に認識させるファイルをブログフォルダにぶち込め!

一応、ブログのフォルダもできたし、PowerShellで認識もさせたし…次はなにやるの?

次は、GitHubにこのブログフォルダを「アップロードの対象に含めるよ。このブログフォルダのアップロードも忘れずにね」というアップロードの認定書類のようなファイルを入れてあげなければなりません。

その認定書類は以下のコマンドで発行します。

以下のコードをPowerShellにコピペしろ!(その5)

git init

【このコード☝は何をしたの?】
・前回作ったブログデータの収まったフォルダ。これもちゃんとGithubにアップロードしてくださいねーと言わんばかりの認識ファイルだ。
・これがないとGitにはアップロードができないぞ。
打ち込むとこんな感じに帰ってくるはずだ。
一応発行しておきましたよー。って。
エクスプローラーで確認してみよう。
先程まではなかったはずの「.git」フォルダが出現したぞ!これがアップロードの際に必要となるファイルだ。
※隠しフォルダの表示設定をOnにしておきましょう。

コメント

タイトルとURLをコピーしました