このブログについて説明する
なんでやったか
- Gatsbyでブログ建てたけど、シンプル+オリジナルなのが欲しかった
- Reactわかんねえし、vue cliからやってみた
- Contentfulを知って使ってみたかった
使用技術
- Vue CLiでプロジェクト作成
- Vue RouterでSPA
- Vuetifyで見た目
- marked.jsでmarkdownをhtmlにパース
- Contentfulを使用
NuxtだったらContentulの変更通知を受け取って静的ファイルを生成する機能があるらしいけど、勉強する気力はなかった。
marked.jsじゃなくて、markdown-itの方が良かったかも、ミスったかも。
詰まったところ
Vuetifyでアイコンが読み込めない
<v-icon>home</v-icon>
じゃなくて
<v-icon>mdi-home</v-icon>
Contentfulから得た情報をdataにセットできない
setData(){
ContentfulAdapter.getTop()
.then(function (entry) {
this.greeting = entry.fields.title;
this.message = entry.fields.description;
})
}
じゃなくて
setData(){
var vm = this;
ContentfulAdapter.getTop(
.then(function (entry) {
vm.greeting = entry.fields.title;
vm.message = entry.fields.description;
})
}
envを読み込めない
- vueはenv設定したらちゃんとサーバ再起動しないと読み込まれないんかい
hightlight.jsが思ったように色つかない
参考記事
所感
- contentfulはあくまでCMSでRDBとかじゃないので、自動生成されるuuid以外の値はユニークであることを保証できない。ネック。
- contentfulのgetEntryって関数で引数に不正な値を入れたらエラー返さずに、スペースにある全てのエントリーを返すのやめてほしい。
- ビルドの設定がnetlifyはgithub pagesより楽できるのでよかった。vercelも触ってみたい。
- ただ初回が遅いのでそれをなんとかしたい
- やっぱり静的ファイルにしてサクサク動かしたいので、nuxtいつか勉強したい
おまけ
個人的に好きなブログ