ブログサービスを利用せず、サクッと個人ブログをたてる

[ブログ](https://lucks.work/blog/)を作成してみました。

techブログとprivateブログをあげています。

# たちあげまでのみちのり
1. netlifyを使えるようになる。ブログのたちあげかたはReadMeに書いてあります。下記に添付しておきます。
2. ドメイン取得しnetlifyにカスタムドメインをはる。
3. もとになっているyellowcakeをいじいじ。自分の情報とかを入れる
4. ASPに登録し、アフィリエイト用のタグを取得してブログにはっつけていく。
5. お問い合わせフォームも初めからそれっぽくできてる。



# REDAME

company-blogというなの個人ブログです。  
ソースは[こちら](https://github.com/thriveweb/yellowcake)

An opinionated starter project for creating lightning-fast websites with [Gatsby](https://gatsbyjs.org) v2 and [Netlify CMS](https://netlifycms.org) v2.

- **[Gatsby](https://gatsbyjs.org)** 静的サイトジェネレーター
- **[Netlify CMS](https://github.com/netlify/netlify-cms)** コンテンツ管理
    - [Netlify CMS Docs](https://www.netlifycms.org/docs/)  
    - [Netlify CMS Repo](https://github.com/netlify/netlify-cms)



## [yellowcake](https://github.com/thriveweb/yellowcake)の取得とNetlifyの設定

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/thriveweb/yellowcake&stack=cms)

1. 上記 **Deploy to Netlify** を押下すると次の処理が実行されます。

- Githubにリポジトリを作成
- Netlifyにプロジェクトが作成され、ビルド、デプロイが実行する。

1.  Netlifyプロジェクトが作成されたら、いくつかの設定を確認します。

- Enable **Identity**
- Change **Registration Preferences** to **Invite Only**
- Enable **Git Gateway**

1.  ユーザー（おそらく自分）を招待して管理者アクセスを有効にします

- **Identity** タブの **Invite Users** より有効にします。

## CMSを確認

https:/ドメイン名/admin　からCMSの画面を開くことができます。

## Developing

1.  リポジトリをローカルにcloneしてください。

1.  Install dependencies

`yarn` or `npm install`

1.  Run the development server

`yarn start` or `npm run start`

※CMSで変更した場合、リポジトリに自動でプッシュされます。

1.  Changes will be pushed to the remote repo.

1.  サイトのURLを入力するよう求められます。これは、Netlify Identityがユーザーのログインを管理するために必要です。 これは `localStorage`に保存されるため、プロジェクトを切り替えているが` localhost：8000`に残っている場合は、ブラウザーのキャッシュを空にする必要があります。

## CMS フィールドの確認

Netlify CMSの設定は `public / admin / config.yml`にあります。 
ここで、CMSで編集可能なページ、フィールド、投稿、設定を構成します。

[Netlify CMS Docs](https://www.netlifycms.org/docs/#configuration).

## Uploadcare の設定

Uploadcareは、ファイルアップロードシステムです。 ファイルをホストして、CDNネットワークを介して配信します。
作成する各サイトには、独自のUploadcare APIキーが必要です。 以下の設定方法をご覧ください

1. Uploadcareにプロジェクトを作成しAPI　Keysを保存します。

- [Uploadcare.com](https://uploadcare.com/accounts/login/)にログインします。
- ダッシュボードで新しいプロジェクトを作成します
- nameを設定してcreateを押下します
- 左側のメニューで[APIキー]をクリックし、公開キーをコピーします
- プロジェクトを開き、CMS config.ymlファイルを開きます
- 「media_library」設定を見つけ、「publicKey：」の後に公開キーを貼り付けます

詳細は[Netlify CMS Docs](https://www.netlifycms.org/docs/uploadcare/)を確認してください。

## GoogleMapの設定
company-blog/src/components/GoogleMap.jsのiframe srcを書き換えます。
```
       <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3793.087900690165!2d139.7742304699323!3d35.70830057169619!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188e9f7d1c4e79%3A0xe15e9d6fd6e70426!2z44CSMTEwLTAwMDUg5p2x5Lqs6YO95Y-w5p2x5Yy65LiK6YeO77yW5LiB55uu77yR4oiS77yR77yRIOW5s-WyoeODk-ODqzlG!5e0!3m2!1sja!2sjp!4v1565194713202!5m2!1sja!2sjp" 
        width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
```

## Recaptchaの設定
1. [reCAPTCHA](https://www.google.com/recaptcha/intro/v3.html)に登録、設定。
2. company-blog/src/components/FormSimpleAjax.jsのdata-sitekeyを設定し、SITE_RECAPTCHA_SECRETを環境変数としてNetlifyに設定します。


## コンテンツ配信のスケジュール設定とメールの設定

<details style="background-color:snow;"><summary>OPEN</summary><p>

## Scheduled content

Scheduled content allows you to schedule posts. Set the date / order field in a post to the feature.
For the scheduled content to appear on the website we need to deploy our website daily.

1. Setup a Netlify build hook

- Go to https://app.netlify.com/sites/_YOUR_SITE_NAME/setings/deploys/#build-hooks
- Hit build hook button in the build hooks section
- Give it a name for example: "Automatic deploy Zapier"
- Select branch, in most cases master will do.
- Hit save and copy the generated url

2. Zapier Setup

- Go to [Zapier.com](https://zapier.com/) and login
- Hit make a zap button in the right top corner
- Search for Schedule in the search bar and select "Schedule by Zapier"
- Check every day and hit continue
- Select a time and make sure trigger on weekends is turned on
- Double check your settings and hit continue
- On the left hit add a step - and search for webhook by Zapier
- Select post as action and continue
- Past in the url of our recently generated webhook in the url field
- Make sure "Payload Type" is set to form and hit continue
- check settings and hit the test button
- Check your Netlify site if there has been triggered a new deploy
- If that worked hit finish
- Give your zap a name, example: "Automatic deploy Yellowcake" and make sure your zap is turned on

That's it, you'r now ready to use scheduled content!!

## Mailchimp integration

https://hooks.zapier.com/hooks/catch/2881617/ea5exg/

- Go to [Zapier.com](https://zapier.com/) and login
- Hit make a zap button in the right top corner
- Search for webhook by Zapier and select catch hook and continue to next step
- In most cases leave this field empty and continue
- Copy the generated url
- Now go to the [form settings](https://app.netlify.com/sites/yellowcake/settings/forms#outgoing-notifications) in you Netlify project
- Find the form notifications section click the add notification button
- Select the option `outgoing webhook`
- Set the event to listen for
- Paste in our recent generated url in the URL to notify field
- Select your form and save settings
- Open your website navigate to your form, fill it out and send the data
- Go back to Zaper and see if your form data has come trough.
- Hit continue and add a new step on the left side of the screen
- Search for MailChimp and select add/update subscriber
- Select MailChimp account or add one and hit the test button
- if succeeded hit continue button
- Select your MailChimp list and select the subscriber email address
- Fill in other settings for your needs and continue
- Hit send test to MailChimp button and hit finish if succeeded
- Give your Zap a name and make sure your zap is turned on
- Submit your form one last time and see if all data is coming trough to MailChimp
- Thats is!

</p></details>