kuro

1 minute read

Hugoを使ってブログを構築する

Hugoを使ってブログを作る。

まず以下を参考にしてHugoをインストールする。
https://gohugo.io/getting-started/installing/

今回はscoopを使ってHugoをインストールする。
まず、scoopをインストールする。
https://scoop.sh/
の Installs in seconds を参考にしてインストールする。

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

# or shorter
iwr -useb get.scoop.sh | iex

もしポリシーに関するエラーが出たら、以下を実行してリモートの場合は署名済みを許可するように変更する。

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

現在の実行ポリシーを知りたいときは

Get-ExecutionPolicy

を実行するとわかる。

以降は下記のクイックスタートに従って進めていく。
https://gohugo.io/getting-started/quick-start/

scoopがインストール出来たら、Hugoをインストールする。

scoop install hugo

インストールが完了したら実際に動作するか確認してみる。

hugo help

Hugoのインストールが確認出来たら、Hugoサイトを作っていく。 以下の場合サイトの名前は「yournewsitename」となる。

hugo new site yournewsitename

サイトが作成出来たら、ブログの外観を選ぶ。
https://themes.gohugo.io/
上記のサイトから好きなテーマをクリックして、Downloadのボタンを押すとGitHubのページに遷移する。
遷移したら、緑色のClone or DownloadボタンをクリックしてHTTPSのURLをコピーしておく。
下記のGitBashを開き、先ほど作成したサイトのディレクトリへ移動してgitで初期化し、submoduleとしてテーマを追加する。

cd yournewsitename
git init
git submodule add https://github.com/budparr/gohugo-theme-yourselectedtheme.git themes/yourselectedtheme

thnmesにテーマをダウンロード出来たら、config.tomlファイルに設定を追加する。
現在のディレクトリがyournewsitenameなら以下のようにすれば設定が書き込まれる。

echo 'theme = "yourselectedtheme"' >> config.toml

以下のコマンドで新しい記事を作成する。

hugo new posts/my-first-post.md

作成された記事を見るとデフォルトで以下のようなファイルが作られている。

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

これでサイトの記事まで作成できるようになった。
これらをローカル環境で確認するには以下のコマンドでwebサーバーを立ち上げる。

hugo server -D

ブラウザで
localhost:1313/
にアクセスするとこれまで設定したテーマやブログの内容が見れるようになる。

これからはローカル環境でサイトの出来栄えを確認しながら、ブログのレイアウトや記事の初期設定などを作りこんでいく。
ここは自分好みのサイトとなるように調べながら進めていくのが良いだろう。
ここで詳細を書くことは省略する。

一通りの設定が完了したら、gitlabにpushして、そこからnetlifyにデプロイして実際にこのブログサイトを運用する。

gitlab.comの準備をする。

GitlabはGitHubと違いソースコードを公開されることがない。なので今回はこちらを使用していく。

まずGitlabで新しいプロジェクトを作成する。
このプロジェクトへ今回作成したサイトをgitを使ってpushアップロードする。

プロジェクトが作成出来たら、hugo new site yournewsiteで作成したフォルダを開く。
git bashでそのフォルダを開き、git initでまず初期化する。

フォルダ内にPublicフォルダがあるが、この中には公開用のファイルが生成されている。
このhugo -Dのコマンドを実行したりすると生成されるが、ホスティングサイトで勝手に生成されるようにするので、gitignore隠しファイルに設定を記述して無視するか、そのままpublicフォルダの中を空にする。


次の手順の詳細はこれから。

gitlabとのSSH通信を確立する。

gitlabにPushする。

netlifyを準備する。

gitlabとnetlifyを連携してデプロイする。