この記事では、このブログのテーマである A W E S O M E . の初期設定について解説します。

初期設定については、A W E S O M E . の README にも書かれていますが、必要だと感じた部分を補足して解説します。README は下記のリンクです。

blog.config.ts を自分向けにカスタマイズする

ブログの設定は、ルートディレクトリにある blog.config.ts で行います。

サイトロゴ

このブログで言うと、以下の部分です。

blog.config.jsでは以下の部分で設定します。

siteLogo: {
    url: "/images/logo.svg",
    width: "201",
    height: "39",
},

デフォルトの設定では、サイトロゴ画像は public\images\logo.svg にあります。

自分の場合、もともと用意されていた logo.svg の AWESOME. という部分を AWETION. に変更しました。

ご自身で画像を用意して入れ替えることももちろん可能です。

siteName / title / description

自身のサイトのタイトル、簡単な紹介内容を記載してください。

siteUrl

blog.config.jsでは以下のように設定されています。

siteUrl: process.env.NEXT_PUBLIC_SITE_URL,

設定自体は、ルートディレクトリにある.envファイルにNEXT_PUBLIC_SITE_URL=という記載があるので、自分のサイトのURLを入力します。

自分の場合は以下のように設定しています。

NEXT_PUBLIC_SITE_URL=https://awetion.vercel.app/

ヒーロー

このブログで言うと、以下の部分です。

タイトルや背景画像を設定します。

背景画像はサイトロゴと同じように、public\images\ に格納してパスを指定します。

トップページに表示する記事数

トップページに表示する記事数を以下の articlesPerPage で設定できます。デフォルトでは 6記事になっています。

また、defaultThumbnail ではサムネイルを設定していなかった場合に表示する画像を設定しておきます。

article: {
    defaultThumbnail: "/images/sinwave.gif",
    articlesPerPage: 6,
},

ナビゲーション

以下の部分の表示名とリンク先を設定します。

navigation: [
  {
    name: "tech",
    url: `/tech`,
  },
  {
    name: "study",
    url: `/study`,
  },
  {
    name: "journal",
    url: `/journal`,
  },
],

サブナビゲーション

以下の部分の表示名とリンク先を設定します。

subNavigation: [
  {
    name: "about",
    url: "/about/about",
  },
  {
    name: "Portfolio",
    url: "https://notion-portfolio-site.vercel.app/",
  },
],

アカウント

記事のサイドバーにあるアカウント部分の設定を行います。

account: {
  name: "チャベス",
  description: "Product Development Engineer, Notioner",
  image: `/images/me.png`,
  social: {
    twitter: "https://twitter.com/ChabesuB",
    github: "https://github.com/chabesu/awetion",
  },
},

画像は public\images に格納します。

記事を書いた人

記事の最下部にある、以下の部分の設定を行います。

この設定は複数人の設定をしておくことができます。

以下の場合は、チャベスと Mr. AWESOME の二人を設定しています。

writers: [
  {
    id: "チャベス",
    name: "チャベス",
    description: "Product Development Engineer, Notioner",
    image: "/images/me.png",
  },
  {
    id: "awesome",
    name: "Mr. AWESOME",
    description: "profile here profile here profile here profile here",
    image: "/images/me.jpeg",
  },
],

ただし、上記の id と Notion のデータベースの Authors は設定が一致するようにしておいてください。

カテゴリー

記事のカテゴリーの設定を行います。

以下は「Tech」カテゴリーのページです。

カテゴリーの設定名は様々な場所に表示されます（ title ）。

また、id は記事の URL にもなるので英語の小文字で設定しておいてください。

imagePath はカテゴリページの背景画像に使用する画像のパスです。

discription はカテゴリページのカテゴリ名の下に表示されます。

categories: [
  {
    id: "about",
    title: "About",
    imagePath: "/images/me.png",
    description: "About Me",
  },
  {
    id: "tech",
    title: "Tech",
    imagePath: "/images/sinwave.gif",
    description: "Articles about Tech",
  },
  {
    id: "study",
    title: "Study",
    imagePath: "/images/english.jpg",
    description: "Articles about study",
  },
  {
    id: "journal",
    title: "Journal",
    imagePath: "/images/journal.jpg",
    description: "My Journal",
  },
],

このカテゴリ名も、上記の id と Notion のデータベースの Category の名前が一致するようにしておいてください。

タグ

タグの設定は、デフォルトでは対応ができていません。

少し設定が複雑になるので、別の記事で設定方法を解説します。

（現状ではタグと記事を紐づけることができていません。）

favicon を設定する

faviconはブラウザのタグに表示される画像です。

その他にもスマホのホーム画面にサイトを追加した時に表示される画像もここで設定します。

favicon 関連の設定は、components\layout.tsx にあります。

favicon の画像パスやサイズを調整する場合は、下記で調整して下さい。

additionalLinkTags: [
    {
      rel: "icon",
      href: `${faviconPath}/favicon.ico`,
    },
    {
      rel: "apple-touch-icon",
      sizes: "57x57",
      href: `${faviconPath}/apple-touch-icon-57x57.png`,
    },
    {
      rel: "apple-touch-icon",
      sizes: "60x60",
      href: `${faviconPath}/apple-touch-icon-60x60.png`,
    },
    {
      rel: "apple-touch-icon",
      sizes: "72x72",
      href: `${faviconPath}/apple-touch-icon-72x72.png`,
    },
    {
      rel: "apple-touch-icon",
      sizes: "114x114",
      href: `${faviconPath}/apple-touch-icon-114x114.png`,
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "36x36",
      href: `${faviconPath}/android-chrome-36x36.png`,
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "48x48",
      href: `${faviconPath}/android-chrome-48x48.png`,
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "72x72",
      href: `${faviconPath}/android-chrome-72x72.png`,
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "36x36",
      href: `${faviconPath}/icon-36x36.png`,
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "48x48",
      href: `${faviconPath}/icon-48x48.png`,
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "72x72",
      href: `${faviconPath}/icon-72x72.png`,
    },
  ],

faviconを準備する

favicon に使用する画像を準備するには以下のサイトが便利です。

favicon に使用する画像が準備できたら、public フォルダ直下に favicon フォルダを作り、用意した favicon 画像を格納してください。

全てのファビコン画像が準備できているわけでなくても、最低限 favicon.ico が準備できていれば十分です。

終わりに

基本的なブログの設定はこれで完了です。

次回は、タグ機能の追加を行います。