ブログページを作る

2020/08/01

Photo of ブログページを作る

技術科部のサイトはHugoというサイトジェネレータで作られています。

Hugoで使用しているテーマはHugo Serifというものです。

このテーマ、本来だったらブログのページはないのですが、どうしても欲しかったので強引に付けました。

なおこの記事はHTML/CSSがわからないとちょっとわかりづらいかも。

解説

まずはテーマフォルダのレイアウト内teamフォルダをblogに改名。

その後list.htmlとsummary.htmlを見た目を確認しつつ変更してきます。 このテーマはBootstrapの一部のクラスが使えるようになっているので、それらを使いつつ大きさを調整していい感じにしました。
Descriptionは面倒だったのでmarkdown側に入れました。

もちろんHTMLだけを反映させるだけでは特になんともならないので、次にCSSをいじります。
テーマフォルダのasssets/scss/pages/の中のteamフォルダをblogに改名します。
中身の_team-summary.scssを_blog-summary.scssに改名するのを忘れずに。

あとは適当にいじくっていきます。
single側を変える必要がほぼないので、listを変更するようのCSSを書いていきます。
実際のCSSはここにあるので、よかったら参考にしてみてください。

OGP

せっかくブログがあるのだから、OGPを設定しよう。
ということで、OGPとTwitterカードを設定します。

https://amezou.com/posts/2020/03/10/twitter-card/

コードは上のサイトのを借りました。 本当だったら新しくpartialsにhtmlファイルを作り、そこからインポートした方が早かったのですが、そこまで考えてませんでした。

最後に

このサイトは元のテーマから大分変更したので、どこが違うかを探してみてください。

元のテーマのデモサイト: https://themes.gohugo.io/theme/hugo-serif-theme/