使用 Statiq 在Github Page 部屬靜態部落格網站 1 建立專案 使用 Statiq 在Github Page 部屬靜態部落格網站、建立新專案、套用Clean Bolg主題

Published on Tuesday, February 7, 2023

Statiq Web

Statiq 是一個主打靜態生成的平台,

目前的Statiq平台旗下有推出三個產品

  • Statiq Framework 是Statiq運作的核心,由Wyam改進而來的,使用的是MIT Licence
  • Statiq Web 依賴Statiq Framework所打造的靜態網頁產生器。
  • Statiq Docs 依賴Statiq Framework所打造的靜態文檔產生器。

要注意Statiq Web、Statiq Docs如果是商業用途需要跟作者購買使用憑證,詳細請看FAQ

在此篇文章我會利用Statiq Web來快速打造一個Blog

Step 1 安裝.Net SDK:

在此篇文章使用的SDK版本是7.0.102,還沒有安裝SDK的人可以在微軟官方下載

Step 2 建立一個新的console專案與安裝Statiq.Web:

dotnet new console --name MyBlog
cd MyBlog
dotnet add package Statiq.Web --version 1.0.0-beta.54

這邊要注意Statiq.Web目前還是Beta版本,用介面安裝需要勾選pre-release才能看到此Package

Step 3 :

此處使用的是Minimal API並且有開啟ImplicitUsings,複製以下程式並貼上到Program.cs

await Bootstrapper
    .Factory
    .CreateWeb(args)
    .RunAsync();

Step 4 :

接下來準備文章內容,先建立一個input資料夾與index.md 注意必須使用input不可更換

mkdir input
cd input
touch index.md

Step 5 :

修改index.md內容,此文檔會被轉換成我們的首頁index.html

Title: My First Statiq page
---
# Hello World!

Hello from my first Statiq page.

Step 6 :

#將會根據input資料夾產生output資料夾並且把文檔轉換成html格式
dotnet run

#會根據output資料夾的內容開啟一個web server並且支援live reload
# http://localhost:5080
dotnet run preview

至此我們已經成功建立了一個靜態內容產生器,並且成功的將markdown格式的文件轉換成Html格式, 我們可以直接將output文件部屬到伺服器上就能快速地製作出我們第一個網頁了,接下來我會安裝主題模組讓網站更像一個Blog。


Web Theme

目前我們的網站只有第一個頁面並且沒有樣式,離被稱為Blog還差很遠,但還好官方已經有提共了基礎的Blog樣式可以直接套用

Statiq Clean Blog

這是作者根據Bootstrap Clean Blog所打造的模組, 我們這邊直接將此模組下載下來

git clone https://github.com/statiqdev/CleanBlog.git theme

這邊需要注意樣式的資料夾名稱需要是theme StatiqGithubPage-ThemeTree

可以看出作者建立了razor模板來添加額外的css樣式
我們直接將專案運行起來看看

dotnet run preview
http://localhost:5080
StatiqGithubPage-FirstFrontPage

Summary

很明顯的框架在背後幫我們處理了很多的事情,但是有關部落格的功能好像都沒有出現,下一篇繼續

可以在Github Repo查看今天的進度