Web開発日記

GatsbyJS + Netlifyでブログ作成する方法。

この記事についてgatsby-starter-blogとNetlifyを利用して、簡単にブログを作成します。完成図↑このようなブログが作成されます。この記事の対象者- フロントエンド初心者 - とりあえずGatsbyjs触ってみたい。 - 最速でブログ作りたい - マークダウン好き GatsbyJSの専門的なことは書いてませんのでご了承ください。それでは始めます。 GatsbyJSインストールターミナルより下記実行し、GatsbyJSをインストールします。

Nuxt.js + contentfulで作成したサイトにサイトマップを追加し、Google Search Consoleの設定をする方法

今回はNuxt.js + contentful で作成した下サイトに、でサイトマップを追加する方法を記載します。サイトマップを設置すると検索エンジンにサイトの構成を伝え、検索ヒットしやすくなります。サイトマップモジュールのインストール下記でインストールします。 yarn add @nuxtjs/sitemap nuxt.config.jsに@nuxtjs/sitemapを追加次にnuxt.config.jsを修正します。modulesオプションに下記追加します。

GitHubでリポジトリ名を変更する方法。（+Netlifyでの設定）

GitHubのリポジトリ名ですが、作った後に「やっぱり変えたいな。」と思うことありません？今回はGitHubのリポジトリ名の変更方法を記載します。 GitHubでの操作まずはGitHubで操作します。 GItHubで変更希望のリポジトリを選択し、「Settings」をクリック、「Repository name」に変更後の名前を記入し、「Rename」をクリックします。 .git/config の修正次に、.git/configファイルを修正します。プロジェクトル

NetlifyのForms機能を利用してお問合せフォームを作成する方法

最近Nuxt.js + contentful + Netlifyでサイトを構築することも多くなってきました。今回はNetlifyのForms機能であるNetlify Formsを利用して、お問合せフォームを作成する方法を記載します。 Netlify Formsについてhttps://www.netlify.com/products/forms/ Netlify Formsを利用すると、サーバ側の実装等をすることがなく簡単にお問合せフォームを利用することができます。

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でGoogle Analyticsを利用する方法

現在Nuex.js + contentful + Netlify でサイトを制作しています。今回のnoteでは、Nuxt.jsで構築したサイトにGoogle Analyticsを導入する方法を記載します。 Google AnalyticsよりトラッキングID取得Google AnalyticsよりトラッキングIDを取得します。 https://analytics.google.com/ UA- から始まるトラックングIDが発行されますので、コピーしておいてください。

お名前.comで取得したドメインを、Netlify に設定する方法

Nuex.js + contentful + Netlify でサイトを制作しているのですが、お名前.comで取得したドメインの設定方法がわからなかったので調査メモです。前提・Netlifyでサイト公開済み・お名前.comでドメイン取得済みそれでは始めます。 Netlifyでの設定まずはNetlifyでの設定を行います。Netlifyにログインしてください。次に、ドメインを関連付けるサイトを選択します。対象のサイトをクリックします。「Domain set

Vueのプロジェクトを作成し、Netlifyで公開するまで

Vue.jsやってます。今回はVue CLIにてVueのプロジェクト作成し、GitHubにソースアップして、Netlifyでサイト公開するまでの流れをまとめました。ある程度慣れてくれば、１５分くらいでできるのではないかと思います。前提・Vue.jsの知識が少しでもあること・GitHubアカウント持っていること・Netlifyアカウント持っていることそれでは始めます。 Vue CLIにて Vueのプロジェクト作成下記にてインストール npm install

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

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

#Netlify