ブログ構築TS - 独学プログラマ

これが作れます。（↑Click me!!）

ブログ構築TS

Nuxt.js, TypeScript, Contentful(ヘッドレスCMS)を使ってマイブログを構築します。ホスティング先はNetlifyを使用し、ブログ作成から本番環境への公開までの手順を学びます。内容は「ブログ構築」をバージョンアップしたもので、Nuxt.jsに新たにTypeScriptを導入します。本ブログも同じ技術が使用されています。

採用している技術

GitHub Gitホスティングサービス

Contentful コンテンツ管理システム

Nuxt.js Universal フロントエンド

Netlify ホスティングサービス

Vuetify CSSフレームワーク

TypeScript JavaScript拡張言語

ブログ構築TSのチャプター

1

Nuxt.js×TypeScript開発環境構築

2

Vuetifyセットアップ

3

NetlifyCLIを使ったNuxtデプロイ

4

Contentfulモデル構築

5

Nuxt.js×Contentfulセットアップ

6

Vuex×TypeScriptセットアップ

7

コンテンツページ構築

8

NetlifyFunctionsを使った検索機能

9

ブログMarkdown対応

ブログ構築TS

Nuxt.js, TypeScript, Contentful(ヘッドレスCMS)を使ってマイブログを構築します。

このカテゴリーは完成しました。（更新終了）

1.

Nuxt.js×TypeScript開発環境構築

ブログ構築TS
/
Nuxt.js×TypeScript開発環境構築
/
#01

Nuxt.jsをローカルPCに立ち上げよう

6月前に公開

ブログ構築TS
/
Nuxt.js×TypeScript開発環境構築
/
#02

Nuxt.jsプロジェクトをGitHubにPushしよう

6月前に公開

ブログ構築TS
/
Nuxt.js×TypeScript開発環境構築
/
#03

nuxt-property-decoratorのインストールとTypeScriptのセットアップ

6月前に公開

2.

Vuetifyセットアップ

ブログ構築TS
/
Vuetifyセットアップ
/
#01

TypeScript環境のNuxt.jsにVuetifyを導入しよう

6月前に公開

ブログ構築TS
/
Vuetifyセットアップ
/
#02

VuetifyにカスタムCSSを追加してSASS変数を理解しよう

6月前に公開

ブログ構築TS
/
Vuetifyセットアップ
/
#03

VuetifyにカスタムSVGアイコンを追加しよう

6月前に公開

3.

NetlifyCLIを使ったNuxtデプロイ

ブログ構築TS
/
NetlifyCLIを使ったNuxtデプロイ
/
#01

Netlify CLIをインストールして本番環境のサイトを作成しよう

6月前に公開

ブログ構築TS
/
NetlifyCLIを使ったNuxtデプロイ
/
#02

netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう

6月前に公開

4.

Contentfulモデル構築

ブログ構築TS
/
Contentfulモデル構築
/
#01

Contentfulの料金とCommunityプランの無料枠を理解する

5月前に公開

ブログ構築TS
/
Contentfulモデル構築
/
#02

Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う

5月前に公開

ブログ構築TS
/
Contentfulモデル構築
/
#03

Contentful ブログカテゴリーモデルを作成しよう

5月前に公開

ブログ構築TS
/
Contentfulモデル構築
/
#04

Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう

5月前に公開

ブログ構築TS
/
Contentfulモデル構築
/
#05

Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう

5月前に公開

ブログ構築TS
/
Contentfulモデル構築
/
#06

Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう

5月前に公開

5.

Nuxt.js×Contentfulセットアップ

ブログ構築TS
/
Nuxt.js×Contentfulセットアップ
/
#01

Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで

5月前に公開

ブログ構築TS
/
Nuxt.js×Contentfulセットアップ
/
#02

Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう

5月前に公開

ブログ構築TS
/
Nuxt.js×Contentfulセットアップ
/
#03

ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】

5月前に公開

6.

Vuex×TypeScriptセットアップ

ブログ構築TS
/
Vuex×TypeScriptセットアップ
/
#01

Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか

5月前に公開

ブログ構築TS
/
Vuex×TypeScriptセットアップ
/
#02

nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方

5月前に公開

ブログ構築TS
/
Vuex×TypeScriptセットアップ
/
#03

VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう

5月前に公開

ブログ構築TS
/
Vuex×TypeScriptセットアップ
/
#04

VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう

5月前に公開

7.

コンテンツページ構築

ブログ構築TS
/
コンテンツページ構築
/
#01

ブログアプリのページ設計とNuxt.jsの動的ルーティングについて理解しよう

5月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#02

カテゴリーのコンテンツページを作成しよう【Nuxt.js×Contentful】

4月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#03

カテゴリーに関連付くブログ記事一覧を表示しよう【Nuxt.js×Contentful】

4月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#04

injectを使用して共通エラー処理メソッドを作成しよう【Nuxt×TypeScript】

4月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#05

NuxtChildを使用してブログ記事ページを作成しよう【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#06

タグ一覧ページとタグ関連づく記事一覧を表示しよう【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#07

プライバシーポリシーページを作成しよう【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
コンテンツページ構築
/
#08

@nuxtjs/i18nのインストールとセットアップ。ページタイトルの翻訳化【TypeScript】

4月前に公開

8.

NetlifyFunctionsを使った検索機能

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#01

Netlify Functionsを使ってクエリを返す関数を作成しよう【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#02

Netlify Functionsプロジェクトをデプロイしよう【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#03

Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#04

オリジン•CORS•プリフライトリクエストを理解する【Nuxt.js×Netlify Functions】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#05

Netlify Functionsを使ってフォームバリデーション機能を構築しよう【Nuxt.js】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#06

ツールバーに表示する検索フォームを作成しよう【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#07

検索ページを作成しよう【Vue propsとTypeScriptの書き方解説】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#08

Netlify FunctionsからContentfulAPIリクエストを送ろう【Nuxt.js】

4月前に公開

ブログ構築TS
/
NetlifyFunctionsを使った検索機能
/
#09

検索ページに「もっと見る」ボタンを実装しよう【Nuxt.js×TypeScript】

4月前に公開

9.

ブログMarkdown対応

ブログ構築TS
/
ブログMarkdown対応
/
#01

@nuxtjs/markdownitのインストールとセットアップ【Nuxt.js×TypeScript】

4月前に公開

ブログ構築TS
/
ブログMarkdown対応
/
#02

Nuxt.js×markdown-it 外部リンクを別タブで開くプラグインを追加しよう

4月前に公開

ブログ構築TS
/
ブログMarkdown対応
/
#03

Nuxt.js×markdown-it 内部リンクをVueRouterで高速にページ遷移しよう

4月前に公開

ブログ構築TS
/
ブログMarkdown対応
/
#04

Nuxt.js×markdown-it アンカーリンクとブログ目次を自動生成しよう

3月前に公開・ 2月前に更新済み

これが作れます。（↑Click me!!）

ブログ構築TS

Nuxt.js, TypeScript, Contentful(ヘッドレスCMS)を使ってマイブログを構築します。ホスティング先はNetlifyを使用し、ブログ作成から本番環境への公開までの手順を学びます。内容は「ブログ構築」をバージョンアップしたもので、Nuxt.jsに新たにTypeScriptを導入します。本ブログも同じ技術が使用されています。

採用している技術

GitHub Gitホスティングサービス

Contentful コンテンツ管理システム

Nuxt.js Universal フロントエンド

Netlify ホスティングサービス

Vuetify CSSフレームワーク

TypeScript JavaScript拡張言語

ブログ構築TSのチャプター

1

Nuxt.js×TypeScript開発環境構築

2

Vuetifyセットアップ

3

NetlifyCLIを使ったNuxtデプロイ

4

Contentfulモデル構築

5

Nuxt.js×Contentfulセットアップ

6

Vuex×TypeScriptセットアップ

7

コンテンツページ構築

8

NetlifyFunctionsを使った検索機能

9

ブログMarkdown対応

独学プログラマ

独学でも、ここまでできるってよ。

LOGS

更新終了した過去の記事たち

ブログ構築（Nuxt v2.14未満）

SPA開発（Nuxt v2.14未満）

ABOUT

このサイトの読者さんへ

独学プログラミング勉強法一問一答

プライバシーポリシー

CONTACT

Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。

info.cloudacct+blog@gmail.com