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 の中にあります。

続きを読む

WordPressからHugoに乗り換えました 2009年からWordPressではじめた当ブログですが、Hugoで作り直し、 サブドメインも creator.cotapon.org から blog.cotapon.org に変更しました。 Hugoにした理由 静的ページなので表示がめちゃ速い ホスティングサーバーをNetlifyの 無料 枠で使用 Markdownで投稿できる。Markdown好き！ 管理画面なしで git push で投稿完了 テーマがそこそこある 前のWordPressでのブログは、なんしか表示が遅かった・・・。それだけでもSEO的には不利。 Hugoにして表示速度は圧倒的に速くなりました。 ただ、Hugoは静的ページなので、 ブログ検索（全文検索） と コメント 機能はありません。 全文検索 は Algolia や Bonsai + Elasticsearchを使うことで代用でき、 コメント 機能は、Disqusなどのウェブサービスを使うことで導入することができます。 テーマによっては、これらのウェブサービスのアカウントIDやAPI KEYを設定ファイルに書くだけでよいものもあります。 ブログの引越でやったこと サブドメインとはいえドメインを変えたのと、日本語URLにしている記事があったので書き換えました。 2009年から書いてるブログですが、130ぐらいしか記事がないので、1つ1つ中身を見てURLを変えて、 はてぶされてるページは301リダイレクトの設定をしていきました。 そこそこ大変でしたが、1日10個ずつ地道にやっていきましたｗ NetlifyでDNSの設定をして、blog.cotapon.org が見れるようにするのと同時に、ルートドメインの cotapon.org にリダイレクト設定だけをデプロイしました。 Amazon Route 53なんかを使うと、もっとスマートにできそうですね。勉強せな。 Adsense, Search Console, Analyticsの設定を諸々やってようやく完成。 ブログが速くなったのと、git push でデプロイでき、Markdownでちゃちゃっと書けるだけでもブログを書くモチベーションが上がってきましたｗ 記事を書くペースあげていきたいと思いますので、今後ともよろしくお願いいたします！

続きを読む