02. HPのプレビューをするには - plasma-fusion-youth-forum/pfyss GitHub Wiki

ここではpfyssのHPをローカル（自分のパソコン）で立ち上げてプレビューするまでに必要な手順を説明します。

目次

• 必須ソフトウェア
• Gitリポジトリのクローン
• npmパッケージのインストール
• npmコマンドの実行
• ローカルサーバーの立ち上げ

必須ソフトウェア (Prerequisites)

本HPの開発には以下のソフトウェアが必要です。

• Node.js
• Hugo
• Dart Sass

macOSの場合は、Homebrewを使って以下のコマンドでインストールできます。

brew install node
brew install hugo
brew install sass/sass/sass

その他のOSの場合は、公式サイトにあるインストール方法を参照してください。

Gitリポジトリのクローン

まず、pfyssのリポジトリをクローンします。ターミナルを用いて以下のコマンドを実行してください。

git clone https://github.com/plasma-fusion-youth-forum/pfyss.git

その後、クローンしたリポジトリに移動します。

cd pfyss

npmパッケージのインストール

次に、npmパッケージをインストールします。以下のコマンドを実行してください。

npm cli

これで、node_modulesディレクトリが作成され、必要なパッケージがインストールされます。

npmコマンドの実行

次に、以下のコマンドを実行してください。

npm run vendor && npm run prepare

これで、必要なファイルがコピーされ、huskyの設定が行われます。

ローカルサーバーの立ち上げ

最後に、以下のコマンドを実行してローカルサーバーを立ち上げてください。

npm run dev

するとエラーがなければ最終的に以下のようなメッセージが表示されます。

                   |  EN
-------------------+-------
  Pages            |   15
  Paginator pages  |    0
  Non-page files   |    0
  Static files     | 3811
  Processed images |  109
  Aliases          |    0
  Cleaned          |  111

Built in 29378 ms
Environment: "development"
Serving pages from disk
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

ここにある http://localhost:1313/ にブラウザ等でアクセスすると、pfyssのHPがローカルで立ち上がります。

この操作はVScode上で行うこともできます。下図のようにVScodeウインドウの左下にある「NPM SCRIPTS」からdevを選択し、再生ボタンを押すと同様の操作が行えます。 停止する場合は削除ボタンを押すか、ターミナルでCtrl+Cを押してください。

このサーバーが立ち上がっていると、HPを編集するたび、自動的にリロードされます。