gatsby-all-pack-theme-starter

https://gatsby-all-pack-theme-starter.netlify.app/

What is this

gatsby-all-pack-theme-starter

GatsbyJS に最初からこんな機能が入っていれば良いのにと思い作成したのがこちらのBlog Themeです。

最初からワードの記事検索機能やRSSの生成機能、Google Analyticsでのランキング機能、関連記事の表示など ブログに最低限必要な機能をすべて詰め込んだThemeになります。

多機能ながらもカラーテーマやサイトテーマを細く設定でき、カスタマイズが可能になっています。 唯一GUIで設定が完結できるGatsby themeです

What is a feature?

• Algoliaでの記事検索機能
• Google Analyticsより取得されたPV数でランキング機能
• 記事の関連リンク設定（関連記事の設定が可能）
• サイトテーマカラー、デザインをNetlify CMSで調整可能
• レスポンシブ対応・ハンバーガーメニューの実装
• タグ機能・カテゴリー機能
• RSSの生成機能・サイトマップ生成機能

How To Deploy & Site Setting

Netlify Upload

1. gatsby new hoge でソースコードを取得する(CUI操作はここだけです)

gatsby new blog https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter.git
cd blog
git remote add origin [your-git-repository-url]
git push origin master

1. NetlifyのサイトでGit連携をする

2. Netlify Envを設定する

秘匿情報をGit履歴にコミットしないようEnvを設定する必要があります。Themeでは2つのEnvが必要です。

• ALGOLIA_ADMIN_KEY: 取得の仕方
• GA_CRED: : Google Cloud API Credentials Json 取得の仕方

1. デプロイする

Site Setting

サイト名、タイトル、ブログ画像、ヘッダー画像、著者情報などブログに必要な内容を設定していく

Google Analytics & Algolia Setting

各種APIのAPI Keyを取得する必要があります。Skip可能です。

Color Setting

Theme Dark mode (Sample)

• white: #1F1F1F
• primary: #00FFC5
• accent: #007ACE
• baseBack: #121212
• baseFont: #FAFAFA
• baseGray: #3F3F3F
• baseGrayLight: #4E4E4E

Theme Light mode (Sample)

• white: #FFFFFF
• primary: #00FFC5
• accent: #007ACE
• baseBack: #ebebeb
• baseFont: #141414
• baseGray: #282828
• baseGrayLight: #E2E8F0

How To Post articles

Netlify CMSでの更新

1. your-domain.com/admin にアクセスしログイン
2. posts のタブに遷移し、記事を編集する

esa.io などのthird party CMSでの更新

こちらを参照