-
Notifications
You must be signed in to change notification settings - Fork 0
2. Environment
Tip
ローカル開発が出来たら料金発生が心配ないが、一番早いのは、Github Codespaceを使うこと。下記をご参照
開発環境について、必須とオプションについて何点か:
Denoはクロスプラットフォームで、WindowsでもMacでもOK。ここからインストール: https://deno.com
Windows だとこのように出来ると:
irm https://deno.land/install.ps1 | iex
LumeはDenoで開発され、Denoコマンドの、ローカルサーバーやlinterを使います。 https://lume.land/docs/overview/installation/ を読んでね。
新しいプロジェクトフォルダの中に次を実行すると、Lumeを使うに必要なファイルを作ってくれる:
deno run -A https://lume.land/init.ts
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なプログラマー用フォント、
- Ricty: https://github.com/hakatashi/RictyDiminished-with-FiraCode
- Moralerspace: https://github.com/yuru7/moralerspace
- 私、最近こちら。元々Githubの人が作った面白い英語フォント「Monaspace」 と、IBM製作IBM Plex Sans JPのモダンな日本語フォントを混ぜたもの。作った人のリリースページからDL出来る。MoralerspaceJPDOC_vx.x.x.zip は一般文書、MoralerspaceNF_vx.x.x.zip はVSCodeやターミナルで使っている。
Github Codespaces を使えば、Browserタブにて、仮想マシーンでVSCODEが開かれ、そこで全ての開発が出来る。
ミドリ色のボタンから、Setup済みのCodespaceを開く:

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

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

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

すると、Browser内のVSCODEで編集したら、サイトも自動的に更新される。
開発段取りとCodespaceの閉じ方は、こちらをご参照