Hugo

これまでこのブログはTwitterなどにリンクを貼った際にサムネイル画像を表示できていなかったので、Twitterカードで画像を表示できるようにしました。また、Twitterだけではなく、Slack（コミュニケーションツール）などでも画像が表示できるにしています。 Twitterカードとは サルワカくんの記事が分かりやすかったので、詳しく知りたい人は以下記事を読んでみてください。 【2020年版】Twitterカードとは？使い方と設定方法まとめ 簡単に説明すると、Twitterでよく見かけるURLを貼ったときに表示されるやつです。 Twitterカード表示対応 僕が現在使っているHugoのテンプレートはBeautiful Hugoなので、このテンプレートでの対応方法を書きます。 今回重要なファイルは2つです。 themes/beautifulhugo/layouts/partials/seo/twitter.html themes/beautifulhugo/layouts/partials/seo/opengraph.html ファイルの中身を以下に書きます。 // themes/beautifulhugo/layouts/partials/seo/twitter.html {{- with .Title | default .Site.Title }} <meta name="twitter:title" content="{{ . | truncate 70 }}" /> {{- end }} {{- with .Description | default .Params.subtitle | default .Summary }} <meta name="twitter:description" content="{{ . | truncate 200 }}"> {{- end }} {{- with .Params.share_img | default .Params.image | default .Site.Params.logo }} <meta name="twitter:image" content="{{ . | absURL }}" /> {{- end }} <meta name="twitter:card" content="summary" /> {{- with ....

今回、Hugo + Netlify で本ブログを作成しましたが、最初サイトの見栄えがよくなかったので、各種設定をしました。 Hugoはconfig.tomlを修正すれば、簡単にサイトの表示を変えることができます。 今回は僕が行った修正を記載します。 config.toml設定 現在の本ブログのconfig.tomlはこんな感じになっています。 baseURL = "https://yuyagishita.com/" languageCode = "en-us" title = "YAGI BLOG" theme = "beautifulhugo" summarylength = 100 HasCJKLanguage = true [Params] readingTime = true wordCount = true socialShare = true [Author] github = "yuyagishita" twitter = "yuyagishita" [taxonomies] category = "categories" tag = "tags" [[menu.main]] name = "Home" url = "/" weight = 1 [[menu.main]] name = "Tags" url = "tags" weight = 2 [[menu....