Gutenberg Freaks

開発日誌01: WebFontを追加

こんにちは、みみです。

ようやく gutenbergfreaks.jp を触り始めたので、開発日誌を書いていこうと思います。

Netlifyで環境変数を設定

とろゆにさんがデプロイ部分をアップデートしてくれたので、Netlify上で環境変数を設定しました。

Setting > Build & Deploy > Environment で、以下の3つの変数を追加します。

  1. SHIFTER_USER: Account Mail
  2. SHIFTER_PASS: Password
  3. SHIFTER_SITE_ID: Site ID to launch WordPress

これは Shifterが出しているGithub Action のこの部分だけ使っています。

https://github.com/getshifter/actions/blob/master/base/src/run.py

とろゆに先生曰く

github-actions 上で動かしてから netlify だと、netlify のwebhook で何かしたときに、github-actions が走らない

そうで、Netlify上で完結する形になっているということらしいです。

WebFontを追加してみた

というわけで手始めに、WebFontを追加してみました。

gridsomeで、WebFontを追加するには、src/main.js

export default function (Vue, { head }) {
  head.link.push({
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css?family=Roboto'
  })
}

を追記します。

参照: https://gridsome.org/docs/assets-fonts/

あと、みんなのサイトでオレオレコーディングするわけにはいかないので、CSSの命名規則どうしよ?とかって悩んでいたのですが、せっかくVueなんだから、取り敢えずそのまま書いたらええやんって話になったので、そうしてみてます。

Shifter上(WordPress上)での見た目の違いをあわせるのは後からになるかなあ。

一緒に遊びたいという奇特な人がもしいたら、githubへどうぞ。

Posted in