Gatsby で静的サイトを作ってみた - starter-personal-blog の設定編 -
2018-10-18
前回
は Gatsby を
<strong>starter-personal-blog</strong>
という 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: "michimani210[@]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