/ #hugo 

Hugoでブログをローカルに用意する

もくじ

今回作るもの

はい👻

Hugoを使ってゼロからブログ公開用のpublicディレクトリを作る。です。

前提

PCにHugoが導入されていること。

導入さていない場合は……今後でナニカシラ記事書きます。

またこの記事は元記事がやたら長くなったので、短くする目的で切り分けまして、 Hugoの初回作成処理にそこまで深くふれません。

なぜなら公式のクイックスタートがよくできているからです!

では 作っていきましょう👻

この記事自体は本家のクイックスタートから使うコードを抜粋します。

記事のステップの数は本家のステップの数とリンクしています。

ステップ1

Hugoが導入してある前提なので何もしません👻
※ Macユーザーで Hugo 導入前なら下記で導入できます。

$ brew install hugo

また、Homebrewが導入前なら下記で導入できます。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

ステップ2

新しいサイトを作る

ターミナルを開いてカレントディレクトリをブログを作る予定のディレクトリへ動かしてから、新規サイト作成コマンドを叩く。

$ cd AAAAAA/BBBBBBB/CCCCC/目的のディレクトリ
$ hugo new site 自分のわかりやすいサイト名

ステップ3

テーマを追加する
※ここではテーマ「ananke」を使っています

$ cd 自分のわかりやすいサイト名
$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

ですが、これ(↑)をやるとレイアウトの調整ができなくなるので、
後々のこと考えると下記のがいいと個人的には思います。

$ cd 自分のわかりやすいサイト名
$ git init
$ cd themes
$ git clone https://github.com/budparr/gohugo-theme-ananke.git ananke 
$ rm -rf ananke/.git
$ cd ../

設定ファイルにconfig.tomlを書き込みます

$ echo 'theme = "ananke"' >> config.toml

ステップ4

テストの記事追加

$ hugo new posts/XXXXXXXXXX.md

確認

$ cat content/posts/posts/XXXXXXXXXX.md

// 生成されたファイルの中身が表示される

ステップ5

サーバーを起動させて、ローカルから動作を確認する。

$ hugo server -D

ブラウザでhttp://localhost:1313/にアクセス!!

ブログが表示される。

サーバーを閉じる場合は、ターミナルにフォーカスを戻して
キーボードのControl+cを押します。

ステップ6

設定ファイルを更新する。

config.tomlをテキストエディタで開く。

baseURL = "❗利用する予定のURL❗※今はまだ持ってないので、適当な文字列"
languageCode = "ja-jp"
title = "❗おすきなタイトル名❗"
theme = "ananke"

※ここでは設定例を書いてます👻
後で変更できるので、今はとりあえず適当です。

ステップ7

publicディレクトリを作成

hugo -D

確認

$ ls
// ディレクトリ一覧が表示される。そのなかに public という名前のディレクトリがある。

publicディレクトリが作成されたと思うので、これでとりあえずの作業完了です。

ブログを作成する次の作業としては下記な感じですね。

  1. テーマを色々みて決める
  2. レイアウトを調整したり
  3. 設定ファイルにもっと情報を書き込んだり
  4. デプロイ先のサーバーを用意する

この中のデプロイ先サーバーをAWSで用意する全体の記事はこちらです

Author

Sisii

インフラが好きなエンジニアぶってるなにか