Ryon Logに使った技術・サービス

Ryon Log製作記 その1[使用技術編]

使用した技術についてのまとめ

2021年03月15日

はじめに

はじめましてRyonです。
私は現在、Web系への転職を目指して日々プログラミングを学習しています。
このブログは学習したことをアウトプットするために作りました。(たまには関係無いことも投稿します。)
まずは、このRyon Logの制作過程を投稿していきたいと思います。

使用した技術

今回の投稿では使用した技術について紹介してしたいと思います。

Nuxt.js

Nuxt.js公式

フロントエンドの構築に使用したのは、Nuxt.jsです。
Nuxt.js(ナクストジェイエス)はJavascriptのフレームワークの一つである、Vue.js(ビュージェイエス)のフレームワークです。このNuxt.jsを使うことでVue.jsでの開発をとても効率的に行うことができます。

個人的にVue.jsから学習を進めていて、そろそろ何らかの形にしたいと思っていたので採用しました。

Nuxt.jsには「Server Side Renderingモード」、「Single Page Applicationモード」、「Generateモード」という3つのモードが用意されており、Webページやアプリケーションの用途に合わせて選択します。
今回はブログなので動的な生成は必要ありません。そこで読み込みの速さと運用の手軽さを重視して、静的なページを生成するGenerateモードを選択しました。

Bulma

Bulma公式

UIのスタイルについてはsccsで一から書くつもりでしたが、フレームワークを試してみたいと思ったので、Bulmaを使ってみることにしました。

Contentful

Contentful公式

Contentfulは、HeadlessCMSと呼ばれるAPIベースのCMSです。
HeadlessCMSの中では知名度もあり、開発事例が多くあります。
また、Markdown記法での記述もできるということをメリットに感じて採用しました。

Netlify

Netlify公式

ブログのホスティング先はNetlifyにしました。
無料でカスタムドメインやSSL/TLSの利用ができるなど無料枠でできることの多さに加え、Contentful側に自動デプロイのテンプレートがあったことが決め手になりました。

まとめ

今回はどのような技術を使用したのかをまとめてみました。
今後は以下のことについてもまとめた記事を投稿する予定です。
それでは。

今後の投稿予定

  • フロントエンド編
  • CMS編
  • デプロイ編
  • ドメイン取得編