NuxtとNetlifyパート3による簡単なヘッドレスWordPress

パート3 - Netlifyで展開する

ヘッドプレスのCMSとしてWordPressを設定するとお得な情報.
カバーvue、nuxtとtailwind.
Gitレポからウェブにあなたのプロジェクトを配備することは、途方もなく簡単にNetlifyを使用しています.私はあなたがgithubに精通していて、このシリーズのパート1と2からあなたの仕事を委託していると仮定するつもりです.
私たちがライブのURLにパート1で働いたローカルワードプレスのインストールを動かすことはこの記事の範囲の外にあります、しかし、私は私がWP Migrate DBのプロ版を使用して成功したと言います.それは決して唯一のオプションではありません.
あなたのCMSが一度ならば、あなたはNuxt ConfigでAxios baseURLを変える必要があります.

Nuxt設定。js

axios: {
  baseURL: 'http://yourlivesite.com',
},

のサイトを追加

明らかに、あなたはこのためにNetlifyアカウントを必要とするつもりです、それで、あなたが1を持っていないならば、あなたはcreate oneに必要でしょう.あなたのgithubアカウントを使用してサインアップし、あなたのreposにアクセスできるようになります.
NetLifyダッシュボードで、Gitから新しいサイトをクリックします.
連続展開の下でGithubボタンをクリックします.
正しいレポを選択します.
設定されていない場合は、ビルドコマンドをnpm run generateに、発行ディレクトリをdistに設定します.
「配備」サイトをクリックします.
NetLifyはあなたのサイトを.netlify.appで終わるランダムに生成されたURLに配備します.あなた自身のカスタム.netlify.appのURLを作成したり、“本物の”ドメイン名を使用している.
いつでもこのレポのマスターブランチにプッシュすると、Netlifyはあなたのためのサイトを再配置します.しかし、CMSを設定する全体のポイントは、非開発者が変更を加えることができ、コンテンツを追加することでした.したがって、我々はまた、いつでも新しい投稿が公開されたり、既存の公開された記事が更新される展開をトリガーしたい.

ビルドフックの生成

NetLifyダッシュボードの新しいサイトに移動し、Site Settings -> Build & deploy -> Build hooksにして、ビルドフックを追加します.ビルドフックと名前を付け、「保存」をクリックします.
今、我々はビルドをトリガするために使用できるユニークなURLへのアクセスがあります.ビルドフックの横にあるドロップダウン矢印をクリックすると、ターミナルからビルドをトリガーするためのCURLコマンドが表示されます.

ワードプレスでトリガービルドフック

バックワードプレスでは、我々は特定のイベントにフックし、ビルドフックを呼び出すことができます.私は最初に、このarticleで概説された指示に従って、これを自分で設定しようとしました.それはpublish_post、publish_pageとpost_updateワードプレスフックにフックし、ビルドフックをトリガするためにPHPの内蔵のライブラリを使用します.
悲しいことに、そのコードを確実に動作させることができなかった.それがパーミッションの問題かどうか、私は間違って何かをやっていた可能性が高いです.いずれにせよ、私はプラグインを使用することを選択し、私はそれがCMSを使用してデザイナーのユーザーエクスペリエンスを大幅に向上させるいくつかの利点を提供しているので、私は喜んだ.
このプラグインはJamstack Deploymentsと呼ばれています.
インストールされたら、Settings -> Deploymentsに移動し、ビルドフックのURLを入力します.プラグインを使用すると、ポストタイプ、分類、ポストのステータスをチェックボックスを介して選択することができますビルドをトリガします.
このデモの目的のために、あなたはポストタイプとEventsの後でPublishedをポストステータスの下でチェックしなければなりません.
ダッシュボードを介して設定をオンとオフにすることができるのは素晴らしいです.しかし、このプラグインの私のお気に入りの機能は、WordPressのダッシュボードに追加ステータスバーです.

ステータスバーを正しく動作させるには、2つのURLをJamstack展開設定で追加する必要があります.URLは、Site Settings -> General -> Deploy status badgeの下であなたのNetlifyダッシュボードで見つかります./deploy-statusで終わる最初のURLはバッジイメージURLです、そして、/deploysで終わる第2のURLはバッジリンクです.

これらの設定を入力すると、NetLifyサイトの現在のステータスが表示され、WordPressのダッシュボードのリアルタイムで更新されます.
ステータスバーには、展開のWebサイトのボタンがあります.私はこの機能も非常に有用であることがわかりました.あなたが知っているか、誰かが一度にサイトの更新プログラムをたくさん作っている場合は、一時的に自動更新をオフにすることができますし、ちょうどあなたが終了したら、展開ボタンを押します.
そして、それ!当社のコンテンツは、ウェブサイトのVueを構築管理し、WordPressライブされ、コンテンツが自動的に更新されます.
いつものように、読書のおかげで!あなたがどんなクオリティも持っているならば、コメントで彼らに尋ねてください