Written by Marvin Hsu
on April 10, 2022

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

@kaitlynbaker on Unsplash

Zola是一款靜態網頁生成器，可以用Markdown語法編輯，官方表示可以忽略相依性的問題，彈性而且建置極快。當初選擇使用他是因為基於rust開發 ~~用下去後才發現不用會XD~~，這篇文章會大略介紹一下怎麼快速建一個靜態網站，之後會再慢慢介紹細部設定還有一些概念，如何使用官方提供的Github action完成佈署。目前用一個有點迂迴的方式透過fleek佈署到IPFS，還在嘗試用docker完成整個CI流程。

安裝Zola

請參考官方文件installation，windows的話需要透過套件管理工具Scoop或是Chocolatey，我個人習慣用Chocolatey，如果還沒有安裝請打開PowerShell輸入安裝指令:

$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

安裝完成後輸入指令

$ choco install zola

初始化Zola專案

在PowerShell中移動到要放專案，建議先建立好Git，這會影響到之後套用模版

$ git init

初始化專案

## 直接初始化專案
$ zola init
## 將專案放到指定資料夾中
$ zola init src

接下來會顯示以下訊息，除非有特別需要不然不用設定，如果已經確定之後的域名建議還是設定一下，不然容易有問題

Welcome to Zola!
Please answer a few questions to get started quickly.
Any choices made can be changed by modifying the `config.toml` file later.
// 設定域名
> What is the URL of your site? (https://example.com):
// 是否支援Sass
> Do you want to enable Sass compilation? [Y/n]:
// 是否支援語法突顯
> Do you want to enable syntax highlighting? [y/N]:
// 是否建立內容查詢用的index
> Do you want to build a search index of the content? [y/N]:

跑完之後專案就建好了，可以看到專案結構大概長這樣

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

config.toml : 專案屬性的設定檔
content : 之後網站的實際內容都會存成.md檔放在這邊
templates : 用來設定網站的模板
themes : 放網站主題的地方
sass/static : 放一些靜態資源

接下來可以先開啟serve預覽

$ zola serve

如果沒有其他錯誤訊息，打開瀏覽器，預設的本機地址是http://127.0.0.1:1111/ 因為什麼都還沒建立所以會看到錯誤畫面

sample

套用主題

接下來需要設定頁面還有模板，Zola使用Tera管理網站模板，這次就先不介紹。如果要快速產出有模有樣詐騙的網站的話可以先套用主題，選擇不多，我自己是選擇tale-zola。請在最底層的資料夾(跟Config.toml同一層)輸入以下指令

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

submodule是將主題作為子專案加入主專案的git參考，這樣一來如果主題有更新的話就會被包含到主專案，如果一開始沒有先執行Git初始化的話就會出現以下訊息

fatal: not a git repository (or any of the parent directories): .git

如果執行成功的話請打開config.toml加入theme="tale-zola"指定剛剛抓下來的主題

// The URL the site will be built for
base_url = "https://example.com"

//指定主題的名稱
theme="tale-zola"

// 下略

這時候應該就可以顯示出套用了主題的網站了

sample

Top