hugoブログの作り方

· ☕ 3
🏷️
  • #hugo
  • とてもありがたいことに、最近、このブログの真似をして、hugoブログを作っているって方が出てきて下さったので、作り方や、カスタマイズの方法をまとめたいと思います。

    hugoブログとは?

    DBがいらない。アプリケーションサーバーがいらない静的なブログです。

    静的サイトジェネレーターと呼ばれる、静的サイトを作るスクリプトで作ります。

    (go言語で書かれたスクリプトです。)

    静的サイト

    このような仕組みで動いています。

    私は、このような構成で作っています。

    静的サイト

    静的?サーバー?って方は↓の記事を読んでいただければと思います//

    hugoブログのサーバーの仕組み なぜ60円でブログが作れるのか?

    ビルド

    ↑の記事でも触れましたが、hugoブログは出来上がったページをファイルサーバーに置いておき、それをそのまま表示します。

    WordpressやECサイトなどでは、アプリケーションサーバーと呼ばれるサーバーがhtmlを生成し、それを表示するのですが、hugoはそれを事前に「ビルド」して、作成しておきます。

    ビルドのイメージ

    こんな感じ。

    各記事はmd(マークダウン)という形式で書きます。

    ビルドをかけると、↑のように、各記事のmdとベースのhtmlから、記事のhtmlが作成されます。

    で、このベースhtml、ベースcssと言っているものがテーマと呼ばれるもので、いろんなデザインの物が公開されており、好きなものを選ぶことができます。

    hugo公式サイトのデザイン集

    もちろん、自分で作ることもできます//

    hugoブログの始め方

    私がこのブログを立ち上げたときの記事がこちらです。

    インストールで困ったときは公式のクイックスタートをご覧いただくのがいいと思います。

    hugoの設定やトラブルシューティング記事まとめ

    設定関連

    hugo初期設定と戦ってみる

    • 記事出てこない問題
    • cssとか反映されない問題
    • タイトルを変える

    hugo/zzoのカスタムヘッダーを設定

    hugo/zzoのタイトルとプロフィールを変更

    hugo/zzoに独自のfaviconを設定

    hugoのテーマをzzoに変えてみる

    adsense関連

    adsenseがヘッダーに表示されないバグ修正

    pc版ブログにadsense広告を追加する!

    hugo/zzoブログでadsense審査通ったw

    その他

    スライドシェアをブログに埋め込む

    amazonアソシエイトの広告を埋め込む

    twitterカード画像自動生成機能

    hugo関連記事の前一覧

    hugo関連記事の一覧はこちら

    このブログはまだコメント機能がないので、何かご不明点とうありましたら、ぜひこちら質問箱からご質問頂ければ、ブログで回答いたします_(._.)_

    コメント機能も作らないとな…


    るな
    るな
    エンジニア