Blogをちょこちょこ手入れしている
７月頃、エイヤではてなBlogからGitlab Pages + GastbyJSに移行しました。 普段はRuby, Railsばかりでjsはめったに触らないのでjs力向上のために始めたGatsbyにも少し慣れてきました。 ここまでに実施したことを備忘録として記載しておきます
記事一覧ページの作成
topは最新記事４件のみ表示しているので、記事一覧ページを作りました src/pagesに entry.jsというファイルを作ってindexよりたくさん表示できるようにしただけです。 ただ、なぜか最新記事４件しか記事の要約が表示できず。。。どこかでlimitがかかってるようなのですがまだ修正中です。
記事カセットをコンポーネント化
topと記事一覧の記事カセットをバラバラに編集するのはダルいので 作成時に選んだthemeでは、記事ごとのカセットがindexにベタ書きだったので、これをcomponentsに切り出しました。
タグをコンポーネント化
はてなblog時代のタグを、frontmatterのdescriptionにコンマ区切りで放り込んであったので、これをタグとして機能させるために、tag、tagsというcomponentsにしました。 最終的にはタグごとの記事一覧を生成してそこにリンクするcomponentとするつもりです。
サムネイルをつけた
frontmatterにサムネイル用の項目を追加し、これが記載されているときはその画像を、ないときはデフォルトの画像がサムネイルになるようなサムネイル用componentを作成しました。
はてなblog側のcanonicalをこちらに向けた
はてなblogの設定でheaderにjsを埋め込めるので、jsでcanonicalを書き換えてこちらに向けてみました。 昔はメタタグはサーバーサイドで生成するのがよい、とされていたような気がしますが、最近はjsで生成してもOKみたいですね うまくGoogleに伝わっていることを願います。
見た目を調整
普段cssはほぼ書かないので、要素をきれいに並べるのも一苦労。 div横並びにするならfloatだっけ、という時代のcss知識だったので、いろいろググってやっています。 flexbox便利ですね。
まだぶっ壊れてる機能もありますし、amp化もやっていきたいし、しばらくは遊べそうです。