はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

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

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

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

環境

  • Windows10
    • Atom 1.34.0
    • npm 6.4.1

はてなブログのHTML構成

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

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

theme-plain.hatenablog.com

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

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

  1. sassで書いてそれをchokidarで変更監視
  2. ファイル保存されたらnode-sassでトランスパイルし,
  3. できあがったcssをBrowsersyncでロカールサーバに置き,
  4. その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-sasscssへのトランスパイル,--include-pathオプションでパスの設定*/
  "scss": "node-sass scss/mysass.scss build/mycss.css --output-style expanded --indent-width 4 --source-map build/ --include-path node_modules/",
  /*postcsscssファイルにベンダープリフィックス追加*/
  "autoprefixer": "postcss --use autoprefixer -r build/material.css",
  /*2つの処理を逐次実行*/
  "build": "npm-run-all scss autoprefixer",
  /*chokidarscssディレクトリの変更を監視し,その後npm run buildを行う*/
  "watch": "chokidar \"scss/\" -c \"npm run build\"",
  /*browser-synccssファイルをローカルサーバにup, これは別のconfigファイルで設定*/
  "server": "browser-sync start -c bs-config.js",
  /*watchserverを並列実行する*/
  "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'
    },
};

基本的にnpm start or npm run start を実行してsassを書いていく.