每個Geek對摺騰自己的部落格都有著一份執念
背景介紹
曾經多次在不同的平臺寫部落格，但全部都以失敗而告終。去年七月選擇微信公眾號做為平臺開始了又一次的技術分享，慶幸一直堅持到現在，但隨著文章發表的越來越多，發現公眾號對於PC端很不友好，文章列表沒有PC端入口，檢視分享很不方便，所以就利用github pages搭建了一個【運維咖啡吧】的網站，分類展示公眾號內發表的所有文章以及一些未在公眾號發表的瑣碎內容
為了追求極速的瀏覽體驗，整個網站採用純靜態的方式構建，這裡的靜態並不是像Jekyll或者Hexo之類的靜態部落格框架，而是手寫HTML，頁面少的時候還能應對，但隨著頁面越來越多，維護這些內容就成了災難，好在對Django比較熟悉，於是便動手寫了這麼一個靜態部落格頁面生成工具
主要功能
網站非常簡單，只有三類頁面，主頁、文章列表頁和文章詳情頁
- 主頁用來分類展示公眾號內的文章列表
- 文章列表頁用來展示網站內文章（一些瑣碎的未在公眾號發表的文章）的列表
- 文章詳情頁用來展示具體文章的內容
基於以上的內容分析，其實只需要做兩個後臺頁面，包含幾個小功能，畫個思維導圖
首頁為什麼要去讀取JSON檔案呢？主要是因為運維咖啡吧的小程式也同時依賴這個JSON檔案，修改一個地方避免維護多份資料
最終實現的效果如下圖
接下來介紹下實現這些功能用到的技術或元件
所用技術
讀取及寫入檔案
from django.conf import settings
class FileRun:
def __init__(self):
self.file = settings.BASE_DIR + '/ops_coffee/backends/blog.json'
def read(self):
try:
with open(self.file, 'r', encoding='utf8') as f:
return True, f.read()
except Exception as e:
return False, str(e)
def write(self, content):
try:
with open(self.file, 'w', encoding='utf8') as f:
return True, f.write(content)
except Exception as e:
return False, str(e)讀取及寫入檔案的操作與Django的View沒有太大的關係，所以這裡我用了一個單獨的類來處理，解釋下其中的四個用法
本地檔案路徑不要硬編碼到程式碼中，儘量採用
settings.BASE_DIR相對路徑，或者直接將路徑以變數的形式寫入到settings檔案，例如我們後邊要說的生成本地檔案的目錄就直接在settings中新增了一個變數OPS_COFFEE_GIT_DIR每個方法返回兩個引數狀態和資料
return True,data，這樣在呼叫這個方法的時候就可以很方便的判斷出來這個方法是執行成功還是失敗，例如如下程式碼
state, data = FileRun().read()
if state:
return(data)讀取檔案使用
with方法可以在你讀取結束後自動執行f.close()關閉檔案，避免因開啟檔案過多造成的資源消耗使用try來避免程式直接拋錯，有錯誤處理機制
JSON格式化
為了展示好看且能實現語法錯誤提示，採用了jsoneditor外掛，這是一個前端的外掛，使用非常簡單
<div class="col-sm-12" id="jsoneditor" style="height:620px"></div><script src="/static/js/jsoneditor.min.js"></script>
<script>
// create the editor
var container = document.getElementById("jsoneditor");
var editor = new JSONEditor(container, {
mode: 'code'
});
// set json
editor.set({{ data|safe }});
</script>JSON Editor 可以用來檢視、編輯、格式化和驗證JSON，支援多種模式，例如tree、code、text，當為tree模式時顯示樹狀結構，當為text時顯示純文字，我們這裡採用了code模式有行號和顏色，看起來更美觀
safe django從view向template傳遞HTML資料的時候，為了防止html中包含惡意攻擊的程式碼django預設不會渲染HTML，所以需要在template接收到html資料後新增|safe進行渲染
生成HTML
觀察會發現整個網站裡所有的頁面除了中間的內容區域之外，其他的地方都一樣，所以我們只需要考慮替換中間的內容就可以了，實際上為了SEO等我們還需要替換title等資料
替換內容生成html檔案這裡使用了jinja2，我有嘗試直接用django的template來渲染，但最終有一些編碼問題沒有解決，還是採用了jinja2，程式碼如下
from jinja2 import Template
from django.conf import settings
tmpl = """<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="theme-color" content="#2879d0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/css/style.min.css" media="screen" type="text/css" />
<title>{{ title }}</title>
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
</head>
<body>
<header>
<div class="inner">
<a href="https://ops-coffee.cn/">
<h1>運維咖啡吧</h1>
</a>
<h2>追求技術的道路上，我從不曾停下腳步</h2>
</div>
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
{% if havet %}
<h1 id="art-title">{{ title }}</h1>
{% endif %}
{{ content }}
</section>
<aside id="sidebar">
<blockquote class="route">微信公眾號</blockquote>
<img border="0" src="/images/z-qrcode.jpg" width="100%" height="100%" alt="ops-coffee" />
<blockquote class="route">歸檔列表</blockquote>
<div class="sidebar-list"><a href="/"> 精選文章列表</a></div>
<div class="sidebar-list"><a href="/s/"> 日常運維記錄</a></div>
</aside>
</div>
</div>
</body>
</html>
"""
kwargs = {
"havet": 0,
"title": "運維咖啡吧",
"description": "追求技術的道路上，我從不曾停下腳步",
"content": content
}
_content = Template(tmpl).render(kwargs)
with open(self.blogDir + '/index.html', 'w', encoding='utf8') as f:
f.write(_content)tmpl 定義了一個模版，模版內可以使用諸如{{ title }}這樣的變數或是{% if havet %}這樣的語法
kwargs 定義了一個字典，字典的內容用來替換模版中的變數，字典的key值與模版裡邊的變數做匹配，匹配到了就用字典的value填充模版
**_content** 就是最終html的內容，Template(tmpl).render(kwargs)會將kwargs的每個key值與模版中的變數做替換
最後會將html內容寫入到html檔案
上傳GitHub
網站使用github pages搭建，最後需要將生成的html檔案上傳到github，這裡我們使用了gitpython庫，gitpython庫的用法跟原生git的命令非常像，只是命令中間以.連線
最佳的自動上傳步驟應該是：
- 本地生成ssh金鑰，並將公鑰上傳至github，實現本機與ssh之間的無密碼上傳下載
- 本地建立網站目錄，這個目錄需要跟settings裡邊的
OPS_COFFEE_GIT_DIR變數一致，方便直接將html檔案生成在這個目錄下 - 進入網站目錄並使用
git clone拉取github上的程式碼，注意這裡應選擇ssh協議的url，例如：git clone git@github.com:ops-coffee/demo.git .，且確定無需輸入賬號密碼即可拉取 - 然後就可以使用以下程式實現自動上傳更新到github了，也就是在跑本文所講的這個生成工具之前需要先做好以上三步
from git import Repo
from django.conf import settings
class GitRun:
def __init__(self):
self.repo = Repo(settings.OPS_COFFEE_GIT_DIR)
def push(self):
try:
self.repo.git.add(A=True)
self.repo.index.commit('ops-coffee')
self.repo.remote(name='origin').push()
return True, True
except Exception as e:
return False, str(e)Repo() 選擇已有的git倉庫
git.add 新增本地修改到暫存區，A=True新增到暫存區時包含刪除檔案的修改
index.commit 提交修改到本地倉庫，我這裡比較粗糙，統一使用ops-coffee做為log
repo.remote().push() 選擇遠端分支並提交，name參數列示遠端分支的名字
登陸登出
雖然是個簡單的個人系統，但最基本的使用者認證還是要有的，沒有用Django預設的admin頁面，但還想使用django提供的auth系統實現登陸登出的話，可以採用下邊這種方式
from django.urls import path
from django.contrib.auth.views import LoginView, LogoutView
urlpatterns = [
path('login', LoginView.as_view(template_name='login.html'), name='login-url'),
path('logout', LogoutView.as_view(template_name='login.html'), name='logout-url'),
]從django.contrib.auth.views下匯入LoginView和LogoutView，然後寫兩條url並指定自己的模版位置就可以使用django的登陸登出功能了，這在一些需要簡單認證的系統中非常方便
寫在最後
不斷折騰的過程才是成長最快的過程，用技術來解決實際的問題是對技術最好的應用
如果你對本篇文章的完整原始碼感興趣，可以在微信公眾號後臺回覆“05”獲取，當然也非常歡迎加我個人微信一起學習交流
相關文章推薦閱讀：