Gatsby で静的サイトを作ってみた - starter-personal-blog の設定編 -

前回 は Gatsby を starter-personal-blog という starter を使ってインストールしました。
今回はその starter-personal-blog の設定についてです。どこをどう変えればいいのかっていう。

ブログ全体の設定

ブログのタイトルや説明、書いてる人の情報 (SNS アカウントなど) の設定です。
触るファイルは content/meta/config.js です。

タイトル

-  siteTitle: "PersonalBlog - a blog starter for GatsbyJS", // <title>
-  shortSiteTitle: "PersonalBlog GatsbyJS Starter", // <title> ending for posts and pages
-  siteDescription: "PersonalBlog is a GatsbyJS starter.",
+  siteTitle: "michimani.net - a simple blog", // <title>
+  shortSiteTitle: "michimani.net", // <title> ending for posts and pages
+  siteDescription: "michimani.net is a simple blog.",

siteTitle :html の title タグの値になります
shortSiteTitle : フッターなどに表示されます
siteDescription : フッターなどに表示されます

URL、言語

-  siteUrl: "https://gatsby-starter-personal-blog.greglobinski.com",
+  siteUrl: "https://michimani.net",
-  siteLanguage: "en",
+  siteLanguage: "ja",

書いてる人の情報

名前、説明、アイコン

-  infoTitle: "greg lobinski",
-  infoTitleNote: "personal blog",
+  infoTitle: "michimani",
+  infoTitleNote: "web developer, motorcycle rider, ...",

アイコンは src/images/jpg/avatar.jpg を好きな画像に変えます。サイズは正方形で用意しますが、 100px x 100px あれば十分です。

メールアドレス

後述しますが、starter-personal-blog には独自の問い合わせフォーム機能を持っています。ただしこれは netlify というホスティング(?)サービスを使用する場合です。
今回は CloudFront + S3 で運用するので、特に意味はありません。

-  contactEmail: "john@doe.com",
+  contactEmail: "05vtr250[@]gmail.com",

SNS

サイドバーのプロフィール欄に表示される情報です。
今回 Facebook は無しとするので削除してます。

-  { name: "github", url: "https://github.com/greglobinski" },
-  { name: "twitter", url: "https://twitter.com/greglobinski" },
-  { name: "facebook", url: "http://facebook.com/greglobinski" }
+  { name: "github", url: "https://github.com/michimani" },
+  { name: "twitter", url: "https://twitter.com/_michimani_" }

テンプレートファイル

続いて、各テンプレートファイルの変更です。
変更を加えるのは下記のファイルです。

  • content/parts/author.md : 記事下に表示されます
  • content/parts/footnote.md : フッターに表示されます
  • content/parts/info.md : サイドバーのプロフィールに表示されます

その他のカスタム

上で書きましたが、今回は starter-personal-blog 独自の問い合わせフォームを使いません。なので、 src/pages/contact.js を編集します。

  <Article>
    <PageHeader title="Contact" />
    <Content>
-      Feel free to contact me by email: <Obfuscate email={config.contactEmail} /> or use the
-      form below.
+      お問い合わせは、下記メールアドレス または Twitter へのリプライ/DM でお願いいたします。<br /><br />
+      mail: {config.contactEmail}  ※[a] は @ に変換してください <br />
+      twitter: @{config.authorTwitterAccount}
    </Content>
-    <Form />
  </Article>

<Form /> を削除することで、独自の問い合わせフォームを非表示にしてます。

以上でブログの設定は完了です。あとはひたすらブログを書いていくだけです。
とは言っても、公開するためには AWS の CloudFront + S3 を使います。また、ソース管理には CodeCommit、CI/CD には CodePipeline と CodeBuild を使います。
次回以降はそのあたりについて書きます。では。

comments powered by Disqus