WordPressから別のCMSへの移行を考えたとき、候補のひとつになるのが「EmDash」(エムダッシュ)です。

EmDashは、「Astro」(アストロ)をベースに開発されたオープンソースのCMSです。
WordPressとは仕組みが異なるため、実際に移行する前に、まずは自分でブログ環境を構築して使い勝手を確かめてみることにしました。

今回は、Windowsのターミナルを使ってEmDashを構築していきます。

WordPressならレンタルサーバーの管理画面からインストールできることも多いですが、EmDashではNode.jsやpnpmといったツールを利用します。

ターミナルは、非エンジニア・文系ブロガーにとっては、なじみのない作業かもしれません。

そこで、実際に操作した手順を紹介しながら、必要なコマンドの意味や、構築時に気づいたことも記録していきます。

1. EmDashの構築に必要なもの

今回の構築では、Windowsパソコンとターミナルを使用します。

ターミナルとは?

ターミナルとは、文字でパソコンに命令を伝えるための操作環境です。

Windowsには「PowerShell」というターミナル環境が標準で用意されています。

普段、Windowsを使っていると、エクスプローラーやブラウザなどをマウスで操作することが多いと思います。

いっぽう、ターミナルでは、コマンドと呼ばれる文字列を入力して操作します。

PowerShellのおもな用途

EmDashのような開発環境を構築するときには、ターミナルからコマンドを実行する方法がよく使われます。

今回は、PowerShellにコマンドを入力してEmDashのプロジェクトを作成し、ブログを動かすための環境を準備していきます。

Node.jsとpnpmを準備する

EmDashの構築には、「Node.js」と「pnpm」が必要です。

「Node.js」はJavaScriptを実行するための環境、「pnpm」はプログラムの構築に必要なパッケージを管理するツールです。

これらのインストール方法については、別の記事で解説しています。

まだ準備していない場合は、先に以下の記事をご覧ください。

👉 【Windows】EmDash構築のためのターミナル準備|Node.jsとpnpmをインストールする手順

2. ターミナルからEmDashのプロジェクトを作成する

Node.jsとpnpmの準備ができたら、EmDashのプロジェクトを作成します。

作業フォルダを指定する

まず、EmDashのファイルを保存する場所を決めます。

今回は、Windowsの「ドキュメント」フォルダ内に作業用のフォルダを作成することにします。

PowerShellを開き、次のコマンドを入力します。

cd "$HOME\Documents"

cdは、ターミナルで作業するフォルダを移動するためのコマンドです。

上の文字列をコピーして、PowerShell上で「Ctrl+V」を押すと、
貼り付けられます。

cohomuドキュメント

コマンド入力を入力して、

PS C:¥Users¥user¥Dpcuments>

と表示されれば、成功です。

UserusersDocuments

これで、ドキュメントフォルダに移動できます。

また、PowerShell内のテキストをコピーして調べたいときは、
マウスでテキストをドラッグして範囲選択します。

そのまま(右クリックも押さずに)、別の場所を開いて「Ctrl+V」を押します。

EmDashのプロジェクトを作成する

続いて、EmDashのプロジェクトを作成します。

次のコマンドを入力します。

pnpm.cmd create emdash@latest

このコマンドは、pnpmを使って「EmDash」のプロジェクト作成ツールを実行するものです。

実行すると、EmDashの構築に必要なファイルを準備する処理が始まります。

Powershellでemdashが立ち上がった

筆者の場合は、以下のようなテキストが表示されました。

— E M D A S H —

T Create a new EmDash project
|

  • Project name? (use “.” for current directory)
    | my-site

ターミナル独特の操作に戸惑う

ここで筆者は、ターミナル(というか、PowerShellの仕様?)独特の操作に戸惑いました。

まず、画面のいちばん上。

Windows PowerShellの前に、「選択」と表示されています。

これは「選択モード」といって文字を選択するモードで、
操作を先に進めるための「Enter」キーを受け付けなくなってしまうそうです。

いったん、「ESC」キーを押します。
これで、「選択」が消えます。

また、上の画面では、「my-site」の「m」に白いカーソルが点灯した状態です。

もし、「→」などで白カーソルが右に動かないなら、
「Tab」キーを1回押します。

これで白いカーソルが、「my-site」の右側に移動したら、
「Enter」キーを押します。

白いカーソルが先頭のmから動かないとき

以下のようなメッセージが出てきました。

Where will you deploy?

Cloudflare Workers (D1 + R2)
Node.js

どこにデプロイしますか

「どこにデプロイ(配置・公開)しますか?」
という質問です。

EmDashを「Node.js」で動かす

上記の画面では、

> Cloudflare Workers (D1 + R2)
Node.js

となっています。

現在、Cloudflare Workersの行に > が付いているので、今はそちらが選択されています。

今回の目的は、まずEmDashをパソコン内で動かして、WordPressとの違いを確かめること。
ここでは、「Node.js」を選択します。

現在、Cloudflare Workersの行に > が付いているので、今はそちらが選択されています。

  1. キーボードの ↓(下矢印)キーを1回 押す。
  2. > が Node.js の左側に移動したことを確認する。
  3. Enterキーを押す。
下矢印でnodejsを選択する

以下のようなテキストが表示されます。

Which template?
| > Blog (A blog with posts, pages, and authors)
| Starter
| Marketing
| Portfolio

初期テンプレートの選択画面

EmDashには、用途に応じて次の4種類のテンプレートが用意されています。

  • Blog:記事や固定ページを掲載するブログ向け
  • Starter:基本的な構成から自由に作りたい人向け
  • Marketing:企業や商品・サービスを紹介するサイト向け
  • Portfolio:作品や制作実績を紹介するサイト向け

WordPressでいうテーマに近いものですが、見た目だけでなく、記事の管理方法やページ構成なども含めたサイトのひな形です。

今回はWordPressからの移行を想定しているため、ブログ向けの「Blog」を選択します。

パッケージマネージャーは「pnpm」を選択する

続いて、「パッケージマネージャー」を選びます。
「パッケージマネージャー」とは、EmDashの動作に必要なプログラムやライブラリをインストール・管理するためのツールです。

EmDashでは、pnpm・npm・yarn・bunの4種類から選択できます。

今回は事前にインストールしておいた「pnpm」を使用します。初期状態でpnpmが選択されているので、そのままEnterキーを押して進みます。

pnpmパッケージを管理するツールを選ぶ

「pnpm」を選んで「Enter」キーを押した画面です。

Install dependecies?

Yes/ No

「Install dependencies?(依存関係をインストールしますか?)」と表示されています。

これは、EmDashを動かすために必要なプログラムやライブラリをインストールするかどうかの確認です。
今回はインストールが必要なので、「Yes」を選択してEnterキーを押します。

ライブラリのインストールを確認

インストール中に、こんな感じで【WARN】(警告)が出てきます。

[WARN] Request took 10478ms: https://registry.npmjs.org/@astrojs%2Flanguage-server
[WARN] Request took 10687ms: https://registry.npmjs.org/svgo
[WARN] Request took 10414ms: https://registry.npmjs.org/yargs-parser

警告の内容は、パソコンの環境やネットワークの状態などによって異なります。
今回表示された通信の遅延に関する警告も、必ずしもインストールの失敗やセキュリティ上の問題を意味するものではありません。

内容がどうしても気になる場合は、警告が表示された部分をコピーして、ChatGPTなどのAIに質問してみるとよいでしょう。

なお、エラーや警告のログを共有するときは、パスワードや秘密情報が含まれていないか確認してください。

インストールが完了すると、以下のようなメッセージが表示されます。

Done! Your EmDash project is ready at my-site

ブログプロジェクトの完成

3. EmDashをローカル環境で起動する

EmDashのプロジェクトを作成できたら、次は実際に起動してみましょう。

ここでいうローカル環境とは、インターネット上に公開する前に、自分のパソコン内でWebサイトを動かして確認する環境のことです。

プロジェクトフォルダに移動する

先ほど作成したプロジェクトのフォルダに移動します。

プロジェクト名をmy-siteにした場合は、次のコマンドを入力します。

cd my-site
フォルダを移動させる

成功すると、以下のように表示されます。

PS C:\Users\user\Documents\my-site>
emdashのプロジェクトフォルダに移動

次は、いよいよEmDashを起動します。

開発用サーバーを起動する

続いて、EmDashを起動するためのコマンドを実行します。

pnpm.cmd dev
ローカルでemdashを起動させる

正常に起動すると、ターミナルにローカル環境のURLが表示されます。

このURLをブラウザで開くと、EmDashのサイトを確認できます。

emdashをロカール環境で構築urlと管理画面

なお、開発用サーバーを起動している間は、PowerShellを閉じずにそのままにしておきます。

Windowsファイアウォールの確認画面が表示されたら

EmDashの開発サーバーを起動すると、WindowsファイアウォールからNode.jsのネットワーク通信を許可するか確認される場合があります。

今回のように自分のパソコン内でEmDashを動かす場合は、次の点に注意してください。

  • プライベートネットワーク:自宅など、信頼できるネットワークでのみ許可します。
  • パブリックネットワーク:公共Wi-Fiなど、不特定のネットワークでは許可しないでください。

今回のように、自分のパソコンでEmDashを動かす場合は、ファイアウォールの確認画面で、プライベートネットワークだけにチェックが入っていることを確認し、「アクセスを許可する」を選択します。

パブリックネットワークにはチェックを入れないでください。公共Wi-Fiなど、不特定のネットワークからNode.jsへの接続を許可しないためです。

ブラウザでEmDashを確認する

PowerShellに表示されたURLをブラウザで開きます。

ローカルで立ち上げたEmdashのブログ

これで、自分のパソコン上でEmDashを動かせるようになりました。

この段階では、まだインターネット上にブログを公開したわけではありません。あくまでローカル環境で動作を確認している状態です。

4. EmDashの管理画面を確認する

次に、EmDashの管理画面を開いてみます。

管理画面のURLは、実際に構築した環境の案内に従ってアクセスします。

emdashサイトをセットアップ❶

1. サイトタイトル

ブログの名前です。今回は仮の名前で構いません。

例:テストブログ

2. キャッチフレーズ

サイトの内容を簡単に説明する文章です。

例:EmDashブログのガイド

3. サンプルコンテンツの選択

ここは次の3つから選ぶようです。

選択肢内容
サンプルコンテンツあらかじめ用意された記事などを登録する
空のサイト記事などがない状態で始める
既存のEmDashサイトをインポート既存サイトのデータを取り込む

今回は「サンプルコンテンツ」をおすすめします。

最初から記事などが入っていれば、管理画面の機能やブログの表示を確認しやすくなります。

まず、サイトタイトルとキャッチフレーズを入力し、サンプルコンテンツを選んでみましょう。

ローカルemdashのアカウント

もし、Windowsの未設定などでログインできない場合は、
PowerShellに表示されているAdmin UIのURLからアクセスすると、管理画面を開けます。

こhれはEmDashの開発用機能で、パスキーの設定と認証を省略し、「開発用管理者」として管理画面に入るためのURLです。

本番サイトでEmDashのパスキーを使うためには、
基本的に独自ドメインとHTTPSに対応した公開サイト環境が必要になります。

今回は、Admin UIのURLから管理画面を開きました。

(※ いま、Windowsの設定は「ダークモード」にしてあります)

emdashの管理画面

5. 記事の投稿画面を確認する

管理画面に入れたら、実際にブログを運営するうえで必要な機能を確認していきます。

下の管理画面は、セットアップ時に「サンプル記事」を入れた状態。

左メニューより「Posts」を押すと、投稿記事の一覧が表示されます。

右上の「New Post」(新規追加)を押すと、新しい記事の投稿画面となります。

emdashの投稿一覧と新規記事を書く

新規で記事を書くときです。

「Title」に記事タイトル、

ツールバーの下に本文を書きます。

右上に「保存」ボタンがあります。

emdashの記事の書き方

「Title」の下の「Featured Image」に、アイキャッチ画像を貼ります。

「ファイルを選択」を押した場合。

アイキャッチ用のファイルを選択

「ライブラリ」には、Emdash上にすでに取り込まれている画像が表示されます。

右側の「ファイルをアップロード」を押すと、外部から画像をアップロードできます。

emdashに外部からファイルをアップロード

また、本文の白いテキストの下に、

「本文を入力するか、「/」を入力してコマンドを表示」

と、うすい字で表示されています。

ここで半角の「/」を押すと、
見出しやリスト、画像、引用、HTMLなどのコマンドを呼び出せます。

コマンドをスラッシュで呼び出す
スラッシュでコマンドを呼び出せる

「/」でコマンドを呼び出すのは、WordPressと同じなので、
WordPress経験者は記事を書きやすいと思います。

「/」でコマンドを呼び出し、箇条書きを入れてみました。

右上の「プレビュー」を押してみます。

吾輩は猫であるのサンプル記事

6. 次回、ターミナルからEmDashブログを立ち上げる手順

今回起動したEmDashは、パソコン上で動いている開発用サーバーです。

  • ターミナルを開いて pnpm.cmd dev を実行している間:ブログを表示できる
  • ターミナルで Ctrl + C を押す:サーバーが停止する
  • ターミナルを閉じる:基本的にサーバーも停止する

ターミナルを閉じても、作成したブログやプロジェクトのファイルやデータはパソコン内に残ります。
記事データが消えるわけではありません。

ただし、ブログはインターネット上に公開されたわけではないので、ほかの人がアクセスすることはできません。

またブログを確認したくなったら、PowerShellを立ち上げ、
順番にコマンドを入力すれば起動します。

➀ PowerShallを立ち上げる

今回作成したプロジェクト名は my-site なので、次の2つのコマンドを順番に入力します。

➁ プロジェクトのフォルダに移動

cd "$HOME\Documents\my-site"

➂ EmDashを起動

pnpm.cmd dev

これで開発用サーバーが起動します。

ブラウザーでURLを開けば、ブログを表示できます。

7. 編集画面をさわった正直な感想は、“劣化版ワードプレス”

正直に言います。

ひと言で感想を述べるなら、“劣化版WordPress”。
だいぶ昔の、無機質なWordPressテーマをさわっている感じ。

もっとモダンなサイトができるかと期待していましたが、
構築が大変だった割にはガッカリ感がこみあげてきました。

これだったら、はてなブログの有料版でもいいんじゃないですかね?
独自ドメインも使えるし。

あくまで、記事の編集画面から書いてみただけの感想です。
Claude Codeなどと連携して、記事制作フローを自動化したら、印象が変わるかもしれないですけど。

ターミナルの知識は必要?

ターミナルの操作は、かなりクセがあります。

基本的には、必要なコマンドを入力し、表示された案内に従って設定を進める作業です。
コマンドを入力する場所や、表示されたメッセージの意味が分からないと、先へ進めなくなる可能性があります。

構築後もターミナルを使うの?

もうひとつ気になるのが、EmDashを構築した後の運用です。

今回ターミナルを使ったのは、EmDashのプロジェクトを作成し、ローカル環境で動かすためです。

ブログの記事を投稿したり、管理画面から設定を変更したりする作業とは別のものです。
日常的なブログ運営でどこまでターミナルを使う必要があるのかは、今後の運用を通じて確認していきたいと思います。

まとめ:WordPressから移行する前に、まずはEmDashを試してみよう

Windowsのターミナルを使って、EmDashのブログ環境を構築しました。

WordPressとは導入方法が異なり、Node.jsやpnpmなどの開発用ツールを準備する必要がありました。
ターミナルは操作が独特なので、使い慣れていないと苦戦するかもしれません。

いったん構築してしまえば、管理画面や編集画面はWordPressと似ているので、抵抗は少なくなります。

この記事を書いたのは、WordPress移行前にEmdashの管理画面や変種画面を体験しておくためだったのですが・・・

正直に言うと、移行をやめようかと思うほど、「期待外れ」でした。
見た目のショボさもそうですが、いちばんのネックはWordPressほどの楽しさがないのです。

本当に、どうしよう?