はてなブログテーマ作成のメモ

はてな公式のBoilerPlateテーマを例にした作成方法を見たところ， npmをバリバリ使った開発者向けに作られていたのでメモ．

環境

Windows10
- Atom 1.34.0
- npm 6.4.1

はてなブログのHTML構成

はてなブログのカスタマイズでは， WordPressやblogerのようなテンプレートタグは無く，またHTMLタグやクラスの追加はできず用意されているタグの中でCSSで頑張るしかない．

はてな公式でブログ全体のHTML構成についてはなぜか公開されてない．有志の方が調べている情報があるのでこちらを利用する．

theme-plain.hatenablog.com

はてなブログテーマ作成時のテスト方法

基本的な流れは以下になる．

sassで書いてそれをchokidarで変更監視
ファイル保存されたらnode-sassでトランスパイルし，
できあがったcssをBrowsersyncでロカールサーバに置き，
そのURLをはてなブログのデザイン設定でスタイルとして@import url()する．

テーマ作成の開発環境

BoilerPlateテーマの開発環境ではwebpackを使わずに以下を使用している．

npm-run-all: 複数の npm-scripts を実行するためのコマンドラインツール，ファイル変更監視とローカルサーバーアップなど並列実行できる．
chokidar-cli: 変更管理
node-sass: sassのトランスパイル
autoprefixer: ベンダープリフィックス自動付与(postcss製)
postcss-cli: cssパーサー, autoprefixer pluginを適用できる
browser-sync: 基本的にはファイル変更を監視し自動でブラウザリロードを行ってくれる,今回はcssファイルを置いたローカルサーバを立てる用に利用する．

インストールに使うコマンド：

cd mytheme
npm install --save-dev npm-run-all chokidar-cli node-sass postcss-cli autoprefixer browser-sync

インストール後のpackage.json（バージョンは最新がインストールされるので変わる）：

"devDependencies": {
    "autoprefixer": "^9.4.10",
    "browser-sync": "^2.26.3",
    "chokidar-cli": "^1.2.2",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^6.1.2"
}

設定

各パッケージのコマンドを毎回打つと大変なので，srciptsを設定する．

"scripts": {
  /*node-sassでcssへのトランスパイル，--include-pathオプションでパスの設定*/
  "scss": "node-sass scss/mysass.scss build/mycss.css --output-style expanded --indent-width 4 --source-map build/ --include-path node_modules/",
  /*postcssでcssファイルにベンダープリフィックス追加*/
  "autoprefixer": "postcss --use autoprefixer -r build/material.css",
  /*2つの処理を逐次実行*/
  "build": "npm-run-all scss autoprefixer",
  /*chokidarでscssディレクトリの変更を監視し，その後npm run buildを行う*/
  "watch": "chokidar \"scss/\" -c \"npm run build\"",
  /*browser-syncでcssファイルをローカルサーバにup, これは別のconfigファイルで設定*/
  "server": "browser-sync start -c bs-config.js",
  /*watchとserverを並列実行する*/
  "start": "npm-run-all -p watch server",
}

browser-syncの設定：ローカルサーバーにupしたいファイルを指定する．ポートが他のサービスと被らないようにする．

bs-config.js：

module.exports = {
    files: ['build/mycss.css'],
    server: {
        baseDir: "build"
    },
    open: false,
    socket: {
        domain: 'localhost:3000'
    },
};