Webpackで作るメディアサイト裏話

「Webpackで作るメディアサイトまとめ」| JS飽きるまで

このnoteはフロントエンドエンジニアが「JS飽きるまで」とゆう個人技術ブログを開発・運営するにあたり、「Webpackを使ってWPから乗り換えるメディアサイト」用の自作フレームワークを作る過程を、技術書展向けに本にするための試行錯誤している裏話を掲載しています。

どうしてWordPressを捨てるのか？

WP飽きるまで。 - 東京都江戸川区でvue,WP,PHP,HTML,CSS,JSを使って管理画面を作る系フロントエンド人の技術系メディア

もともと「WP飽きるまで」とゆうWordpressサイトを運営してきましたが、WPはコア機能が多彩で利用しない機能が多すぎる事がネックでした。
私は開発者なのでWPのような手厚い管理画面は必要とせず、むしろテキストエディタで記事を書きコピペしている状態。
これならもっといい方法があるのでは？と思い、Nuxe化やVue化、NoteやQiitaなど様々検討しました。
そんな中、WebpackとGITHUBで十分納得の行くサイトになることが判明したため、Webpackに移行しました。

メリットは？

この記事に一覧で記載しましたが、大きなメリットは以下になります。
(1) lint(校正)を技術書向けに行える
(2) 好みにカスタムできるMarkdown
(3) 管理画面にログインする必要がない
(4) 軽い
これだけでも個人的には嬉しいです。
Markdownで記事を作るともちろんWPへの転用も可能ですし、HTMLタグがないので、装飾のブレが少なく、製本時の整形も楽です。またGitHub上で編集・確認が可能なので、レビューもコメントも通しやすいです。

どうやって使う？

今後公開される記事で連載していきますが、大まかに以下の流れです。運用は3から5を繰り返します。
(1) 環境を作る (Webpack)
(2) サイトを作る(PUG/jude + PostCSS + JS)
(3) 記事を書く(Markdown)
(4) GitHubにPush (GitHub Actions)
(5) 公開 (firebase Hosting)

有料記事について

有料記事を買ったら技術書展向け本を割引できるクーポン券を発行予定です。

しばらくお付き合いください。