【搭建博客第一篇章】博客選型以及搭建詳情 - github-pages,github-actions 李棟博客

一、前期分析：選用合適的博客編寫方式

1、傻瓜式（極簡易用）

定義：這一級別是專為那些幾乎沒有任何技術背景或經驗的用户設計的。它追求的是極致的易用性，通過直觀的界面、簡單的操作流程和必要的引導，讓用户無需學習或僅需極少的學習就能立即上手使用。
特點：直觀的圖形用户界面（GUI），幾乎不需要閲讀説明書。操作步驟清晰明瞭，通常通過點擊、滑動或選擇即可完成。自動化的配置和設置，減少用户的手動操作。強大的即時反饋和錯誤提示，幫助用户快速發現並解決問題。
適用人羣：適合所有年齡段和技術水平的用户，特別是那些對技術不感興趣或時間緊迫的人羣。

2、基礎/入門級

定義：這一級別要求用户具備一定的基礎知識，可能需要一些學習或實踐才能熟練掌握。它假設用户已經掌握了使用該技術所需的基本概念或工具，但可能還需要一些時間來熟悉具體的操作步驟或流程。
特點：包含一些基本的設置和配置，用户可能需要閲讀一些簡單的文檔或教程來完成。學習過程中可能會遇到一些簡單的問題，但通常可以通過搜索網絡或參考官方文檔來解決。
適用人羣：適合對技術有一定興趣，願意投入一些時間和精力來學習的初學者。

3、專業/高級

定義：這一級別要求用户具備深厚的專業知識、豐富的實踐經驗和較高的技能水平。它可能涉及到複雜的系統架構、高級功能的應用以及問題的深度分析與解決。
特點：用户需要深入理解技術背後的原理，能夠獨立完成複雜的配置和優化工作。在解決問題時，可能需要運用多領域的知識和技巧，並有能力進行創新和改進。
適用人羣：適合在該領域有多年工作經驗的專業人士，或者是對該技術有深厚興趣並願意持續深入研究的愛好者。

二、中期平台選型：調研對應的博客平台

1、傻瓜式（極簡易用）

這一類型的平台現在有好多平台，比如：CSDN、51CTO、掘金、segmentfault、博客園等等。前期可以在不同平台上發佈自己的作品。後期根據作品的熱度和自己的喜歡發佈文章的方式最後選擇一款屬於自己的平台即可。

2、基礎/入門級：

這一類型的博客系統有 WordPress、Hugo、Hexo、Halo 這幾個平台需要自己搭建服務。需要具備服務器，如果想要通過域名訪問還需要購買域名。如果想要自己的域名被百度收錄還需要進行SEO。這種類型的好處是所有的數據都在自己手上不會害怕原始數據泄露。壞處就是需要自己搭建服務和長期維護自己的服務器。

3、專業/高級：

這種類型的技術棧有 docsify、docute、vitepress、vuepress、Hexo、GitBook、theme-hope。這幾個都各優缺點。這裏過多的描述其實對你幫助不大。你可以根據官網文檔自己搭建一下，真實的體驗一下搭建和編寫過程。從中找到你喜歡的一種方式。現在我使用的就是 theme-hope 和 github page 結合使用，下面的章節我也會把這一套搭建方式寫出來。其他的相關配置我會領起一個系列進行配置相關的書寫。我把這幾個網站的相關鏈接放在下面：

https://docsify.js.org/#/zh-cn/
https://docute.egoist.dev/
GitBook
Hexo
https://vitepress.dev/zh/
https://vuepress.vuejs.org/zh/
https://theme-hope.vuejs.press/zh/get-started/

三、後期實踐之VuePress+github page搭建

1、基礎環境

創建 VuePress 項目使用的 nodejs 版本是 v18.20.3。

2、創建項目

創建一個目錄在新建的目錄中打開你電腦的終端工具。下面是創建項目的過程，你根據這個過程就可以創建一個可以運行的項目。

3、創建遠程倉庫

在 github 上創建一個項目，下面是我項目的截圖。

4、配置遠程倉庫信息

將代碼上傳到倉庫種，源代碼分支是 main 分支。用來展示頁面的分支是 gh-pages。代碼上傳完成之後會自動創建這個分支。
我們來配置一下下面的信息即可。

5、修改項目中 config.ts 文件

import { defineUserConfig } from "vuepress";

import theme from "./theme.js";

export default defineUserConfig({
  base: "/frontend-book/", # 這個地方原本是 / 現在變成 /frontend-book/

  lang: "zh-CN",
  title: "博客演示",
  description: "vuepress-theme-hope 的博客演示",

  theme,

  // 和 PWA 一起啓用
  // shouldPrefetch: false,
});

6、訪問地址

github 構建完成之後會提示你訪問地址，點擊訪問地址就可以訪問到你的頁面了。