Vue js×MicroCMSでJamstackなポートフォリオサイトをつくってみた

•Als PPTX, PDF herunterladen•

0 gefällt mir•360 views

yuosaka

ジャムジャム！！Jamstack_2【初心者歓迎LT会】(https://jamjamjamstack.connpass.com/event/226467/) の登壇資料です。

Ingenieurwesen

Vue.js×MicroCMSで
Jamstackなポートフォ
リオサイトをつくっ
てみた
0yu@denham95173179
11/11/2021

つくったもの
11/11/2021
https://yukimi-pino.netlify.app/

もとは
そもそも、ポートフォリオサイトで最も更
新頻度が高いコンテンツを更新するのに手
間がかかるのは本末転倒🤔
ローカルだと画像ファイルの管理が大変！
dataプロパティに直書きしてた
11/11/2021

コンテンツ管
理をCMSでやり
たい！
• Vue.jsでMicroCMSのAPIを叩い
てMarkupを配信する
• Jamstackは静的なコンテンツ
を配信するだけなので高速
(高パフォーマンス)
• NetlifyでHosting

APIスキーマを設定
• フィールドIDをキーに参照する
• 使いそうなコンテンツをいい感
じに設定する
11/11/2021

MicroCMSからデータを取得
• ブログの記事を書く要領で、
MicoroCMS上でコンテンツを追
加する
11/11/2021

mounted()内でaxiosを使ってAPIのエンドポイントを叩
く
• APIキーをリクエストヘッダー
に含めて送信する
• APIキーは.env.localに書き、
process.envから参照
• 接頭辞には”VUE_APP_”を付ける
• 受け取ったJsonを配列のworksに
格納する
• https://document.microcms.io/content-
api/get-list-contents
11/11/2021

設定したフィールドIDからコンテンツを参照する
• レイアウトはVuetifyでよしなに
11/11/2021

ホスティングについて
• ホスティングはFirebaseとNetlify
の双方でおこなった
• せっかくなので、Google
PageSpeed Insightsで表示速度を
測定してみた
11/11/2021

つくってみて
• コンテンツの更新が手軽にできてでよい
• Jamstack構成の勉強ができてよかった
• モバイルパフォーマンスを向上させたい
• ゆくゆくはNuxtjs化したい
2021/11/11

Weitere ähnliche Inhalte

Ähnlich wie Vue js×MicroCMSでJamstackなポートフォリオサイトをつくってみた

Building assets on the fly with Node.jsAcquisio

Introduction to asp.net WroclawMałgorzata Borzęcka

JS digest. Mid-Summer 2017ElifTech

Building SPA’s (Single Page App) with Backbone.jsMicrosoft Developer Network (MSDN) - Belgium and Luxembourg

Developer Pitfalls & Strategies for Improving Mobile Web Developer ExperienceTasneem Sayeed

Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...Brian Huff

Flash And DomMike Wilcox

The 8 Don'ts of WCMCédric Hüsler

Running a business in the Cloud with AWSConor O'Neill

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYCJesus Manuel Olivas

How do you deliver your applications to the cloud?Michael Elder

Ansible, PHP and EC2Craig Marvelley

Web Hostingwebhostingguy

Building Rich Internet Apps with Silverlight 2Microsoft Iceland

LAMPtutorialsruby

(2018) Webpack Encore - Asset Management for the rest of usStefan Adolf

Internals - Exploring the webOS Browser and JavaScriptfpatton

ServerSentEvents.pdfAlessandro Minoccheri

Writing Java EE microservices using WildFly SwarmComsysto Reply GmbH

Ähnlich wie Vue js×MicroCMSでJamstackなポートフォリオサイトをつくってみた (20)

Building assets on the fly with Node.js

Introduction to asp.net Wroclaw

JS digest. Mid-Summer 2017

Building SPA’s (Single Page App) with Backbone.js

Developer Pitfalls & Strategies for Improving Mobile Web Developer Experience

Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...

Flash And Dom

The 8 Don'ts of WCM

Running a business in the Cloud with AWS

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC

How do you deliver your applications to the cloud?

Ansible, PHP and EC2

Web Hosting

Building Rich Internet Apps with Silverlight 2

LAMP

(2018) Webpack Encore - Asset Management for the rest of us

Internals - Exploring the webOS Browser and JavaScript

ServerSentEvents.pdf

Writing Java EE microservices using WildFly Swarm

Kürzlich hochgeladen

(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7Call Girls in Nagpur High Profile Call Girls

Double rodded leveling 1 pdf activity 01KreezheaRecto

Intze Overhead Water Tank Design by Working Stress - IS Method.pdfSuman Jyoti

Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Christo Ananth

KubeKraft presentation @CloudNativeHooghlysanyuktamishra911

PVC VS. FIBERGLASS (FRP) GRAVITY SEWER - UNI BELLManishPatel169454

chapter 5.pptx: drainage and irrigation engineeringmulugeta48

Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...roncy bisnoi

Thermal Engineering-R & A / C - unit - VDineshKumar4165

(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7Call Girls in Nagpur High Profile Call Girls

AKTU Computer Networks notes --- Unit 3.pdfankushspencer015

Extrusion Processes and Their Limitations120cr0395

ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfKamal Acharya

Call for Papers - International Journal of Intelligent Systems and Applicatio...Christo Ananth

The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...ranjana rawat

Thermal Engineering Unit - I & II . pptDineshKumar4165

(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7Call Girls in Nagpur High Profile Call Girls

Vivazz, Mieres Social Housing Design Spaintimesproduction05

UNIT - IV - Air Compressors and its Performancesivaprakash250

result management system report for college projectTonystark477637

Kürzlich hochgeladen (20)

(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7

Double rodded leveling 1 pdf activity 01

Intze Overhead Water Tank Design by Working Stress - IS Method.pdf

Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...

KubeKraft presentation @CloudNativeHooghly

PVC VS. FIBERGLASS (FRP) GRAVITY SEWER - UNI BELL

chapter 5.pptx: drainage and irrigation engineering

Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...

Thermal Engineering-R & A / C - unit - V

(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7

AKTU Computer Networks notes --- Unit 3.pdf

Extrusion Processes and Their Limitations

ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf

Call for Papers - International Journal of Intelligent Systems and Applicatio...

The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...

Thermal Engineering Unit - I & II . ppt

(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7

Vivazz, Mieres Social Housing Design Spain

UNIT - IV - Air Compressors and its Performance

result management system report for college project