このエントリーをはてなブックマークに追加
Pocket

こんにちは！今回はhugoで静的サイトを作成するために、やったことをメモっておこうと思います。

個人サイト作り直そうかなというツイートしたところ、友達のいけてるデザイナーから以下のようなリプライをもらいました。

で、いろいろ調べてみたらHugoよさそうだったので、Hugoをどのようにキャッチアップして、個人サイトの作り直しをしたかの備忘録をメモっておこうと思いました。

作り直したいサイト

個人的なプロフィールサイトを結構昔から運用しているのですが、HTMLやCSS全部ゼロから入力で作成&FTP通信経由でファイルを更新という20年前のインターネットをずっとやってました。

今見たらCopyrightが2015年になってますね。古い！

Hugoのキャッチアップ

ひとまずHugoのページいって、About読んだり、Quick Start読んだりして、とりあえず動かして、Hello World的なサイトは作れました。が、そこであんまりよくわからんなという感じになってしまいました。

というのも、そもそもここ最近はずっとバックエンドよりの開発しかしてこなかったので、静的サイトジェネレーター（Static Site Generator）などのアイディア自体あんまり親しくなかったからです。ということで、そのあたりから解説してくれる本とか記事ないかなということで探して、以下の書籍を見つけたので一通り読んでみることにしました。

meganii (著) 『Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト 』

この本の1、2、3章を読んで、ここ最近の静的サイトジェネレイターのパラダイムがざっくり理解できたような気がしました。

4章以降を読むと、色々なデザインのテーマを利用して使って簡単なサイトを構築できるようになりました。

詳細は上記の本を読んでいただけると良いかと思いますが、ブログ投稿などで有用な機能が多数提供されているように感じました。
時間あったら、このブログもHugoにお引越ししても良いかもしれません。

作り直し

方針

作業メモ

リポジトリ

静的サイト作成の初心者なのでとりあえず、Githubに「frsw.net-source-hugo」的なリポジトリを作成して、Hugoのプロジェクトのリポジトリとして利用することにしました。

デザイン

Hugo Themesでよさそうなデザインを探しました。その中で、Hugo Eurekaというデザインがよさそうだったので、利用させていただくことに。

すでに必要なHugoなどのインストールは終わっているので、まずは以下のコマンドでサイトを作成します。

サイト作成

# サイト作成
hugo new site . --force

# テーマ適用
hugo mod init github.com/wangchucheng/hugo-eureka.git

# 用意してくれたサンプルサイトの設定をコピー
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/config.yaml > config.yaml
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/languages.yaml > languages.yaml
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/menus.yaml > menus.yaml
curl https://raw.githubusercontent.com/wangchucheng/hugo-eureka/main/exampleSite/config/_default/params.yaml > params.yaml

# オリジナルのconfigファイルを削除
rm config.toml

あとは、サンプルサイトのテンプレートを見ながら、よしなにcontentフォルダ以下にページを追加していけばOKです。

今回は特にグローバルメニューとか作らなくても良いかもとなったので、contentフォルダは以下にhomepageフォルダを追加して、その中にいくつかのページを追加することで完成です。

完成

以下のようなページになりました。現代風でいいですね。

 

今回Hugoに変えたことで、今後ブログのポストのようなものもここに簡単に追加できるようになりました。

今後

ひとまず、このサイトを現在ホストしているところにポンと置くようにしました。

今後はGithubアクションと連携して、Pushしたら自動でサイトに反映されるところまで作りたいと思います。

 

 

 

このエントリーをはてなブックマークに追加
Pocket