Hugoはオープンソースの静的サイトジェネレーターです。とても速く柔軟性があることから人気です。 今回はHugoの導入から使い方、Netlifyでリリースするまでの方法を紹介します。 Hugoのインストール 公式サイトのQuick Startそのままですが、 brew を使ってインストールします。 $ brew install hugo インストールされたかを確認するには、 $ brew version 新しくサイトを作る $ hugo new site website このコマンドを実行すると、 website というディレクトリができます。 テーマを選びます Hugo Themesにたくさんのテーマがあります。どれがいいか迷ってしまいますよね。 今回は blog のタグが付いてるなかから、このブログに使ってるTranquilpeak というテーマを使ってみます。 $ cd website $ git init $ cd themes/ $ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git 他のテーマも導入する方法は一緒なので、他のテーマを使う場合はgithubのURLを変更してください。 themes ディレクトリの中に、 hugo-tranquilpeak-theme というフォルダができてると思います。 公式ドキュメントでは、themes/ananke とコマンドの最後にしてフォルダ名を指定する方法をとってます。 $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke ルートディレクトリに config.toml というファイルがあると思います。 これが設定ファイルで色々設定していくんですが、submoduleで持ってきたテーマの中にテーマにそった config.toml があると思います。 hugo-tranquilpeak-theme の場合は、 exampleSite の中にあります。

続きを読む

プロフィール画像

こたぽん

JavaScript, React, NextJS, VueJS, NuxtJS, AWS, Firebase, Git, ビールと生ハムが好き

Rakuten, Inc. CyberAgent, Inc.