關於靜態部落格
通常來講,建立個人部落格有2種方式:
第一,直接在第三方部落格平臺註冊部落格空間,如:部落格園,簡書,CSDN等,這種方式建立的部落格,所有資料都存放在部落格平臺。
第二,自建部落格系統,這種方式就是自己實現與部落格平臺相同的功能,需要涉及多個部分,如:購買雲主機,註冊域名,CDN,圖床等。
自建部落格系統也分為2種方式:
其一,使用傳統方式建立部落格系統,整個系統包含多個元件,如:資料庫,管理後臺,前臺部落格展示,有諸多非常優秀的開源方案可以選擇,如:Wordpress,Halo等等。由於前端部落格頁面是動態從資料庫查詢資料來渲染展示的,可以把這種傳統的部落格稱之為動態部落格。即:所有部落格相關的資料都儲存在資料庫中,對資料庫是強依賴。
其二,採用靜態部落格框架將靜態檔案(如:Markdown語法格式的檔案)轉換為HTML檔案,這樣可以直接將這些動態生成的HTML檔案佈署到Web伺服器即可,不需要依賴資料庫,當然也不需要管理後臺,所有部落格文章都是靜態檔案。目前已經有許多優秀的靜態部落格框架,如:Hugo,Hexo等等。把這種無需依賴資料庫系統,也不需要管理後臺建立的部落格稱為靜態部落格。
當然,所謂“動態部落格”和“靜態部落格”,他們各有利弊。相比較而演,動態部落格的使用門檻低,只需要關注寫部落格本身即可。而靜態部落格的搭建需要一定的程式設計技能基礎,但是定製非常靈活,資料管理和備份也非常方便。
環境準備
先安裝好Node.js,並配置使用淘寶映象源。
npm config set registry https://registry.npm.taobao.org
安裝Hexo
執行如下命令安裝Hexo:
npm install -g hexo-cli
初始化
執行如下命令初始化部落格:
# 初始化一個名稱為iblog的部落格目錄,將來所有關於部落格的引數設定,以及寫部落格文章都在該目錄下進行
hexo init iblog
cd iblog
npm install
完成上述操作後,在部落格資料夾下將會看到如下目錄結構:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
themes
目錄儲存主題相關的檔案,所有安裝的主題都儲存在該目錄下。
source
目錄儲存部落格文章靜態檔案,其中 _drafts
儲存草稿,_posts
儲存正式文章,這可以在新建資源時指定型別。
_config.yml
是部落格的全域性配置檔案(注:通常主題也會有一個名為 _config.yml
的配置檔案)。
至此,一個靜態部落格的基本基本雛形已經完成了,接下來則需要對部落格進行主題配置,並開始寫部落格文章了。
配置主題
主題決定了部落格的展示樣式和支援的功能。
安裝hexo-theme-3-hexo主題。
主題詳細配置:3-hexo使用說明 。
寫部落格
在部落格根目錄下執行如下命令新建一篇部落格:
hexo new post "這是第一篇靜態部落格文章"
生成靜態頁面
寫好文章後,在部落格根目錄下執行如下命令生成靜態頁面:
hexo generate
執行完上述命令之後,將會在部落格根目錄下生成一個名為 public
的目錄,該目錄儲存著動態生成的HTML檔案,將 public
目錄下的內容託管到nginx即可訪問。
在本地寫部落格時,可以在部落格根目錄下執行 hexo server
命令,啟動本地Web服務進行檢視。
一些常用的外掛
- hexo-deployer-rsync :透過rsync將本地生成的靜態檔案上傳到伺服器指定目錄,執行命令
hexo deploy
時呼叫該外掛 - hexo-deployer-git:將本地生成的靜態檔案上傳到指定git倉庫,執行命令
hexo deploy
時呼叫該外掛
如何搭建部落格編輯環境
靜態部落格本質上只是一個文字檔案,所以理論上只需要一個文字編輯器即可。但是為了方便除錯,最好還是在新的主機上安裝如下環境,會給寫部落格帶來比較好的體驗。
- 安裝Node.js並配置使用國內映象源(本站點使用的Node版本為
v16.15.1
) - 安裝Hexo框架
- 安裝一個順手的Markdown編輯器
- 安裝Git客戶端(將本地寫的部落格文章儲存到遠端Git倉庫)
每次寫新的部落格文章時,從git倉庫拉取最新的部落格資料,在部落格根目錄下執行如下命令安裝依賴:
npm install
在部落格根目錄下執行如下命令建立一篇新的部落格文章:
hexo new post "部落格文章標題"
編輯部落格文章並儲存
在部落格根目錄下執行命令:
# 簡寫:hexo s
hexo server
在本地啟動Hexo框架伺服器進行除錯預覽。
將新寫的部落格文章提交到git倉庫。
最後在部落格根目錄下執行如下命令將最新的部落格文章釋出到Web伺服器(本質:重新生成靜態檔案,並上傳到Web伺服器目錄)。
# 簡寫:hexo d
hexo deploy
Hexo常用命令
# 初始化部落格目錄
hexo init 部落格名稱
# 新建部落格文章:執行該命令後將會在部落格根目錄/source/_posts路徑下新建一個markdown檔案
# 編輯該markdown檔案即可
hexo new post '文章標題'
# 將markdown檔案轉換為html頁面(儲存到部落格根目錄/public路徑),將來佈署到web伺服器的是這些轉換後的html頁面
hexo generate
或
hexo g
# 啟動本地Web伺服器,預設啟動在4000埠,開啟瀏覽器即可看到整個部落格站點的所有文章
hexo server
或
hexo s
# 將部落格根目錄/public路徑下轉換生成的html頁面上傳到指定主機
# 這個功能需要先在部落格根目錄/_config.yml檔案配置佈署引數,如下示例將透過rsync將檔案上傳到指定伺服器目錄
# deploy:
# type: rsync
# host: 192.168.10.122
# user: zhangsan
# root: /data/www/html
hexo deploy
或
hexo d
# 清空部落格根目錄/public路徑下的所有資料
hexo clean
可以將上述命令寫一個指令碼中,方便呼叫。
如下指令碼示例可用於一鍵佈署最新部落格站點(deploy.sh):
#!/bin/bash
hexo clean
hexo g
hexo d