#はじめに
$ npm i
$ npm run develop
=> HPが localhost:8000で開きます
=> GraphQL UIが http://localhost:8000/___graphqlで開きます。
※GoogleDriveを使う場合
-
下記urlから、GoogleDriveのAPIトークンを取得します https://developers.google.com/drive/api/v3/quickstart/nodejs 種類は「Desktop App」でOK。
-
credential.jsonをダウンロードし、
/credentialsディレクトリに保存します。 -
npm run contents:getを実行。uthorize this app by visiting this url: https://accounts.google.com/....と出るので、URLをコピペしてアクセス。 -
コードをコピーして、ターミナルに貼り付けて、エンター。
5.npm run contents:updateを実行
.
├── contents コンテンツ内容の置き場
│ ├── csv
│ └── docx
├── contents-backup コンテンツのバックアップ
├── credentials GoogleDriveなどの認証ファイル等の置き場
├── gatsby-config.js
├── gatsby-node.js
├── package-lock.json
├── package.json
├── public 公開ファイルの出力先
├── scripts コンテンツ更新用nodeスクリプト置き場
│ └── getContents
├── src サイトのソースコード
│ ├── components Reactコンポーネント集
│ │ └── partials
│ │ │ └── styles Reactコンポーネントのcss
│ ├── pages
│ │ ├── index.jsx トップページのjsx ページを追加したい場合は、ここにjsxを配置します。
│ │ └── 404.jsx 404ページのjsx
│ ├── style 個別画面css置き場
│ │ ├── _common.scss
│ │ ├── index.scss
│ │ └── release.scss
│ └── templates 個別ページのテンプレート置き場
│ └── ReleaseTemplate.jsx
└── static 画像などの静的ファイル置き場。ビルドするとpublic配下にコピーされます
└── images
$ npm run develop
ローカルサーバー（localhost:8000）が立ち上がります。
/srcディレクトリ内が監視対象になっており、ファイルを編集した場合自動的に反映されます。
GoogleDriveから最新のコンテンツを取得する場合は、以下のコマンドを実行します。
$ npm run contents:update
$ npm run contents:update
/contentsディレクトリの中身を/contents-backupにコピーしてから、
/contentsディレクトリの中身を最新にします。
$ npm run contents:restore": "npm-run-all contents:restore:*",
/contents-backupディレクトリの中身を/contentsに復元します。
$ npm run contents:delete
/contentsディレクトリを空にします。
$ npm run contents:delete:backup
/contents-backupディレクトリを空にします。
$ npm run build
/publicディレクトリに本番環境向けファイルがビルドされます。
/public/index.htmlがエントリーポイントになるよう、サーバの設定を行なって下さい。
下書きページにBASIC認証をかける場合
server {
listen 80;
root ...../public/;
index index.html;
location /draft/ {
auth_basic "Restricted"; # 認証時に表示されるメッセージ
auth_basic_user_file /etc/nginx/.htpasswd; # .htpasswdファイルのパス
}
}
-[x] 404ページを作っていないので、エラーが出る -[ ] GoogleDrive以外の方法があった方がいい