3分鐘烹飪,使用 Deno 的 Lume CMS 快速建立部落格或網站

你好,我是無能。
我一直在關注 Deno,並且一直在尋找一個可以在簡單環境中實作的輕量級 CMS,然後我遇到了 LumeCMS。
因此,假設 Deno 已經安裝,我們來建立一個目錄。
mkdir newsite
然後,安裝 Lume。
deno run -A https://deno.land/x/lume/init.ts

現在,我想使用一個主題,所以選擇 'Install a theme',然後選擇 _config.ts。

然後選擇 'Simple Blog'。

好的,就這樣完成了。那麼,讓我們實際運行它吧。
deno task lume cms

然後訪問它...


哇,太快了...
然而,標準的上傳資料夾位於執行 deno task lume cms 的目錄 ./uploads 中,如果直接在部落格中以 Markdown 格式複製貼上,路徑會變成 ./_site/uploads,導致圖片路徑不正確而無法顯示圖片。
我認為這是因為其設計理念是讓 LumeCMS 也能在其他 SSG(如 Hugo)的環境中使用,所以才會有這樣的規格。

因此,打開 _config.ts 文件。
vim _config.ts
import lume from "lume/mod.ts";
import blog from "blog/mod.ts";
const site = lume();
site.use(blog());
// ここでuploadsフォルダにコピーするように
site.copy("uploads", "uploads");
export default site;
這樣,上傳到 ./uploads 的圖片就會被複製到 ./_site/uploads 資料夾,並且可以正常顯示。我這樣做是為了方便處理複製到 ./_site/uploads 的圖片(例如格式轉換),同時將原始文件保留在 ./uploads 中。
建立一篇測試文章後的目錄結構如下:
├── 404.md
├── _cms.ts
├── _config.ts
├── _data.yml
├── _site
│ ├── 404.html
│ ├── archive
│ │ └── index.html
│ ├── favicon.png
│ ├── feed.json
│ ├── feed.xml
│ ├── index.html
│ ├── js
│ │ ├── comments.js
│ │ └── main.js
│ ├── pagefind
│ │ ├── fragment
│ │ │ └── en_3551ff1.pf_fragment
│ │ ├── index
│ │ │ └── en_8fc6f26.pf_index
│ │ ├── pagefind-entry.json
│ │ ├── pagefind-highlight.js
│ │ ├── pagefind-modular-ui.css
│ │ ├── pagefind-modular-ui.js
│ │ ├── pagefind-ui.css
│ │ ├── pagefind-ui.js
│ │ ├── pagefind.en_7625ba4347.pf_meta
│ │ ├── pagefind.js
│ │ ├── wasm.en.pagefind
│ │ └── wasm.unknown.pagefind
│ ├── robots.txt
│ ├── sitemap.xml
│ ├── styles.css
│ ├── test
│ │ └── index.html
│ └── uploads
│ └── images-(2)-(9).jpeg
├── deno.json
├── deno.lock
├── favicon.png
├── posts
│ └── test.md
└── uploads
└── images-(2)-(9).jpeg
文章建立頁面看起來像這樣。

SSG 的弱點是無法從智慧型手機等裝置發布文章(雖然不是完全不可能),Markdown 雖然很容易撰寫,但從手機操作會很困難。現在,僅憑這個就能非常容易地完成這些操作了。
對我來說,這正是我所尋找的,所以我希望能夠將網站遷移過去。
關於從 WP 遷移到 SSG 的文章應該有很多。話雖如此,我通常只會在有動力的時候才動手做。
那麼。
期待再次合作。