Skip to content

2. Environment

Rick Cogley edited this page Mar 26, 2025 · 19 revisions

Tip

ローカル開発が出来たら料金発生が心配ないが、一番早いのは、Github Codespaceを使うこと。下記をご参照

開発環境について、必須とオプションについて何点か:

Local 開発

Deno

Denoはクロスプラットフォームで、WindowsでもMacでもOK。ここからインストール: https://deno.com

Windows だとこのように出来ると:

irm https://deno.land/install.ps1 | iex

Lume

LumeはDenoで開発され、Denoコマンドの、ローカルサーバーやlinterを使います。 https://lume.land/docs/overview/installation/ を読んでね。

新しいプロジェクトフォルダの中に次を実行すると、Lumeを使うに必要なファイルを作ってくれる:

deno run -A https://lume.land/init.ts

VSCode

VSCodeはマイクロソフト社のテキストエディタで、ここからインストール: https://code.visualstudio.com/

VSCodeのExtensionも幾つかインストールした方が良い。各ExtensionにIdがあるので、これら検索してインストールしてね:

  • denoland.vscode-deno
  • laurencebahiirwa.deno-std-lib-snippets
  • sleistner.vscode-fileutils
  • file-icons.file-icons
  • oscarotero.vento-syntax
  • redhat.vscode-yaml
  • YoavBls.pretty-ts-errors
  • ecmel.vscode-html-css

良くデザインされている日本語もOKなプログラマー用フォント、

Github Codespaces での開発

Codespace 実行

Github Codespaces を使えば、Browserタブにて、仮想マシーンでVSCODEが開かれ、そこで全ての開発が出来る。

ミドリ色のボタンから、Setup済みのCodespaceを開く:

JRC CleanShot Microsoft Edge 2025-03-26-173644JST@2x

VSCODEのTerminal にて、lume serve をEnterし、 サイトがビルドされる。

JRC CleanShot Microsoft Edge 2025-03-26-173952JST@2x

ビルド完了後、右為たに、"Your application running on port 3000 is available" と言う通知がポップアップして、Open In Browserをクリックすると、ブラーザタブで、サイトが開かれる。

Important

Lumeやめるのに、Terminalにて ctrl-c でExitできる

JRC CleanShot Microsoft Edge 2025-03-26-174208JST@2x

Open In Browserをやったあと、出てきます:

JRC CleanShot Microsoft Edge 2025-03-26-174442JST@2x

すると、Browser内のVSCODEで編集したら、サイトも自動的に更新される。

開発段取りとCodespaceの閉じ方は、こちらをご参照

Clone this wiki locally