Menu

Why Pelican?

主要的原因是我是寫python起家的,如此親切的東西怎麼能不用呢?(其實是懶啦,不論是設計主題或是套用模板等都要打一堆東西好累😂)

總之,Pelican是一個用python寫的靜態網頁生成器,可以幫我們把markdown file、reStructedText、甚至是jupyter notebook轉成靜態的HTML文檔案(是不是非常方便),而且靜態網頁的優點就是我們不需要網站伺服器或是建立資料庫管理建立資料庫管理內容,可以把HTML檔案host在想要的地方,像是Github Pages。而除了上述優點外,選擇Pelican的因素還有以下幾點:

  • Pelican很容易客製化
  • 主題是使用Jinja2模組建立,自由度高

如果有類似需求,那麼恭喜你,你來對地方了。本篇將會詳細介紹如何使用Pelican建立屬於自己的部落格(或網站)

Let’s Start! 🎉


Initial Setup

首先,我們可以按照Pelican’s Quickstart的步驟,進行初始化的步驟。

在預先建立好的虛擬環境(pyenv或anaconda之類的)下安裝Pelican並執行

mkdir TheNewBlog
cd TheNewBlog
pelican-quickstart

這邊我先設定成只在本地端執行,所以先不探討要用哪種途徑部署網頁。若想了解如何使用Github Pages公開,可以跳至Deployment查看。

> Where do you want to create your new web site? [.] 
> What will be the title of this web site? BenKiller
> Who will be the author of this web site? Benjamin Chen
> What will be the default language of this web site? [en] 
> Do you want to specify a URL prefix? e.g., https://example.com   (Y/n) n
> Do you want to enable article pagination? (Y/n) 
> How many articles per page do you want? [10] 3
> What is your time zone? [Europe/Paris] Asia/Taipei
> Do you want to generate a tasks.py/Makefile to automate generation and publishing? (Y/n) 
> Do you want to upload your website using FTP? (y/N) 
> Do you want to upload your website using SSH? (y/N) 
> Do you want to upload your website using Dropbox? (y/N) 
> Do you want to upload your website using S3? (y/N) 
> Do you want to upload your website using Rackspace Cloud Files? (y/N) 
> Do you want to upload your website using GitHub Pages? (y/N) 
Done. Your new project is available at /home/leo/devel/BenKiller

接著,執行pelican -lr便會開通默認的本地端網址http://127.0.0.1:8000,於任意網頁瀏覽器訪問此網址將可看到使用默認主題呈現之部落格首頁。


Demo Content

在我們開始認識如何使用Jinja2模組,我們先製作一些demo。這邊我準備了一個腳本檔,各位可以在終端機執行

#!/bin/bash

NUM_POSTS=10
CONTENT_DIR=content
LOREM_API=https://jaspervdj.be/lorem-markdownum/markdown.txt
IMAGES_API=https://placeimg.com/1000/341/animals

rm -fR content
mkdir -p content/images

for i in $(seq -w 1 ${NUM_POSTS})
do
    post_file=${CONTENT_DIR}/post${i}.md

    echo "Creating post ${i}"
    echo "Title: A sample article ${i}" >> ${post_file}
    echo "Date: 2023-04-${i}" >> ${post_file}
    echo "Category: News" >> ${post_file}
    echo "Tags: $(seq 1 20 | sort -R | head -n3 | sed -r s,"^","tag", | paste -sd "," -)" >> ${post_file}
    echo "Image: post${i}.jpg" >> ${post_file}
    echo "Summary: Summary of post ${i}" >> ${post_file}
    echo >> ${post_file}

    curl -s ${LOREM_API} | sed -r s,"^#","##", >> ${post_file}

    curl -s ${IMAGES_API} > ${CONTENT_DIR}/images/post${i}.jpg
done

將此腳本檔存為create_content.sh並使用chmod 775 create_content.sh賦予其執行權限,此時便可以使用./create_content.sh執行此腳本檔,這將會創建10個markdown檔案以及對應的圖像(補充:可以無限次的執行此檔案,該行rm -fR content會刪除以前的輸出結果)

若各位了解bash語法,請隨意修改腳本來進行客製化。現在讓我們帶著這些產生之markdown檔,移到下一步吧。


The Template

這邊我會廣泛使用https://docs.getpelican.com/en/latest/themes.html#creating-themes上的文件,按個人使用上方便與否再選擇需不需要開啟這個頁面一併閱讀。

以下教學我會使用本部落格所套用之主題”Hola進行演示,想使用該主題者可以自行至網頁下載,當然,若不吝嗇給予此主題作者支持,可以幫作者點個讚👍🏻、分享➦或是給予署名費用💸

在深入文章核心前,我們先快速查看一下該模板。我們可以在畫面頂部看到一個導覽列,包括連到主頁的鏈結、幾個特定頁面的鏈結。而點開主頁首先映入眼簾的是覆蓋整個頁面的人像背景以及簡短四行的介紹,另外還有兩個按鈕,另外還有兩個按鈕可以跳至下方內容。頁面右側有部落格主任之社群鏈結之圖示。接著往下看,依序可以看到介紹區塊,介紹該部落格以及具備些技術;工作經驗,一一顯現做過哪些工作;Portfolio,分享近期做過的專案;What people said,呈現各方對網頁的評論與意見;日誌,呈現近期的文章鏈結與大綱;達成數目,顯現各種已達成之數目;聯絡,包含聯絡資訊與寄送表單。該主題模板還包含其他頁面,這邊就不做介紹。

大致上瀏覽過後,就可以開始著手進行修改。首先,按照Pelican’s requirements的規則,將主題檔案目錄的佈局更改為:

mkdir static
mv inc/ static/
mv js/ static/
mv css/ static/
mv fonts/ static/
mv images/ static/
mkdir templates
mv *.html templates/

接著,編輯位在部落格的檔案根目錄的pelicanconf.py

PATH = 'content'

THEME = "Hola"

TIMEZONE = "Asia/Taipei"

DEFAULT_LANG = 'en'

現在讓我們刷新一下部落格頁面吧~

欸~是不是不如預期那般顯示精美的畫面?不用擔心,pelican仍然有正常運行,會出現此現象是因為我們正在使用Hola/templates/index.html覆蓋pelican的輸出,而pelican是使用Jinja模組運行的,因此單純的HTML&CSS&JS模板,僅能匯出靜態內容,需要借助Jinja使自定義模板與CSS/JS資源能正確加載。

讓我們來學習第一個語法吧。將各個路徑更改為{{ SITEURL }}/theme/,這樣我們至少可以有一個好的輸出可以瀏覽。

<!DOCTYPE html>
<!--[if lt IE 9 ]><html class="no-js oldie" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

        <head>

            <!--- basic page needs
            ================================================== -->
                <meta charset="utf-8">
            <title>Hola</title>
            <meta name="description" content="">
            <meta name="author" content="">

            <!-- mobile specific metas
            ================================================== -->
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- CSS
            ================================================== -->
            <link rel="stylesheet" href="{{ SITEURL }}/theme/css/base.css">
            <link rel="stylesheet" href="{{ SITEURL }}/theme/css/vendor.css">
            <link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">

            <!-- script
            ================================================== -->
            <script src="{{ SITEURL }}/theme/js/modernizr.js"></script>
            <script src="{{ SITEURL }}/theme/js/pace.min.js"></script>

            <!-- favicons
            ================================================== -->
            <link rel="shortcut icon" href="favicon.ico" type="{{ SITEURL }}/theme/image/x-icon">
            <link rel="icon" href="favicon.ico" type="{{ SITEURL }}/theme/image/x-icon">

        </head>

[...]

        <!-- Java Script
    ================================================== -->
    <script src="{{ SITEURL }}/theme/js/jquery-3.2.1.min.js"></script>
    <script src="{{ SITEURL }}/theme/js/plugins.js"></script>
    <script src="{{ SITEURL }}/theme/js/main.js"></script>

</body>

</html>

當然也要將所有出現的images/改為{{ SITEURL }}/theme/images

這個時候就能在畫面上看到完整的主題內容了🎉

至於{{ SITEURL }}/theme/images是如何運作的?在Pelican的Documentation on themes提及,

THEME_STATIC_DIR = ‘theme’

Destination directory in the output path where Pelican will place the files collected from THEME STATIC PATHS. Default is theme.

變數THEME_STATIC_PATHS的default為static,這就是為什麼我們在一開始創建了那個目錄的原因。而正如各位所看到的,所有的這些路徑都是可自由配置的,如果各位有自己的習慣風格,可以自行更改喔。


Pelican Variables

正如前面所提到的,我們目前正在嘗試使用現成的靜態模板覆蓋pelican的輸出,而我們需要做的是將pelican能理解的“值”寫進模板當中,無論是靜態變量還是動態的項目如文章、標籤與圖像等等。

Jinja2即是讓pelican的自由度非常高隻手要功臣,這是一個用python編寫並廣泛被使用的模板開發引擎,如果想要完全了解如何創建pelican主題,那麼學習jinja必不可少。好在jinja並不難,要掌握它並非難事。實際上,前面所使用的pelicanconf.py與 prefixed links {{ SITEURL }}便已經使用到pelican’s variables 與 jinja模板了。

那麼接下來,就讓我們一起認識一下pelican有哪些常用的變數吧

Note! 若想更詳細的了解Jinja或有任何疑問,可以查閱 Jinja documentation

Title


Article Page

Blog Page

Next/Previous Page

Deployment

Message Board

Mailing Form

Google Analytics

Search Engine Optimisation