2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Windows で 10 分でブログ作成 Hugo x Netlify 前編

Posted at

ひとさじ

初投稿です🍀
Hugo を用いてこんなブログが作れます.色々カスタムしながら記事を書き溜めています✨
GitLab Pages? GitHub Pages? Netlify? どれでホスティングするかの方法を含めて情報提供します.
環境は Windows 11 Home で,以下の手順に従い 10 分で PaperMod テーマのブログが持てます.

前提

GitLab Pages を愛用しており,以前は GitBook を使った静的サイトを作っていた.ガジェット友達の元同僚に勧めたところ気に入ってサイト作成をその方法に乗り換えてくれたのだが,その後,さらに Hugo に乗り換えたという知らせを受けた.

自分でも技術ブログ的なものを書いてみたくなり,GitBook はページ数が決まっているサイトには適しているけれど,ブログのようなサイトには適さないと思い至った.そこで Hugo を使いたくなり一日調べ上げてブログを公開した.

調査

GitLab などのテンプレートを使えばある程度簡単にクラウドだけでも公開できるけど,多少のカスタムをしたければ,ローカル環境で開発するよ!

ホスティング先は Netlify がお勧めされている.もちろん,GitLab Pages や GitHub Pages でも良いのだけれど,
https://[好きなアドレス].netlify.app
というさらに短縮された URL で公開できるのは魅力的に思った.

Netlify は CodeSandBox か何かで間接的に用いただけでアカウントを持っていなかったので,GitLab アカウントでログインしたが,あまり使い方がわからない.GitLab では Hugo テンプレートが最初から選択できて,すぐに Hugo サイトを GitLab Pages で公開できる.そのため,GitLab の Hugo テンプレートを選択してリポジトリを作成し,そのリポジトリを Netlify の from exsisting repositry から選んでみた.よし,これで簡単と思ったが,Netlify では自動で URL を付けてくれたが,Page Not Found となった.

Hugo の日本語情報がそもそも多くはなく,Netlify と組合わせて公開する例はさらに減る.減るがないわけではないし,それなりのギークな人が公開しているので役立つページは多い.

諦めて GitLab Pages で公開しようかなと思ったが,そもそもテーマテンプレートをうまく設定できない.テンプレートを設定するには複数の方法があるようだが,これがページによって説明がまるで違って非常にわかりにくい.
たった数行のコマンドで良いはずなのだが...
結局,git サブモジュールとしてテンプレートを設定する方法が推奨されているので,hugo コマンドを打つ必要があり,ローカルで諸々設定する必要性を感じ,大人しく従うことにした.

Hugo に好きなテンプレートを適用する

PaperMod テンプレートは css のパラメタが変数化して分けられており制約が強めですが,元々が綺麗で,中身を読んでいけばちゃんとカスタムできます.

私は PaperMod を使ってみることにした.
テンプレート設定の正しい情報が載っているサイトが少なく,結構たくさんのページを調べたが,結論から言うと,
PaperMod 公式の以下のインストール手順と,

英語サイトの以下を参考にするだけで良かった.

0. Git をインストールする

正直,Git とかコマンドラインの経験がない人には Hugo でのブログ公開は諦めて欲しい.

1. パッケージマネージャーをインストールする

Hugo 公式 GitHub から Git Clone で良かったかもしれないのだが,Windows のパッケージマネージャーとして Chocolately を入れた.
管理者権限 PowerShell を開き以下を入力してインストーラーをダウンロード,インストール.

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

インストールが完了したらコマンドラインで,以下を実行.

choco -v

バージョン情報が表示されたら Chocolatery のインストールは完了.

2. Hugo のインストール

コマンドラインから以下を実行.

choco install hugo-extended

3. Hugo サイト作成

hugo new site [サイト名] --format "yaml"

PaperMod では設定ファイルを yaml にする必要がある.

cd [サイト名]
git init

Git リポジトリじゃないのでこれからの管理を考えてリポジトリ化しよう.

4. 好きなテーマを git サブモジュールとして適用する

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo "theme: PaperMod" >> hugo.yaml

テンプレートファイルの公開 URL を指定してサブモジュール化し,
設定ファイルに echo でテーマ名を書き込み.ここでは,PaperMod.

5. Hugo ローカルサーバを立上げ表示確認

hugo server

表示されたローカルアドレスにアクセス.

6. 初記事を書く

hugo new posts/hoge.md

contents/posts配下に新規ページ hoge.md が作れます.

ひとこと

個人ブログで記事を先に公開してから,この Qiita のフォーマットに合うように整えました.
これから少しずつ投稿していきますのでどうぞよろしくお願い致します😄

参考にさせていただいたサイト

Netlify をホスティング先にすることについて.

Chocolatery のインストール方法について

記事を作成するコマンドについて.

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?