2020年07月19日
ホームページを作成しました。
アプリの紹介、ポートフォリオ、備忘録用にホームページを作成しました。
使用したフレームワーク
ホスティングにNetlify、nuxt.jsを使用してテンプレートはVuetify、投稿内容にはContentfulを使用しました。
このホームページを無料で作成することができたので、素晴らしいサービスたちに感謝しています。
Netlify
Netlifyは静的サイトをホスティングできるサービスです。
使用方法は以下の通りです。
Nuxt.jsを使用して新たなプロジェクトを作成する。
GitHubにこのプロジェクトのリモートリポジトリを作成する。
プロジェクトを編集後、masterに変更内容をmergeすることによってNetlifyがデプロイしてくれる。
自動でデプロイしてくれるのが本当にありがたい。
Nuxt.js
Vue.jsに基づいたフレームワーク。
今回はlayoutにVeutifyを使用。使いやすいデザインが予め用意されているのでcssを書く手間を大きく減らすことができた。しかも、かっこいい。
さらに、アイコンも用意されているので無敵。
さらに、Nuxt.jsのいいところはホットリロードしてくれることである。ファイルを変更して保存するとリロードしてくれるので、リフレッシュする手間を省ける。
npm run dev
localhost:3000にアクセス。
Contentful
このサービスは主にブログ機能として使われる。
作成後、自動的にNetlifyがデプロイしてくれるので最強のタッグ。
ただ、リッチテキストでコードブロックをうまく作成できない。
登録後、content modelを作成。
textやdateなど使いたい要素を設定後、contentを書き込む。
dataはAPIとして受け取る。
./plugins/contentful.js
"""vue.js
const contentful = require('contentful')
// use default environment config for convenience
// these will be set via `env` property in nuxt.config.js const config = {
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}
// export `createClient` to use it in page components
module.exports = {
createClient () {
return contentful.createClient(config)
}
}
"""
.envにそれぞれのパラメータを設置。
./nuxt.config.js
"""vue.js
const config = require('./.contentful.json') module.exports = { // ...
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_PERSON_ID: config.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
}
// ...
}
"""
データ一覧取得
"""vue.js
<script>
import {createClient} from '~/plugins/contentful.js'
const client = createClient()
export default {
// `env` is available in the context object
asyncData ({env}) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
]).then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
}).catch(console.error)
}
}
</script>
"""
それぞれの記事を取得するためには、content modelにslugを定義
表示ファイルは_slug.vueという名前をつける。
表示ファイルのリンクは以下のように設定
"""vue.js
<v-btn text color="" :to="{ name: 'posts-slug', params: { slug: post.fields.slug } }">
"""
詳細画面表示にはリッチテキストをhtmlに変換して以下のように設定
"""vue.js
<div class="main_content" v-html="toHtmlString(post.fields.body)"></div>
<script>
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
import { createClient } from '~/plugins/contentful.js'
const client = createClient()
export default {
async asyncData({ env, params }) {
let post = null
await client
.getEntries({
content_type: env.CTF_BLOG_POST_TYPE_ID,
'fields.slug': params.slug,
})
.then((res) => (post = res.items[0]))
.catch(console.error)
return { post }
},
methods: {
toHtmlString(obj) {
return documentToHtmlString(obj)
},
},
}
</script>
"""
コードが見辛い！！！！！！！！！！