又一個網站重建

此帖子由人工智能翻译，并仅通过反向翻译进行了表面检查。

再次開創先河...

自從我上次更新我的網站以來已經過了一段時間。我在不同的配置中跳來跳去。有一段時間我使用了 Hugo Academic，然後我轉向了 Bay，在那裡我坐了一段時間沒有碰任何東西。在某個時候，我在玩 Flask，但從未完全投入其中。隨著我接近博士學位的結束，我認為是時候將我的網站更新為更現代的版本，並開始實際發布一些真實的內容。

在這樣做的過程中，我提出了一些我想要滿足的標準：

首先，我想要一些已經建設良好且具有現代功能的東西。我在之前的網站上遇到的主要困難之一是缺少一些必要的功能，比如響應式佈局、明暗主題和搜索欄。我還想要一個好看的美學。這在免費模板中驚人地難以找到——大多數免費模板看起來過時、像黑客一樣，或者不適合個人網站。

其次，我想要一些我能理解大部分後端代碼的東西。我可以處理 JavaScript、HTML 和 CSS，但我對它們都不是專家。作為一名跨學科的生物學家，我大部分編程時間都在使用 R 和 Python 進行腳本和命令行工具的工作，儘管我也自學了 Rust，只是為了掌握一門低級語言。Hugo 是用 Go 寫的，而 Jekyll 是用 Ruby 寫的。一旦你掌握了一種語言，你就可以學習其他語言；然而，我不想讓我的個人網站變成一個龐大的編碼項目。目標是擁有一個簡單的網站，讓我可以隨意發表我的想法，並可能為其他人提供學習資源。通過使用我已經熟悉的語言，我可以快速查看代碼，以便添加我需要的任何功能或找出我遇到的問題的解決方法。

第三，我想要一個攻擊面小的選擇。WordPress 是一個不錯的低代碼網站建設方式，但它以容易受到攻擊而聞名。如果目的是建立一個低維護的網站，我不想擔心它運行的伺服器的安全性。如果我從頭開始通過像 Flask 這樣的動態框架組建自己的網站，這些問題依然存在。雖然擁有可視化編輯器和動態內容會很好，但我覺得僅僅使用一個穩固的 Markdown 框架就能獲得很多好處。我想要的任何動態功能可能都可以通過玩弄 JavaScript 來添加。如果這還不夠，我總是可以重定向到子域上的動態網站。

設置堆棧

Zola - 一個功能豐富的靜態網站生成器

Zola 符合我所有的需求。它是用 Rust 編寫的，這是一種我已經熟悉的語言。它也是一個靜態網站生成器，這意味著它不需要數據庫或伺服器來運行。雖然它的採用率似乎低於 Hugo、Jekyll 或其他主要解決方案，但我發現已經有一些不錯的主題適應了它。我最終使用了 Blow

Zola 還帶有一些我在其他靜態網站生成器中沒有見過的功能。除了內建的搜索（這需要主題的一些 JavaScript 支持），它還具有多語言支持。我很高興能嘗試使用這個來接觸比我必須堅持一種語言時更大的受眾。我也喜歡命令行伺服器模式的即時重載。這是一個很好的方式來查看您的網站在您對內容進行更改時的外觀和變化。這讓我能夠快速迭代，並看到我的更改的結果，即使網站最終將是靜態的。

我发现 Zola 的设置文档非常出色。如果你跟着我一起操作，可以在 这里 找到。我使用的是 Arch Linux，所以我按照以下步骤操作：

# 对于 Arch Linux
$ sudo pacman -S zola
$ cd ~/code/  # 或者你想存储网站的任何地方
$ zola init website_name
$ cd website_name
$ git init
$ git submodule add https://github.com/tchartron/blow.git themes/blow
$ zola serve

除了博客和推广我的一些工具外，我还想利用我的网站作为一个我可以控制的方便的 URL 缩短器。这是 Zola 内置支持较少的一个领域。这是一个有价值的功能，因为我有一些内容在我的博客之外。我还可以使用同样的博客引擎将人们引导到我的工具列表。我能够通过使用一个 短代码 来实现这一点。

<div {% if class %}class="{{class}}" {% endif %}>
    <p><a href="http://{{loc | safe}}">重定向</a></p>
    <script>
        window.location.href = "http://{{loc | safe}}";
    </script>
</div>

在将其添加到 templates/shortcodes/redirect.html 后，我可以设置重定向，甚至可以与我的分析一起使用。

以 Umami 取悦欧盟

每次我访问一个网站时，都会遇到一个弹出窗口，遮挡了页面的内容。那个弹出窗口让我查看 cookie 政策并选择我的偏好。有时我甚至不被允许这样做，网站直接强迫我接受。其他时候，我不得不经历一个任意延长的时间，网站“配置 cookie 合作伙伴”或其他什么。与其让我的观众遭受这种情况，我决定使用一个符合 GDPR 的分析服务。我决定使用 Umami，我仍然希望能够跟踪页面浏览量，看看哪些页面受到关注（尤其是如果我为海报或演讲的二维码设置了重定向）。Umami 让我能够跟踪我的分析，而不必担心 cookie 横幅。他们还有一个免费层，应该足够我使用，除非我突然走红或什么的。

Plausible 是 Umami 的一個很好的替代品，值得在這裡提及。我決定使用 Umami 的原因是它提供了作為其託管服務的一部分的免費層。你可以免費使用 Plausible 的社區版本，但你必須自行託管。我想避免這樣做，原因如上所述。

設置 Umami 非常簡單。我只需要在我的 HTML 頁面的頭部添加一個腳本標籤，就可以開始使用了。這在帳戶創建過程中已經說明了。我不確定我是否會長期使用 Umami，但這一行的集成意味著我可以以最小的努力更換到其他分析提供商。

使用 Cloudflare Pages 免費靜態託管

有很多免費的靜態託管提供商。當我第一次開始使用靜態網站生成器時，我使用了 Netlify。那是一個很好的服務，但我已經在我的個人網站上使用 Cloudflare 來過濾機器人，我很高興能繼續使用他們。最近，我的網站已經直接使用 GitHub Pages 託管。然而，GitHub 最近在私有存儲庫實際上被公開訪問方面出現了一些問題，我可能在我的教育許可證到期後不會繼續我的 GitHub Pro 訂閱。此外，GitHub 對你可以在存儲庫中存儲的數據量有一定的限制。我有一些有趣的博客文章想法，可能需要超過幾百千字節的原始數據，能夠以一種將我的網站和數據緊密結合的方式管理我的數據結構會很好。我有一個不錯的數據冗餘計劃（另一天的另一篇博客文章），所以我對這種方式管理我的數據感到舒適。

Cloudflare Pages 很好，因為你可以直接將靜態網站上傳到他們的服務。這樣就不需要使用像 GitHub CI 這樣的東西，或者擔心一些複雜的 API 發佈過程。我認為可能可以將重定向直接嵌入到 Cloudflare 中，這樣我就可以繞過將該功能整合到 Zola 中的麻煩。目前，Cloudflare Pages 是免費的，似乎對你可以儲存的數據沒有任何限制。它還內建無伺服器功能，因此我可以利用這一點為我的靜態網站增添更多功能。我有太多個人項目的想法，因此適應 Cloudflare 平台也為我未來的項目做好了準備。

首先，我需要使用 Zola 建立我的網站。為此，我正在使用 zola build 命令。這將在我的項目目錄中創建一個名為 public 的文件夾。現在，我正在手動處理上傳過程。如果你還沒有 Cloudflare 帳戶，只需創建一個並導航到儀表板的 Workers & Pages 部分。點擊 Pages 標籤，為你的新項目命名，然後上傳 public 文件夾。如果你沒有域名，他們會給你一個子域名使用。最終我會自動化上傳過程。執行此操作的文檔在 這裡

值得一提的是，在撰寫時，Cloudflare Pages 對 Firefox 用戶有一個 長期存在的錯誤。在上傳內容時，無論出於什麼原因，它會包含額外的元數據，這會改變 Cloudflare 處理頁面的方式，使其僅顯示原始 HTML。可能有辦法自動執行此操作，但可以通過在你的 "public/" 文件夾根目錄中添加一個額外的 "_headers" 文件來修復這個問題。

/*
! X-Content-Type-Options

未來計劃

我相信這不會是我最後一次對我的網站進行全面的重新設計。希望你能在某種程度上找到我決策背後的理由是有價值的。我認為儘管靜態網站生成器已經存在了很長時間，但未來仍然有很多發展空間。我對如何通過嵌入的 JavaScript 或利用無伺服器功能來構建更互動的體驗感興趣。我毫不懷疑，你可以用靜態網站和無伺服器功能構建出相當令人印象深刻的應用程序。

在不久的將來，我想利用 Zola 提供的許多功能。我對這種組合提供的即用型搜索和語言支持並不滿意。我可能會先添加一些其他語言的內容，然後再著手讓搜索功能完全運行。從那裡，我有幾個不同的博客想法，我認為這對當前和未來的合成生物學研究生會有幫助。我還認為這個網站將作為我所構建的一些工具的良好起點。最重要的是，我很高興終於擁有一個統一的設置並開始創建內容——這是我一直想做的事情。