Web開発日記

Nuxt.jsとマークダウンで簡単なブログサイトを作成する方法

Nuxt.jsにMarkdownで簡単にブログサイトを作成する方法を記載します。 Nuxt.jsのプロジェクト作成下記参考にNuxt.jsのプロジェクトを作成してください。 ※今回はUI frameworkにVuetify.jsを選択しました。プロジェクト作成し、Nuxt起動すると下記のような画面が表示されます。 Nuxt/Content を利用する Contentを利用します。 - Contentとは - nuxt/contentモジュールを使ってNuxtJS

【Nuxt.js】faviconの設定方法

Nuxt.jsでfaviconの設定方法です。デフォルトでは下記faviconが設定されています。こちらを変更します。 faviconはstaticディレクトリ内にあるfavicon.icoというファイルで制御されています。こちらを変更することで、faviconの変更が可能です。以上です。

Nuxt.js + Contentful + Netlifyでポートフォリオサイト作りました。

こんにちは。長野県松本市のWebデベロッパー、賀川と申します。Web制作を中心にWeb周りのお仕事をコツコツとやっております。最近周りのフロントエンドエンジニアと話していると、必ずNuxt.jsの話になるんですよね。私も昨年末くらいにNuxt.jsをちょっと触っていたのですが、他の案件に追われていたため途中で学習をストップしていました。 ↓こんなマガジンを作ったりしていた。そんなこんなでNuxt.jsから離れていたのですが、先月から少しずつ時間が取れるようになっ

Nuxt.js + Netlifyで 404ページを作成する方法

現在Nuxt.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Netlifyで公開しているサイトの404ページ対応を行います。現状とやりたいこと特に何も設定しない状況だと、存在しないページにアクセスした場合下記のようにNetlifyのデフォルトのエラー画面が表示されてしまいます。これを、下記のように独自のエラー画面を表示するようにします。それでは始めます。 error.vueの作成404ページや403ページをそれ

Netlifyで公開しているサイトをSSL化する方法

現在Nuex.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Netlifyで公開しているサイトをSSL化する方法を記載します。 Netlifyにお名前.comドメインを設定する方法は下記です。それでは始めます。 Netlify管理画面での設定Netlifyにログインし、「Domain management」から「HTTPS」をクリックします。 HTTPSの「Verify DNS configuration」をクリッ

【Nuxt.js + contentful】a hrefでエラーが出た。→ 解決した。

どんな状態でエラーが出たか1. ContentfulでURLフィールドを作成し、URLを記入した 2. Nuxt.jsのvueに下記のようにリンクを書いた <a href="{{post.fields.url}}">{{post.fields.url}}</a> 3. すると、下記のようなエラーが表示された。 Errors compiling template: href="{{post.fields.url}}": Interpolation inside att

最速でNuxt.jsを構築する

一番簡単なNuxt.jsの構築方法です。 1. Nuxt.jsをインストールするディレクトリに移動ターミナルを開き場所を移動します。 cd 好きな場所 2. Nuxt.jsをインストール下記コマンドにてNuxt.jsをインストールします。今回は「lm」という名前で作成します。 npx create-nuxt-app lm すると、いくつか対話式で質問があります。特に気にしなければ全てEnterで問題ないです。 ? Project name? Project de

ポートフォリオサイトを作ろう！【第5回ファイル作成編】

※この記事について現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。連載記事はマガジンにまとめています。こちらをご覧ください。ポートフォリオサイトを作ろう。今回で第5回目です。今回は前回の設計を元に、ファイルを作っていこうと思います。一旦必要な画面のおさらいです。 TOP - about - work (contentfulで書いた記事を一覧表示) - work detail (content

ポートフォリオサイトを作ろう！【第３回Nuxt.js にContentfulの記事を表示する編】

※この記事について現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。連載記事はマガジンにまとめています。こちらをご覧ください。前回はContentfulの設定を行いました。今回はContentfulで作成したコンテンツ記事を、Nuxt.jsで表示するところまでやりたいと思います。それでは始めます。 Contentfulパッケージをダウンロードターミナルより、Nuxtのディレクトリへ移動し下記実行します

ポートフォリオサイトを作ろう！【第１回 Nuxt+Netlify で環境構築編】

※この記事について現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。連載記事はマガジンにまとめています。こちらをご覧ください。ポートフォリオサイト作成チャレンジ中です。最近はVueに興味があったのですが、『Nuxt.js利用すると便利だよ』と教えてもらったのでそれならばやってみようかなと思いNuxt+Netlifyでチャレンジしてみることにしました。プロジェクトの作成まずはプロジェクトのフォルダを作

#nuxt