Skip to content

6. Tips

Rick Cogley edited this page Mar 26, 2025 · 1 revision

Localで閲覧する

CLIでプロジェクトフォルダーに入って、 > deno task lume --serve を打ってから、http://localhost:3000 を開く。 編集してから直ぐその変更が見れます

Siteをビルドする

ビルドだけでしたら: > deno task lume

Commandを確認する

プロジェクトルートにある、deno.jsonにあるのでそれ開いて確認する

Site 公開

git commit  
git push

Mainにプッシュするだけで、公開。

ホスティングを確認する

Deno Deploy使って無料アカウントで公開していますので、Githubにログインしてから、Deno Deploy https://deno.com/deploy でログインするとGithub撰ぶ形でログインする。

Lume アップグレードする

Changelog https://github.com/lumeland/lume/blob/main/CHANGELOG.md を確認してから、

> deno task lume upgrade

時々、Breaking Changeがあるので、あるかどうか、確認してからの方が、リスク少ない。

Site <head> 編集したい

src/_includes/layouts/base.vto

プラグインにて自動注入のものもある、例えば metaプラグインからogタグなど。

Site トップやアバウト 編集したい

src/index.vto
src/about.vto

Site Showcase 編集したい

src/showcase/hogehoge.vto

Top Showcase画像リンクなし

画像をリンクしたくない場合、Showcaseの .vto ファイルのFrontmatterを編集して、 hidelink: true にする:

JRC-Screenshot 2024-11-11 at 11 48 28

Showcaseパスワード保護設定、保護解除

Showcaseにパスワードかけたい場合、url に /private/ を入れる。逆のパターンもありえます、保護していたが、今はオープンにしたい場合、/private/ を取り除くだけ。例えば /showcase/private/hogehoge を、/showcase/hogehoge に編集して保存するだけでOK。

JRC-Screenshot 2024-11-11 at 11 51 32

フォルダーは関係無く、urlを編集すれだけで、OKです。プロジェクトルートにあるserve.tsが、確認してくれます。

JRC-Screenshot 2024-11-11 at 11 54 17

プライベート Showcase パスワード変更

パスワードを変更したい場合、Deno Deployの関数を変更するとできる。Deno Deployのプロジェクト開いて、Settings撰んで、Environment Variablesセクションの USER_1_PASS 変数を変更する。

Fontを変更したい

Google Fontなら/src/_includes/layouts/base.vto<head>のところで編集。 CSSクラスは/src/styles.cssで出来る。

トップNavの色変更したい

色んなやり方はあるが、Ventoテンプレートの使い方と見せる為に、サイトのデータに、変数として仕立てた。

Tachyons CSSに存在する色名であれば、この方法は行ける。サイトのデータは/src/_data.ymlに保存してあるので、その中のblueを例えばpurpledark-pinkにする:

site:
  ...
  navbgcolor: "blue"

どうやって使っているかと言うと、Vento Templateの /src/_includes/templates/nav.vto の所でVento特有の{{}}スタイルで呼べます。Lumeは/src/_data.ymlのDataを見ているから、例えば{{ site.navbgcolor }}で呼べる:

<nav class="db dt-l w-100 border-box pa3 ph5-l bg-{{site.navbgcolor}}">

例えば、Tachyonsの色じゃなくて、カスタムCSSクラスで行きたい場合は、当然Vento Templateの /src/_includes/templates/nav.vtoの、そのクラスを変更すればOK。クラスがjulie-primaryであれば:

<nav class="db dt-l w-100 border-box pa3 ph5-l julie-primary">

また、Lumeサイト設定を一つのところにしたい場合(例えば、サイトテンプレートを作って色んなお客様に提供したい場合)Lumeのサイトデータ/src/_data.ymlを使うと良い:

site:
  ...
  navbgcolor: "julie-primary"

とこれで行ける:

<nav class="db dt-l w-100 border-box pa3 ph5-l {{site.navbgcolor}}">

(Tachyonsじゃないからbg-を削除した)