Nuxt.js x Contentful x Netlify で構築する Jamstack なブログ
Home Page: https://upd.world
JAMstack Blog
# install dependencies
$ npm run install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateFor detailed explanation on how things work, check out Nuxt.js docs.
head 内の meta タグの設定.
サイドカラムの作成
ESLint に vue/max-attributes-per-line の設定を追加する.
今のうちから Lint ルールを整えたいため.
記事詳細ページのタグのホバー時のスタイル変更
トップページと記事詳細ページとのページ遷移アニメーション実装
ページ表示速度改善.
データを Vuex を用いて管理するように変更する.
フッターコンポーネント作成
後回しにしていた header コンポーネントのスタイルの微調整.
CSS 設計を先におこなったため, header コンポーネントのスタイルの微調整は後回しにしていたため.
パンくずリスト実装
現時点では下記の通り.
デフォルトの title タグを下記のものに変更する.
世界をアップデートしていくクリエイターチーム - UPDATE
Vuetify を使用しないよう方向転換するにあたり, 全体的な基盤を構築し直す.
Vuetify による余計な class が増え, スタイルも指定しづらいため.
ロゴとグローバルメニューのホバー時のアニメーション修正
header コンポーネントを作成する.
ページネーションの実装
html 要素の lang 属性値を ja に変更する.
CSS (SCSS) の設計をおこなう.
ITCSS を軸としてアレンジし, 適用する.
header コンポーネント実装時に, class やスタイルの指定で迷うことがあったため.
Settings: プリプロセッサで利用するグローバル変数や全体の設定.
Tools: プリプロセッサで利用する mixin や function など.
Generic: reset.
Base: 要素型セレクタ.
Objects: 装飾を持たないデザインパターン.
Components: コンポーネント.
Trumps: ヘルパー. !important を利用していい.
※Objects 以降はコンポーネントファイル内に記載する.
※Trumps は使用しない.
READMEの記載
head 内の記述を全ページに適用
ブログ基本情報を定数管理する.
ブログ基本情報はプロジェクト全体で使い回すことが多いため.
Nuxt.js の plugin を使う.
スマホ用固定フッターメニューの作成.
スマホでの固定フッターメニューは圧迫感がなく, 何かと便利な機能だから.
ロゴのスタイル修正
トップページとそれ以外でロゴのスタイルが微妙に異なっていたため.
ユーザー情報を定数管理化する.
グローバルで頻繁に使用する情報であり, 更新頻度もそこそこあるデータなので, 定数管理化して管理を楽にするため.
Nuxt.js プロジェクトの plugins ディレクトリに my-info.js ファイルを作成してそこで管理.
ロゴのマークアップの修正
静的サイトホスティングサービス「Netlify」の導入
ブログをインターネット上に公開するため.
ステージング環境と本番環境の構築.
フッタータグエリアの正式反映
PC 表示時のヘッダーのデザインを変更.
タグページ作成
ファビコンの変更.
ページ遷移アニメーションの微修正
全体のレイアウト修正.
ヘッダーとフッターを作成し, レイアウト調整をする必要だと感じたから.
下記 Issue の対応時に後回しにした meta タグの正式反映.
具体的には下記箇所の正式反映.
トップページの記事一覧の作成
ESLint の設定に 'no-console: 'off' を追加する.
開発中のビルド時に毎回 Warning が出るのが邪魔なため.
グローバルメニューデータを定数ファイルに移動
問い合わせフォーム作成
一部アニメーションの不具合の修正
Contentful を導入し, 初期設定をおこなう.
関連記事コンポーネントの作成.
コメントを JSDoc を用いたものに修正する.
メインビジュアルコンポーネントの作成.
必要だから.
particles.js, typed.js などのライブラリを使用し, 既存のブログと同じメインビジュアルをコンポーネントとして作る.
particles.js, typed.js は可能であれば Vue.js 版のものを使用する.
SCSS 全体のリファクタ
記事詳細ページの作成
記事詳細から記事一覧へのページ遷移アニメーション実装
定数管理のリファクタ.
.editorconfig の追加.
コーディングスタイルに関するエディタの設定を自動統一させ, 少しでも余計なことを考えなくて済むようにするため.
URLに javascript が含まれていると下記エラーが発生するので, その解消.
Uncaught Error: URL contains XSS injection
ポートフォリオページの作成
構造化データマークアップの適用
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.