一個僅需三步配置就能生成免費個人部落格的開源模板：vdoing-template

eryajf發表於2022-07-21

前言

模板專案地址：github.com/eryajf/vdoing-template

⚗️功能亮點：

  • 三步配置生成一個屬於自己的免費個人部落格。
  • 使用Vdoing主題，感謝作者寫出如此簡潔美觀的部落格主題。
  • 模板已內建整合全文搜尋能力。
  • 模板已內建整合基於GitHub Issue的vssue評論系統。
  • 本地Markdown編寫文件，提交到遠端之後GitHub Actions自動構建釋出。

? 以下僅需簡短的幾步配置，就可以配置擁有一個免費的個人部落格。準備好了嗎，來吧！

可能有圖片載入失敗，請直接移步專案地址RE

效果展示

首頁效果圖：

image_20220721_113642

內部文章效果：

image_20220721_165503

如果你也想要一個這種效果的部落格，請往下看，只需簡單幾個配置步驟，即可免費擁有。

初始配置

首先訪問模板倉庫：vdoing-template。點選此倉庫右側的 Use this template

image_20220721_153908

然後根據自己的實際情況，給倉庫起名字：

image_20220721_154115

這裡有一個注意點：倉庫的名字將會是 GitHub Pages 的訪問一級路由。比如上邊我倉庫名字定義為：lql-notes，那麼配置成功之後的首頁訪問路徑是： lql95.github.io/lql-notes ，如果你想讓首頁的訪問路徑是根，那麼只需把倉庫名字命名為：lql95.github.io。

建立完成之後，自己倉庫中的專案內容如下：

image_20220721_154502

然後將程式碼克隆到本地，使用編輯器開啟：

$ git clone git@github.com:lql95/lql-notes.git

調整內容

接下來的操作就是將模板中的內容，替換成自己想要的內容，好在模板我已經精簡了很多，不需要繁瑣的配置，這裡簡單說明一下：

全域性替換關鍵字

image_20220721_154907

這樣基本上就搞定了配置內容的一大步，剩下的就是一些修改美化方面的內容了。

配置首頁

首頁的配置資訊在 docs/index.md 這個檔案當中，我們可以參照官方文件進行按需配置：點我去看文件

配置評論

模板預設內建了vssue的評論元件，也是基於github的issue作為評論的儲存資料。

只需兩步即可完成配置：

  • 第一步：參考官方文件，建立一個GitHub OAuth App。或者不用看官方文件，直接看如下兩個步驟。

    點選此處，進入建立頁面：

    image_20220721_155930

    點選註冊之後，就進入到了詳情頁面，可以看到Client ID，點選 Generate a new client secret 生成一個秘鑰：

    image_20220721_160023

  • 第二步：將配置資訊填寫到 docs/.vuepress/config.js 中。

    // vssue 評論外掛
  plugins: [
    [
      "vuepress-plugin-vssue-global",
      {
        platform: "github",
        title: "[Comment]<%- frontmatter.title %>",
        needComments: true,
        // 其他的 Vssue 配置
        autoCreateIssue: true,
        clientId: "d3ec4ca6363950ca41a2",
        clientSecret: "897465b6393f1d663e6128d2fab6959a0c0333cc",
        owner: "lql95",
        repo: "lql-notes",
      },
    ],
  ],

現在基本配置項都已經搞定，可以將程式碼提交上去，然後GitHub Actions會自動將程式碼部署到 gh-pages 分支。

終極配置

終極配置就是等 GitHub Actions 跑完之後，我們能看到分支當中多了一個 gh-pages 分支。

此時點選 Settings —> Pages，進行如下配置：

image_20220721_160920

兩個配置項，第一個表示選擇哪個分支作為靜態檔案，第二個表示選擇前邊分支的哪個目錄。

點選儲存之後，靜待一分鐘，然後就可以訪問上邊提供的那個地址了。成果如下：

image_20220721_161147

如果一路配置沒問題，那麼文章也應該會自動載入評論功能：

image_20220721_165020

剩下的就是一些細節的最佳化調整，稍微打磨之後，就可以愉快地撰寫你的部落格了。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章