Hugo+Firebase+GitHub+CircleCIでブログ作る-1_0
1章で得られること、Hugoのインストール
おはようございます!Naccoです(`・ω・´)
このブログを構築するまでの流れを記事にすることにしました!
0章では、システム構成について見ていきました。この章からは実際の手順について書いていきますよー!
- 0章 ブログのシステム構成について
- 1章 Hugoで生成した静的サイトをローカル環境でプレビュー
- 1章で得られること、Hugoのインストール
- Hugoプロジェクトの作成、初期化、テーマの設定
- コンテンツの作成、ローカルでプレビュー、1章まとめ
- 2章 Hugoで生成した静的サイトをFirebase Hostingに手動デプロイ
- 3章 Hugoで生成した静的サイトをGitHubとCircleCIを使ってFirebase Hostingに自動デプロイ
- 4章 テーマ選び、記事テンプレ作り
1章 Hugoで生成した静的サイトをローカル環境でプレビュー
1章で得られること
- Hugoのセットアップ手順
- Hugoのローカル環境でのサーバ起動&表示確認手順
さっそくHugoのインストールからやっていきますよ!
Hugoのセットアップ
作業環境
- Windows10 マシン
- Git for Windows 2.18.0
Hugoのインストール
Hugoの公式ドキュメントで2つの方法が紹介されていました。
Hugo本体はたった1つのバイナリ(hugo.exe)なので、それを任意のフォルダに設置するだけで、インストール完了です。
ただ、動作環境に合ったものを探しに行ったりするのが面倒だし、せっかくなので2.のパッケージマネージャを使っていこうと思います!
パッケージマネージャ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でのバージョン管理にも少し触れます。
もし記事の内容でわからないところがあったら、★質問箱★に質問をください!Twitterで回答できるかはわかりませんが、このブログの記事か発表の糧にさせていただきます。