使用 Zola 架設部落格

前言#

• 第一聽到 Zola 是從 PJW 的 Pin 起來改版了！從 Wordpress 搬家到 Zola！
• 而 PJW 使用 Zola 的契機是 owen 的迁移博客和 Wiki 到 Zola 後；其樣板改自 owen 的 source code

如何使用 Zola 建構網頁#

流程分為三個步驟：建置專案、套用主題、佈署網頁 (參考自 [Zola] 開始架自己的部落格-使用 Zola 建置專案)

建置 Zola 專案#

refer to getting-started

1. $ scoop install zola
2. $ zola init myblog (將專案放置指定資料夾 myblog)

初始化完會有以下資料夾結構

├── config.toml
├── content
├── sass
├── static
├── templates
└── themes

• config.toml: 專案屬性的設定檔
• content: 網站的實際內容都會存成 .md 檔放在這邊
• sass: 專案的 SASS 樣式檔
• static: 靜態資源，e.g., 圖檔
• templates: 設定網站模板
• themes: 網站主題

實際使用結果

├── config.toml
├── content/
│   └── blog/
│       ├── _index.md
│       ├── first.md
│       └── second.md
├── sass/
├── static/
├── templates/
│   ├── base.html
│   ├── blog-page.html
│   ├── blog.html
│   └── index.html
└── themes/

Theme: 套用主題#

主題採用 serene 並複製 The Data Quarry 的設定。

• 將主題的相關檔案放到本地端並根據自己的需求修改
• 或是使用 git submodule 套用主題，好處是主題有更新會自動套用

git submodule 的使用方式如下：

1. 使用 git submodule 套用主題，後續主題有更新可直接使用

   # git submodule add [url] themes/tale-zola
   # [url] 是該主題的 Repository 來源
   $ git submodule add [email protected]:aaranxu/tale-zola.git themes/tale-zola
   

2. 設定 config.toml

   // The URL the site will be built for
   base_url = "https://example.com"
   
   //指定主題的名稱
   theme="tale-zola"
   

Reference:

1. https://serene-demo.pages.dev/
2. https://getzola.github.io/even/
3. https://tale-zola.netlify.app/
4. https://schoenenberg.github.io/zola-paper/
5. https://cydave.github.io/zola-theme-papermod/
6. https://deepthought-theme.netlify.app/

Deployment: 佈署網頁#

我將網頁佈署在 Cloudflare Pages

Refer to

• Giovanni Dejan: https://blog.devgenius.io/i-made-my-website-with-zola-but-should-you-bb723fc26e45
• Cloudflare: Deploying Zola with Cloudflare Pages
• Zola: Deployment to Clousflare Pages

參考資料#

• I Made My Website with Zola — But Should You? | by Giovanni Dejan

• Overview | Zola

• Hello World | Blog (funcxiao.wang)

  1. Build local project

     # 创建文件夹 myblog，Git 初始化并新建 zola 项目
     $ git init && zola init
     # 添加 Float 主题，作为 Git 子模块加入
     $ git submodule add https://gitlab.com/float-theme/float.git themes/float
     

  2. 發布 最简单的办法就是编写一份 ++netlify.toml++，这样在 netlify 网站中添加 github 仓库后，每次本地写完了推送到 github 上，netlify 就会拉过去使用配置文件中指定版本的的 zola 来生成静态网页并部署在 netlify 上

• PZY | 本站成功搬迁到 Zola

• [Zola] 開始架自己的部落格-使用 Zola 建置專案

• Zola 静态博客快速指南

• 靜態網站產生器 Zola