gatsby starter gcn
v3.0.1
Gatsby、Contentful、Netlify を使用して素晴らしい静的 Web サイトを構築するためのスターター テンプレート。 gatsby-contentful-starter からインスピレーションを受けています。
https://gcn.netlify.app/
git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install
または Gatsby CLI 経由
gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git
Contentful にサインアップして、新しい空きスペースを作成する
yarn run setup
ここでコンテンツフル スペースの要求された情報を入力します: app.contentful.com →スペース設定→ API キー。標準 API キー (最初のタブ) と管理キー (2 番目のタブ) の両方を指定する必要があります。
/src/gatsby-config.jsの siteMeta データを編集する
siteMetadata: {
title : 'GCN' , // Title of the website
description : // Description of the website
'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
image : '/images/share.jpg' , // Path to default image for SEO
menuLinks : [ // The links used in the top menu
{
name : 'Home' ,
slug : '/' ,
} ,
{
name : 'About' ,
slug : '/about/' ,
} ,
{
name : 'Contact' ,
slug : '/contact/' ,
} ,
] ,
postsPerFirstPage : 7 , // Number of posts on the first page
postsPerPage : 6 , // Number of posts used on all other pages
/*
Root URL for posts and tags
For example: 'blog' will result in:
- www.example.com/blog/
- www.example.com/blog/post-name/
- www.example.com/blog/tag/tag-name/
*/
basePath : '/' , // Defaults to the homepage
}注:ローカルで開発しているときに変更が反映されていない場合は、 yarn cleanを実行してから、 yarn developによってサーバーを再起動する必要がある場合があります。
/src/gatsby-plugin-theme-ui/index.jsを編集します
export default {
colors : {
background : '#ffffff' ,
text : '#121212' ,
primary : '#121212' ,
secondary : '#e9e9e9' ,
tertiary : '#f3f3f3' ,
highlight : '#5b8bf7' ,
} ,
fonts : {
body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
} ,
sizes : {
maxWidth : '1050px' ,
maxWidthCentered : '650px' ,
} ,
responsive : {
small : '35em' ,
medium : '50em' ,
large : '70em' ,
} ,
}yarn testスクリプトを使用して、コードにエラーがないかすばやくチェックしますstatic/imagesディレクトリ内のshare.jpgおよびfavicon.pngファイルを置き換えることができます。gatsby buildを実行する
/public/フォルダーを Netlify にドラッグ アンド ドロップします。
Git からの新しい Netlify Web サイト
GitHub に接続し、リポジトリを選択します
Netlify に移動します:設定→ビルドとデプロイ→ビルド環境変数。スペース ID と Content Delivery API (Contentful からのアクセス トークン) を使用して、次の環境変数を追加します。さらに、必要に応じて、Google Analytics ID を入力できます。変数が正しく動作するには、変数に次のとおりの名前を付ける必要があります。
ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS
Trigger deploy手動でトリガーし、ビルド環境変数を使用して Web サイトが正常に構築されていることを確認します。この時点で、 masterにプッシュするたびに、デプロイが自動的に開始され、運用環境に公開されることに注意してください。 Netlify に移動します: [設定] → [ビルドとデプロイ] → [フックのビルド] 。新しいビルドフックを作成します。
Contentful: app.contentful.com →スペース設定→ Webhookに移動します。作成したばかりの Netlify ビルド URL を使用して Webhook を作成し、本番環境でビルドをトリガーするイベントを構成します。たとえば、次のコードは、投稿またはページが公開、非公開、または削除されるたびに、運用 Web サイトを再構築します。
Netlify に移動します: 「フォーム」 → 「通知」
[通知を追加] ドロップダウンをクリックし、希望の通知方法を選択します。
yarn developの実行中に Contentful スペースを編集した場合は、変更が反映されていることを確認するために、それを停止してコマンドを再実行する必要があります。たとえば、Web サイトが再構築されるまで、新しい投稿やページは自動的に表示されません。
