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

ブログを作成してみました。

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

たちあげまでのみちのり

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

REDAME

company-blogというなの個人ブログです。
ソースはこちら

An opinionated starter project for creating lightning-fast websites with Gatsby v2 and Netlify CMS v2.

• Gatsby 静的サイトジェネレーター
• Netlify CMS コンテンツ管理
  • Netlify CMS Docs
  • Netlify CMS Repo

yellowcakeの取得とNetlifyの設定

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してください。

2. 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.

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

CMS フィールドの確認

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

Netlify CMS Docs.

Uploadcare の設定

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

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

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

詳細はNetlify CMS Docsを確認してください。

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に登録、設定。
2. company-blog/src/components/FormSimpleAjax.jsのdata-sitekeyを設定し、SITE_RECAPTCHA_SECRETを環境変数としてNetlifyに設定します。

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

OPEN

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

1. Zapier Setup

• Go to 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 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 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!