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

ブログ

最近ブログの更新を進めたいのにもかかわらず
サイトの契約更新日が刻一刻と近づいている。

サーバーの契約更新をするか悩んでいたのだが契約更新費用は8000円。いわゆるエンタープライズプランというやつだ。学生が支払うには結構痛手な値段設定。

契約プランをライトに引き下げたいのだが、原則契約がされた時点でプラン引き下げには一切応じないロリポップサーバー。もう契約解除して、ほかのレンタルサーバーに乗り移ろうと検討していたが、ITに詳しい地元のダチからサーバー費用無料のGtiに今話題の静的サイトを組み合わせるのはどうかと意見をいただいた。

正直バイトもやめてしまって少ない時給の中で生活している私にとって渡りに船だった。

だがHugoはオール文系の私を快くは歓迎してくれなかった。そう、何度やってもエラーが出たり、サーバー上にデータをアップロードすることができないのだ。

理系の人から見ればこんな簡単なところでつまずいてるんか。ホンマアホやなって突っ込みをいれられてもおかしくないレベルだろう。だが何としてでも静的サイトでブログを構築しなければ。文系だってできるんだって見せつけてやらなきゃ。そこで、なんども失敗を繰り返さないために、静的サイト構築メモをここに書き記すことにした。

完全個人メモとなるのでご了承いただきたい。

今回の対象は
サルでもできる静的サイト

ミジンコでもできる!
静的サイト作り方

です!

(以前、超初級サイトの”サルでもできるHUGOサイト”を
参考にしてましたが、それでも筆者は理解不能レベルでした。)

 

特に今回は私のようなコマンド操作苦手の苦手、大学の授業でもCMDの使い方すら習ったことのないような立場の人に向けた記事です。かみ砕きまくった表記で執筆してますが温かい目で見守ってあげてください。

実際にどう進んでいるか画像などをふんだんに使って解説していきます。写真のようにならなかったら失敗してると思っていいです。

 

あと、作動環境はWin,Mac両方とも動くみたいですが、筆者がMac売りさばいたので手持ちにはWinしかありません。Macユーザーの人は素直にWindowsでも用意してください。(それか置き換えて読むか)

目標

目標は以下の通りだ。

  • クッソ高いレンタルサーバーを解約する
  • 無料で維持管理できるブログに移住する。
  • アフェリエイト、アドセンスでお小遣い稼ぎ
  • 新しいコーディングをしたい
  • エンジニアリングらしくGithubを使いこなしたい!
  • 就職までに自分のポートフォリオを作る。
  • 立派な企業にも胸を張って見せられるサイトデザイン
  • 大きく三つ『個人日記』、『商品レビュー』、『バーチャルブログ』の3本柱で運営する。
  • 個人ビジネスなどもここで受け付ける。

サイトの構築予想図

いまのところこんな感じだ。

主なコンテンツ

完全筆者視点の生活日記を『個人日記』にまとめる。これは極力毎日更新で努力して更新させていくつもり。

『レビューブログ』はさまざまなものをレビューしこれから購入予定の消費者などにアドバイスを提供していくコンテンツページ。レビュー対象は日用品やガジェット、食品や地域の体験施設に至るまで広く取り扱っていく。とりまレビュー記事は全部ここに収まる。

『バーチャルブログ』ここは主に人生の生き方や個人日記などで特にピックアップしたい記事などをバーチャルキャラクターにナビゲートしてもらいながら記事が進むようなコンテンツを意識している。特集記事ページと扱ってもいいだろう。

この大まかな3本柱をTopページの最上部に設置する。(視覚的にわかりやすいリンクを設置。)

その下に最新投稿順に記事を並ばせていく。WordpressなどのTopページみたいなものだ。

デザイン

一番理想なのがサルワカブログのようなスタイル。(あれをダークテーマにした感じ)が理想。

アイコンなども極力フラットなアイコンでデザインするつもりだ。

サイト構築開始 まずは手順を確認しよう

サイトを移行するのはいいけどまずは現状把握から。

  1. WordPressから静的サイトに移行する。
  2. PCに作業環境を構築する。
  3. HUGOを使って執筆する。
  4. Githubにうpする。

簡単に見れば少ない手順で済むことだが、技術系の知識の乏しい筆者は何度やっても4番目の手順で失敗を繰り返してしまう。

地元のダチはすんなりサイトを構築し、自分に稼働しているサイトを見せてくれた。(そのダチは今後もWordpressで執筆をつづけていくらしいが。)

やはり学んでいる環境からこうやって差ができてしまうのか。っていって目減でいてもだめだ。行動しなければ。あがいていれば経験不足な私でもきっとブログを完成に持っていけるはず。あきらめないことが肝心ってやつだ。

Webサイトの制作準備をしよう

静的サイトを作り上げていくには今までのWordpressのようなGUI満載でだれでもできる環境ではない。そう。コマンドのみでサイトを作っていくのだ。難しそうには見えるけど逆に慣れてコマンドを駆使してサイトを作っていると天才プログラマーのような気分で執筆をつづけられるに違いない。コマンドの扱い方も同時に習得できるし。

【まず準備するもの】
・visualstudiocodeをインスコ
・WindowsPowerShellを管理者権限で起動させておく。
visualstudiocodeはマイクロソフトが提供している無料の開発環境だ。プログラムをする人ご用達のソフトウェアってわけだ。迷わずインスコしよう。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
WindowsPowerShellはスタートボタンを右クリックし、出てくるメニューの中から[WindowsPowerShell管理者(A)]をクリックして立ち上げる。
※ここで注意しておくことがWindowsPowerShellの立ち上げ方法を管理者で立ち上げることをお忘れなく。

WindowsPowerShellを使ってHugoをインストールしよう

それでは準備も整ったので。本格的な準備を始めましょう。まずは静的サイトを編集する環境を整えるためにHUGOという静的サイト生成アプリをコマンドを打ってインストールしていきましょう。

静的サイト=90年代のWebサイトによくあったシンプルで軽いサイトのこと。今の時代は飛んだり跳ねたりフェードインしたりアニメーション満載のWebサイトが増えたおかげで毎回サイトを訪れるたびにもたもた待たされることが多いです。

でもこの静的サイト(HUGO)を使えば昔ながらの軽いサイトをポンポン出力してくれるので閲覧者側から気に入られます。「お前んとこのサイト、軽くてサクサクだなぁ!」って。

でも90年代みたいなサイトの速さと言って昔みたいな色数の少ない2カラムサイトで広告バナーがいっぱいあって…

大丈夫です。そこまでダサくはありません。なんたってテンプレートが山のように公開されていますから。試しにテンプレサイトをのぞいてみましょう。

Complete List

いかがですか。今どきのモダンデザイン、フラットデザイン。いかにも軽そうな殺風景なサイトまで山のようにテンプレートが転がっています。中にはアニメーションが出るようなサイトもありますが、もちろん静的サイトなので作動に支障が出るような重さになることはありません。

これからこういうデザインを使ってサイトを作っていきますからね。

この中で希望のデザインがなければ自分でCSSとかいじって機能のデザインにカスタマイズすることもできますよ。(筆者はそれをやるつもり)

以下のコードをPowerShellに打ち込め!(その1)

初心者向けにわかりやすい見出しにしておきました。見出しそのまま、いかに記載されているコードをそのままコピッてPowerShellに張り付けましょう。

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))
【このコード☝は何をしたの?】
・ほんとはコマンドで「Hugoをインストールしろ!」って打ちたいのですが、PowerShellにはアプリをダウンロードする機能を持っていません。
・なので、まずは「アプリをコマンドでインストールするためのアプリ」をインストールさせる必要があります。
・その名もチョコレートコマンド!超優秀なコマンドで普通にchromeとかPCのアプリはこのコマンド一つで何でも入るようになります。ぜひ入れておきましょう。

打ち込んだら迷わず「Enter」キーを押しましょう!
すると写真のようにずらずらーっといろいろ文字が出てきますね。警告:とか出ていますが問題は)ないです。

文字の出現が収まると「PS C:¥Users\a40\desktop>」と表れているでしょう。これは待ち受け状態です。(次のコード打っていいよって。)

一応チョコレートコマンドのインストールは終わったようですが、本当に終わったのか、文字だけでは判断できないですよね。確認のためにも以下のコマンドを打ってみてください。

以下のコードをPowerShellに打ち込め!(その2)

choco
【このコード☝は何をしたの?】
・Chocoコマンドを立ち上げる命令です。
・正常にお使いのPCにChocoが入っていればバージョン情報が表示されます。
このコマンドを打ってChocoのバージョンが緑色で現れればインスコに成功した証です。
こんな感じになれば成功。今のチョコレートコマンドのバージョンは0.10.15ですよーって。
ここまでついてこれてたら大丈夫。いよいよHugoのインストールを始めますよ!

以下のコードをPowerShellに打ち込め!(その3)

choco install hugo -confirm

【このコード☝は何をしたの?】
・Hugoをインストールしなさいって命令。
・これを実行すれば自動でHugoをインストールしてくれる。
インストールが終わればこんな感じになるはず。
試しに以下のように入力してみましょう。

以下のコードをPowerShellに打ち込め!(その4)

hugo

【このコード☝は何をしたの?】
・Hugoを立ち上げるコマンド。
・正常にインストールされていればファイル数などが表示されます。
ちゃんとHugoが入っていればこのようにずらずらっと英語が現れた後、ファイル数のような表が現れますね。これで完了です。
これで晴れてHUGO(静的サイト)を作ることが可能になりました!クエストクリアですよ。おめでとう。
次はブログそのもののデーターを新規作成させてみましょう。

ブログを新規作成しよう!

それではまたWindowsPowerShellに魔法を唱えてあげましょう。

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

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

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

cd users/(ユーザー名)/desktop

※(ユーザー名)のところは自分のログインしているユーザー名を英語で入力するように置き換えてください。

【このコード☝は何をしたの?】
・今現在PowerShellにいる位置情報は
Cドライブにいます。
・そこからユーザーフォルダ>○○さんフォルダー>デスクトップフォルダに移動しろと命令するコマンドです。
入力するとこのようになると思います。今の現在地はデスクトップフォルダにいるみたいですね。
ではここにさっそく静的サイト(Hugo)を新規作成してみようと思います。

静的サイト(HUGO)の新規作成をしよう!

hugo new site 新規ブログ
【このコード☝は何をしたの?】
・Hugo+新しいサイト+新規サイト(サイトの名前)…つまり新しいサイトを作りなさいと命令してますね。
正しく打ち込めていたら上記写真のようになると思います。ちゃんと成功しているか確かめてみましょう。今回は新規作成先をデスクトップに指定していましたので、Win+Dを押してデスクトップを表示させてください。
出来上がっているみたいですね。
中身はこんな感じです。

今日はここまで

もう眠くなったから今日はここまで。続きはたぶん書きます。失踪はしないので安心して次の投稿をクリックしてね。おこもちはおねむなのです。!すでのな

コメント

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