用 pelican + github 建立完全免費的 blog

二 11 11月 2014 by leafwind
178

pythonpelican-imagegithub

自從用了 logdown 之後,就非常喜歡 markdown 的寫作方式

html 實在不是給人寫的,那種事情給機器自動產生就好了

但 logdown 畢竟還是別人 host 的服務,功能就相對侷限

在原本我最愛的「拖拉上傳圖片」功能也變成付費之後

便開始找新的替代方案


其實 pelican + github 也不是什麼新的組合

google 一下就有很多文章教你怎麼裝

這篇只是記錄一下我的安裝過程

why pelican?

pelican 是一個網站內容產生工具,他的功能有:

  • 可以支援用 reStructuredText, Markdown, or AsciiDoc 等格式寫作
  • 產生完全靜態的頁面,可以放到任何空間
  • 佈景可以自訂(網路上也有很多樣板可以套用)
  • 支援 Atom/RSS feeds
  • 程式/語法 highlighting
  • 模組化的外掛系統以及外掛 repository 可供使用
  • 還有很多 feature...

缺點:

  • 過程中可能需要一點程式門檻 debug,但建置完環境之後就不需要

  • 對前端技術不熟的話,無法刻出像其他服務一樣 fancy 的介面,但至少比只能用內建主題的 logdown 比強大得多

why markdown?

對 coding 習慣的宅宅來說

使用 python / markdown / github 這些工具跟吃飯一樣

很多時候只是要記錄一些事情

但如果你想把有 code 的筆記貼到一般部落格服務

那不是腦袋有問題不知道有其他工具就是時間太多耐心過於常人

html 很簡單但排版非常費工

makrdown 只需要記比 html 還要少的語法,卻能大大提昇排版準確度

生命,就不應該浪費在不必要的排版上

並且支援嵌入許多程式語法


另一個好處是 markdown 本身就是原始碼

不像 html 備份的時候會遇到一大堆格式轉換問題

(只有偶爾會有小問題)

但基本上把文章備份在 dropbox 之類的地方

完全不會怕哪天服務倒閉

那就從第一步開始吧!

python environment

首先要有一個 python 環境

linux:

不要跟我說你沒有 python,自己想辦法

windows:

推薦裝 anaconda

只要下載整個執行檔裝完就有 iPython / pip 等等環境,也不用設 path

對於不常在 windows 上開發 python 程式的使用者來說

這種懶人包已經很夠用了

安裝 python 必要套件

一開始只需要兩個 package

如果你不想用 markdown 寫 blog 的話甚至只要裝 pelican 就好

pip install markdown pelican

隨機支線任務:

通常中文的 windows 會卡在 pelican 編譯不過

在我浪費了一個美好的假日下午之後

終於發現直接 compile source code 才是正解..

getpelican 下載原始碼然後切到資料夾裡面:

python setup.py install

blog 資料夾結構

先建立一個 blog 資料夾,然後下指令讓 pelican 自動產生其他所需的檔案

mkdir blog; cd blog
pelican-quickstart

過程中不清楚的可以先用預設值就好,之後再改

現在 blog 資料夾底下會有一個 content 放文章原始檔

另外 output 則是放產生出來的網頁檔

linking with github

先把 github 的文章 clone 下來:

cd output
git clone git@github.com:username/username.github.io.git

再設定 pelican 輸出到 github 資料夾 pelicanconf.py add:

OUTPUT_PATH = 'output/username.github.io/'

這樣就把 github 連接好了

接下來只要在 content 裡面寫一篇 xxx.md 的文章:

Title: My super title
Date: 2010-12-03 10:20
Modified: 2010-12-05 19:30
Category: Python
Tags: pelican, publishing
Slug: my-super-post
Authors: Alexis Metaireau, Conan Doyle
Summary: Short version for index and feeds

This is the content of my super blog post.

在 anaconda command prompt 執行 pelican

然後再 push 到 github 上面

你的 blog 就會出現在 http://username.github.io/

(如果用 linux 的話更方便,可以寫在一個 makefile 裡面)

到這裡一個基本的 blog 架構就有了,接下來是其他附加的功能

安裝主題

借用 jsliang 製作的 pelican-fresh

responsive layout 感覺就很厲害(拼命縮放視窗中)

git clone https://github.com/jsliang/pelican-fresh.git
cd pelican-fresh
pelican-themes -i pelican-fresh # theme dir name

再套用設定到 pelicanconf.py:

THEME = 'pelican-fresh'

安裝 ShareThis script

  • pelicanconf.py 加上:
SHARETHIS_PUB_KEY = '你的 ShareThis key'
  • base.html <head> 裡加上:
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
    stLight.options({
        publisher: "{{ SHARETHIS_PUB_KEY }}",
        doNotHash: false,
        doNotCopy: false,
        hashAddressBar: false
    });
</script>
  • article.html

<div>{{ article.content }}</div> 之前(或其他想要放的地方)加上:

{% if SHARETHIS_PUB_KEY %}
<div class="sharethis-top">
    <span class='st_fblike_hcount' displayText='Facebook Like'></span>
    <span class='st_plusone_hcount' displayText='Google +1'></span>
    <span class='st_twitter_hcount' displayText='Tweet'></span>
</div>
{% endif %}

其他主題

後來發現還有好多 theme 可以用,大部分也都是 responsive

git clone https://github.com/getpelican/pelican-themes

其中 gum, pelican-bootstrap3, tuxlite_tbs 是我比較喜歡的

  • gum

gum

  • pelican-bootstrap3

pelican-bootstrap3

  • tuxlite_tbs: (目前使用)

tuxlite_tbs

Disqus

有了 disqus 就等於有了跨站的留言系統,非常方便

Disqus

Admin -> Settings ->Your website's shortname is XXX

pelicanconf.py:

DISQUS_SITENAME = 'shortname'

Google Analytics

暫時用不到,不過還是先設定好放著

pelicanconf.py:

GOOGLE_ANALYTICS = 'UA-XXXXXXXX-X'

Summary Plugin

由於 pelican 預設會把文章前 N 個字當做 summary 放在首頁

(也就是「繼續閱讀」之前的那些文字)

很多時候最前面的文字並不一定最適合當 summary

因此有人寫了一個套件可以自訂 summary 的段落

先到 這裡 下載

pelicanconf.py 加入:

PLUGIN_PATHS = ['pelican-plugins']
PLUGINS = ['summary']

之後文章只要這樣寫:

Title: My super title
Date: 2010-12-03 10:20
Tags: thats, awesome
Category: yeah
Slug: my-super-post
Author: Alexis Metaireau

Hahaha

These lines

Are

No meaning

<!-- PELICAN_BEGIN_SUMMARY -->
This is the content of my super blog post.
<!-- PELICAN_END_SUMMARY -->
and this content occurs after the summary.

就會把夾在中間的文字自動當做 summary,非常好用

Google adsense

這其實跟 pelican 功能無關,但既然是架站就順便一下

通常在任何 theme 的 templates/base.html

裡面加上你的 adsense 程式碼即可

譬如我要加在側邊欄,就加到 nav-list object 裡面

Sublime Plugin

由於每次寫文章都要手動新增 metadata 很麻煩

jsliang 也做了一個套件叫 sublime-pelican

這樣可以讓新增文章的過程更便利

一個好用的編輯器

markdown 好用歸好用

但還是需要一個所見即所得的編輯器

在 mac 可以使用 macdown,這樣會輕鬆許多

另外語法部分可以參考:

[makrdown syntax for pelican] (http://sourceforge.net/p/pelican-edt/wiki/markdown_syntax/)

網頁樣板(template)設定

title

有些主題預設不會把文章標題放在視窗標題,也就是 <title> 標籤

首先到 theme 的 base.html 裡面找到這行

<title>{% block windowtitle %}{{ SITENAME }}{% endblock %}</title>

看到 <title> 後面用的是 windowtitle,記下來

再到 article.html 把前三行改成:

{% extends "base.html" %}
{% block windowtitle %}{{ article.title|striptags }} - {{ SITENAME }}{% endblock %}
{% block content %}

short icon

base.html 裡面找到 <head> 加入:

<link rel="shortcut icon" href="http://launchyard.com/images/favicon.png"/>

Comments