Orelop Static は、俺流の静的サイト開発環境です。 フロントエンドツールには「vite 」を利用しているため、高速に静的サイトを開発することが可能です。
- HTML + CSS(Scss/Sass) + JavaScriptによる開発が可能
- CSSファイルにおいてもファイル分割やスタイルのネスト(入れ子)が可能
- 画像やCSSファイル、JavaScriptファイルはビルド時にハッシュ値をファイル名に付与
- 画像はビルド時に圧縮し、WebP、AVIFファイルを生成(htaccessで最適な画像をリスポンス)
Orelop Static を利用するには、あらかじめ以下のツールをマシンにインストールしておいて下さい。
- zipファイルをダウンロード
- ダウンロードしたzipファイルを解凍
- 解凍したディレクトリ名をプロジェクト名に変更
- ターミナルを開き、「Orelop Static」を初期化したいディレクトリに移動します。
cd /path/to/project-directory
- 以下のコマンドを実行して、「Orelop Static」をインストールします。
npm create orelop-static@latest
※ はプロジェクト名を聞かれるのでプロジェクト名を入力してエンターしてください。
以下のコマンドで開発用サーバーを起動できます。
■ npm
npm run dev
■ yarn
yarn dev
HTML ファイルは「src」ディレクトリに配置して下さい。
「Public」ディレクトリ内に保存したファイルは、ビルド後に納品用テーマディレクトリとして「dist」ディレクトリにコピーされます。
「Orelop Static」は、CSS、SCSS のどちらの開発にも対応しています。
CSS で開発するには「src/assets/css/」ディレクトリ内にある「style.css」を利用して下さい。
「Orelop Static」は、「CSS Nesting Module」に対応しているため、スタイルルールのネスト(入れ子)が利用できます。
例
.hero__figure {
height: 100vh;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
また、@import
による、CSS ファイルを分割にも対応しています。
例:「foundation」ディレクトリ内のと「oreset.css」と「object」ディレクトリ内の「hero.css」の読み込み
@import "foundation/oreset.css";
@import "object/hero.css";
scss を使って CSS を開発する場合は、「src/assets/scss/」ディレクトリ内に scss ファイルを作成して、HTML ファイルに <link>
要素で読み込んでください。
<link rel="stylesheet" href="/assets/scss/style.scss" />
glob パターンによる読み込みにも対応しています。
例:「fondation」ディレクトリと「layout」ディレクトリ内にあるすべての.scss ファイルの読み込み
@use "foundation/**/*.scss";
@use "layout/**/*.scss";
JavaScript の開発は「src/assets/js/」ディレクトリ内の「main.js」を利用して下さい。
以下のコマンドを実行すると、「dist」ディレクトリが作成され、納品用のテーマファイルが生成されます。
■ npm
npm run build
■ yarn
yarn build
ビルドを行うと、「src/assets/img/」ディレクトリ内の画像ファイルを最適化(圧縮や、webp ファイルなどの生成)を行い、ハッシュ値をつけて「dist/assets/img/」内に配置されます。
画像の圧縮率や、生成するフォーマットなどに関しては、vite-plugin-image-oretimaizerを利用しているため、vite-plugin-image-oretimaizerのオプションで設定して下さい。
「.htaccess」を使用しており、webp が利用できるブラウザで閲覧した場合、「.jpg」や「.png」ファイルは、webp ファイルがレスポンスされます。
.scss ファイルや.css ファイルは、「dist/assets/css/」内に「index-[ハッシュ値].css」というファイル名で配置されます。
.js ファイルは「dist/assets/css/」内に「main-[ハッシュ値].js」というファイル名で配置されます。
以下のコマンドを実行すると、「dist」ディレクトリをテーマフォルダとして、サーバーが立ち上がります。
■ npm
npm run preview
■ yarn
yarn preview