Hugo+Firebase+GitHub+CircleCIでブログ作る-1_0

1章で得られること、Hugoのインストール

おはようございます!Naccoです(`・ω・´)

このブログを構築するまでの流れを記事にすることにしました!

0章では、システム構成について見ていきました。この章からは実際の手順について書いていきますよー!



1章 Hugoで生成した静的サイトをローカル環境でプレビュー

1章で得られること

  • Hugoのセットアップ手順
  • Hugoのローカル環境でのサーバ起動&表示確認手順

さっそくHugoのインストールからやっていきますよ!

Hugoのセットアップ

Hugoのインストール

作業環境


Hugoのインストール

Hugoの公式ドキュメントで2つの方法が紹介されていました。

  1. Hugoのバイナリを設置する
  2. パッケージマネージャでインストールする

Hugo本体はたった1つのバイナリ(hugo.exe)なので、それを任意のフォルダに設置するだけで、インストール完了です。

ただ、動作環境に合ったものを探しに行ったりするのが面倒だし、せっかくなので2.のパッケージマネージャを使っていこうと思います!

パッケージマネージャChocolateyを使用します。

Chocolatey

Chocolateyのインストール

PowerShellを管理者権限で起動します。

管理者として実行

PowerShellの下記コマンド※1でChocolateyインストールのシェルスクリプトを実行します。

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

※1 インターネット上のシェルスクリプトを実行するために、一時的に実行ポリシーを変更しています。「Bypass」はインターネットからダウンロードされた署名されていないスクリプトなども何もブロックされず、警告もメッセージも表示しないポリシー「-Scope Process」でプロセスにのみ適用「-Force」で警告を含む全てのプロンプト表示を抑制

インストール確認

chocoコマンドでバージョンが表示されていたらインストールできています。

PS C:\WINDOWS\system32> choco
Chocolatey v0.10.11
Please run 'choco -?' or 'choco <command> -?' for help menu.
Hugoのインストール(choco install)

choco installコマンドでHugoをインストールします。

choco install hugo --confirm

※2–confirm」オプションは「-y」と書き換えてもOKです。全ての確認に「はい」と応答するオプションです。

こんな感じで進んでいきます。

Chocolatey v0.10.11
Installing the following packages:
hugo
By installing you accept licenses for the packages.
Progress: Downloading hugo 0.47.1... 100%

hugo v0.47.1 [Approved]
hugo package files install completed. Performing other installation steps.
The package hugo wants to run 'chocolateyInstall.ps1'.
Note: If you don't run this script, the installation will fail.
Note: To confirm automatically next time, use '-y' or consider:
choco feature enable -n allowGlobalConfirmation
Do you want to run the script?([Y]es/[N]o/[P]rint):Y

Hugoの 最新版※2のダウンロードとインストールがはじまります。

※3 あとで実行ツール(CircleCI)のコンテナ上でHugoをインストールして使う時はHugoのバージョンを固定するようなDockerfileを使いたいと思います。

Downloading hugo 64 bit
  from 'https://github.com/spf13/hugo/releases/download/v0.47.1/hugo_0.47.1_Windows-64bit.zip'
Progress: 100% - Completed download of C:\WINDOWS\system32\onfig\hugo\0.47.1\hugo_0.47.1_Windows-64bit.zip (17.96 MB).
Download of hugo_0.47.1_Windows-64bit.zip (17.96 MB) completed.
Hashes match.
Extracting C:\WINDOWS\system32\onfig\hugo\0.47.1\hugo_0.47.1_Windows-64bit.zip to C:\ProgramData\chocolatey\lib\hugo\tools...
C:\ProgramData\chocolatey\lib\hugo\tools
 The install of hugo was successful.
  Software installed to 'C:\ProgramData\chocolatey\lib\hugo\tools'

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

Software installed to 'C:\ProgramData\chocolatey\lib\hugo\tools'

と、Hugoがインストールされた場所が表示されます。クリップボードなどに控えてください。

Hugoのpathを通します。

Hugoのpathを通して、どこからでもhugoコマンドを実行できるようにします。

環境変数を編集
[コントロールパネル]→[システムとセキュリティ]→[システム]→[システムの詳細設定]→ [環境変数

「ユーザ環境変数」の 「Path」 をダブルクリック

新規作成で

C:\ProgramData\chocolatey\lib\hugo\toolsを登録してOKボタンをクリック

環境変数の追加が終わったら、念のためPowerShellを再起動します。

Hugoのpathが通ったことの確認

PS C:\Users\nacco> hugo version
Hugo Static Site Generator v0.47.1 windows/amd64 BuildDate: 2018-08-20T08:17:26Z

Hugoのインストールが完了です!

それでは、Hugoのプロジェクトを作っていきます。Gitでのバージョン管理にも少し触れます。

次回:Hugoプロジェクトの作成、初期化≫

もし記事の内容でわからないところがあったら、★質問箱★に質問をください!Twitterで回答できるかはわかりませんが、このブログの記事か発表の糧にさせていただきます。