Microcms + nuxt.jsで個人ブログサイトをデプロイした件

Microcms + nuxt.jsで個人ブログサイトをデプロイした件うえむー 2020 / 5 / 17

アジェンダ１.自己紹介２.開発経緯・手順３.microcms・nuxt.jsとは４.ブログサイトの紹介・苦労したこと５.今後の活動・まとめ

1.自己紹介 Name うえむー Skill html / css / scss /
javascript / jQuery / vue.js / gulp.js / php etc... ※趣味でgo・nuxt.js・micro cms・firebaseを勉強中です。今後は next.js・x-ninjaも勉強したいと思います。 Hobby プログラミング学習・ビートボックス・ゴルフ・ボードゲーム・麻雀 SNS・ブログサイト Twitter:：https://twitter.com/uemuragame5683 ブログサイト：https://nu-blogsite.net/

2.開発経緯・手順

2.開発経緯・手順開発経緯去年の8月にmicro cmsのサービス開始したというブログをみて、micro cmsに興味を持った。個人で作業するのは限界を感じていたので、人脈を作りたい。エンジニアの仲間と交流したい。それじゃあ、個人のブログサイトを作ろう

2.開発経緯・手順全体構成 nu-blog nuxt.js micro cms レンタルサーバー・ドメイン　お名前.com フロント CMS API叩く

2.開発経緯・手順 1.作業手順 2.設計・要件定義 3.nuxt.jsをインストール 4.設定・デザイン　　　　　・製造(静的コーディング) 5.micro cmsアカウント登録 6.コンテンツ登録・API出力 7.製造(組み込み)
8.お名前.com登録 9.ドメイン・レンタルサーバー購入　　　　　　　　　　　　　・SSL化 10.検証環境デプロイ・動作検証・修正 11.本番環境デプロイ・Nu-blog公開

3.microcms・nuxt.jsとは

3.microcms・nuxt.jsとは micro cmsとは microCMSとは2019年8月にローンチした、日本製のAPI型のヘッドレスCMS。コンテンツ管理のためのwordpress・Movavle Typeのようにサーバ管理は一切不要で、アカウント登録するだけですぐにサービスを利用開始できます。 https://microcms.io/ 新規登録ページに遷移して登録す
るだけ

3.microcms・nuxt.jsとはヘッドレスの「ヘッド」は、ビュー（表示する画面）のことです。ヘッドレスなので、ビューの無いCMSということになります。ヘッドレスCMSのサービスは色々あります。 Contentful https://www.contentful.com/ Graph CMS https://graphcms.com/

3.microcms・nuxt.jsとはなぜ、ヘッドレスCMSのサービスは何種類かあるのに、 micro cmsにしたのか・・・？理由は簡単、英語が苦手だからです！

3.microcms・nuxt.jsとは従来のCMS・ヘッドレスCMSの比較 (従来のCMSの場合) wordpressなどの従来のCMSは、ヘッダー・コンテンツ・フッターまでCMS管理しています。レンタルサーバーを借りて・CMS(wordpress等)をインストール・サイト構築し、デプロイしたあと、バックエンドの管理画面で各コンテンツを更新していきま
す。データーベース wordpress フロントサーバー

3.microcms・nuxt.jsとは従来のCMS・ヘッドレスCMSの比較 (ヘッドレスCMSの場合) microcmsなどのヘッドレスCMSは、任意の箇所のみCMS化できます。コンテンツ登録して出力したAPIを、 javascript・php・swiftなどでその APIを適用してコーディングします。スライダー・インフォーメーションなどのその一部分を管理画面から操作できます。
サーバーデーターベースサーバー micro cms フロント fetch("https://xxxxxx.microcms.io/api/v1/xxxx", { headers: { "X-API-KEY": xxxxxxxxxx } }) .then(res => res.json()) .then(json => { ………. コーディングサーバー

3.microcms・nuxt.jsとは登録・手順に関しては、個人のブログサイトで詳しくお話します！ http://nu-blogsite.net/

3.microcms・nuxt.jsとは nuxt.jsとは Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できるそうです。
https://ja.nuxtjs.org/guide/

3.microcms・nuxt.jsとはよくわからないので、 Nuxt.jsで主な機能を展開します！

3.microcms・nuxt.jsとは主な機能・Vue ファイルで記述できること（*.vue）・コードを自動的に分割すること・サーバーサイドレンダリング・非同期データをハンドリングするパワフルなルーティング・静的ファイルの配信・JS と
CSS のミニファイ化・<head> 要素（<title>、<meta> など）の管理・開発モードにおけるホットリローディング・プリプロセッサ: Sass, Less, Stylus な・モジュール構造で拡張できること etc....

3.microcms・nuxt.jsとは実装してすごいなと体感したところ・Vue ファイルで記述できること（*.vue）・コードを自動的に分割すること・サーバーサイドレンダリング・非同期データをハンドリングするパワフルなルーティング・静的ファイルの配信・JS と
CSS のミニファイ化・<head> 要素（<title>、<meta> など）の管理・開発モードにおけるホットリローディング・プリプロセッサ: Sass, Less, Stylus な・モジュール構造で拡張できること etc....

3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR) ・ JS と CSS のバンドル及びミニファイ化 •サーバーサイドレンダリング(SSR) Javascriptでサーバー内部実行 (コンパイル)して、HTMLを生成すること
•ミニファイ化ホームページのファイルのサイズを小さくすること

3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR) ミニファイ化のどこがいいの？

3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR) JS と CSS のバンドル及びミニファイ化のメリット・パフォーマンス性向上「表示速度向上」・SEO対策・開発効率の向上実装してコンパイルしてデプロイしたき、サイトを開いた時ミニファイ化した影響で表示速
度がすごく早い！

3.microcms・nuxt.jsとは・<head> 要素（<title>、<meta> など）の管理 Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。 nuxt.config.js を使ってこの設定を上書きすることができます。

4.ブログサイトの紹介・苦労したこと

4.ブログサイトの紹介・苦労したことブログサイト名・ロゴについてサイト名：nu-blog 自分名前のイニシャルからとりました！ロゴのメッセージ：ナレッジを蓄積して、どんどんブログを書いて自分のサイトに公開して情報をシェアしたいというメッセージが込められております！

4.ブログサイトの紹介・苦労したことトップページトップページの仕様メインバナー最大3枚設置全カテゴリのブログを表示しております。

4.ブログサイトの紹介・苦労したこと記事一覧・詳細ページ記事一覧ページの仕様プログラミング・ビジネス・テクノロジー・ライフ・インフォメーションの５カテゴリのブログ記事を公開しています。

4.ブログサイトの紹介・苦労したことお問い合わせページお問い合わせページの仕様お問い合わせページにフォームを投稿し送信すると、 micro cms側で投稿確認ができるようになります。

4.ブログサイトの紹介・苦労したこと一番苦労したのは「お問い合わせページ」で試行錯誤して10日かかりました。

4.ブログサイトの紹介・苦労したこと苦労した理由・お問い合わせはaxiosのajaxを実装して入力したデータをPOST送信する処理をしており、ajaxはいつもjQueryでの実装が慣れていたため、axiosでの実装は慣れてなかったので時間がかかった。・click・submitイベントの処理が全然異なっていたため、チュートリアルを見ながら実装していた。・スクリプトで実装していたため、動作検証はクロム検証ツール + console.logで随時確
認していて動作検証するのに時間がかかった。

4.ブログサイトの紹介・苦労したことそして色々と試行錯誤して、５月５日にデプロイしました！

5.今後の活動・まとめ

５.今後の活動・まとめ今後の予定・周に1回～2回ブログを更新、LPを作成して展開したい。・アンケート機能を追加する・next.js + micro cmsで実装して比較検証してみたい・netlifyでデプロイしたい。まとめ
・micro cmsは自由にフロント構築ができて、部分的にCMS化できるので改修の費用がかからずエンジニアからしたらありがたい。・nuxt.jsは最初は難しいという印象だったけど、慣れると作業が楽になる。・諦めずに構築して自分に自信がついた。

Thank You !!

Microcms + nuxt.jsで個人ブログサイトをデプロイした件

Microcms + nuxt.jsで個人ブログサイトをデプロイした件

Nobuyoshi

More Decks by Nobuyoshi

Other Decks in Programming

Featured

Transcript

Microcms + nuxt.jsで個人ブログサイトをデプロイした件うえむー 2020 / 5 / 17

アジェンダ１.自己紹介２.開発経緯・手順３.microcms・nuxt.jsとは４.ブログサイトの紹介・苦労したこと５.今後の活動・まとめ

1.自己紹介 Name うえむー Skill html / css / scss /

2.開発経緯・手順

2.開発経緯・手順全体構成 nu-blog nuxt.js micro cms レンタルサーバー・ドメイン　お名前.com フロント CMS API叩く

2.開発経緯・手順 1.作業手順 2.設計・要件定義 3.nuxt.jsをインストール 4.設定・デザイン　　　　　・製造(静的コーディング) 5.micro cmsアカウント登録 6.コンテンツ登録・API出力 7.製造(組み込み)

3.microcms・nuxt.jsとは

3.microcms・nuxt.jsとはなぜ、ヘッドレスCMSのサービスは何種類かあるのに、 micro cmsにしたのか・・・？理由は簡単、英語が苦手だからです！

3.microcms・nuxt.jsとは登録・手順に関しては、個人のブログサイトで詳しくお話します！ http://nu-blogsite.net/

3.microcms・nuxt.jsとはよくわからないので、 Nuxt.jsで主な機能を展開します！

3.microcms・nuxt.jsとは主な機能・Vue ファイルで記述できること（*.vue）・コードを自動的に分割すること・サーバーサイドレンダリング・非同期データをハンドリングするパワフルなルーティング・静的ファイルの配信・JS と

3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR) ・ JS と CSS のバンドル及びミニファイ化 •サーバーサイドレンダリング(SSR) Javascriptでサーバー内部実行 (コンパイル)して、HTMLを生成すること

3.microcms・nuxt.jsとはサーバーサイドレンダリング(SSR) ミニファイ化のどこがいいの？

3.microcms・nuxt.jsとは・<head> 要素（<title>、<meta> など）の管理 Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。 nuxt.config.js を使ってこの設定を上書きすることができます。

4.ブログサイトの紹介・苦労したこと

4.ブログサイトの紹介・苦労したことトップページトップページの仕様メインバナー最大3枚設置全カテゴリのブログを表示しております。

4.ブログサイトの紹介・苦労したこと記事一覧・詳細ページ記事一覧ページの仕様プログラミング・ビジネス・テクノロジー・ライフ・インフォメーションの５カテゴリのブログ記事を公開しています。

4.ブログサイトの紹介・苦労したことお問い合わせページお問い合わせページの仕様お問い合わせページにフォームを投稿し送信すると、 micro cms側で投稿確認ができるようになります。

4.ブログサイトの紹介・苦労したこと一番苦労したのは「お問い合わせページ」で試行錯誤して10日かかりました。

4.ブログサイトの紹介・苦労したことそして色々と試行錯誤して、５月５日にデプロイしました！

5.今後の活動・まとめ

５.今後の活動・まとめ今後の予定・周に1回～2回ブログを更新、LPを作成して展開したい。・アンケート機能を追加する・next.js + micro cmsで実装して比較検証してみたい・netlifyでデプロイしたい。まとめ

Thank You !!