小夥伴說VuePress太簡潔了，還有沒有其他部落格推薦？

xiezhr發表於2024-05-06
Vue

寫在前面

自從上一篇文章發出來之後，不少小夥伴開始用VuePress搭建自己的個人網站。

如果小夥伴也想用VuePress零程式碼零成本搭建個人網站，可以看過來

傳送門👇👇

怎麼零程式碼零成本搭建個人網站

當然了，也有小夥伴私信問我： 還有沒有其他部落格框架推薦，VuePress搭建起來的個人網站太文件化了，

太簡潔了？

答: 蘿蔔青菜各有所愛，有人喜歡簡潔風，就有人喜歡看上去跟美觀一點的。

Hexo開源部落格應該可以滿足你的需求

一、Hexo部落格簡介

有一說一，我現在用的個人部落格【www.xiezhrspace.cn】就是透過Hexo開源部落格搭建的。

感興趣的小夥伴可以訪問了看看，是不是你喜歡的風格。

當然了，我用的只是Hexo部落格其中一個主題 Matery 主題,也跟著大佬進行了不少魔改。

到目前為止，Hexo 提供了403 個主題供你選擇，如果你一個主題看膩了，換下一個主題就是了。

Hexo是什麼？

我們來看看官網(https://hexo.io/zh-cn/)怎麼回答的

Hexo 是一個快速、簡潔且高效的部落格框架。

Hexo 使用 Markdown（或其他標記語言）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

Hexo 在GitHub（https://github.com/hexojs/hexo） 上已經有38.5k stars ，而且使用的是MIT協議，我們可以放心使用。

小夥伴也不用當心作者不維護了，作者更新還是比較勤快，最近更新在兩天前。

GitHub-hexo倉庫

二、快速上手

其實中文官方文件https://hexo.io/zh-cn/docs/ 寫得已經非常詳細了，大家參考文件一步一步來就可以了。

hexo官方文件

這裡充當一下課代表簡單總結一下文件內容：

① 前提準備

在安裝Hexo之前，我們需要安裝Node.js,即JavaScript執行環境， 如果小夥伴還想了解更多，可自行百度哈。

接下來需要安裝Git,用來從Github、Gitee 等倉庫拉取程式碼用的

② 安裝Hexo

npm install -g hexo-cli

③ 初始化Hexo

$ hexo init <folder>   //在folde資料夾下初始化hexo部落格
$ cd <folder>          //切換到folde資料夾
$ npm install          //安裝hexo所需依賴

③ 目錄結構

經過上面操作之後，我們可以看到下面目錄結構

.
├── _config.yml             //網站的 配置 資訊，您可以在此配置大部分的引數
├── package.json            //應用程式的資訊
├── scaffolds               //模版 資料夾
├── source                  //存放使用者資源的地方,以後我們寫的文章也放這個目錄下
|   ├── _drafts
|   └── _posts
└── themes                 //存放我們喜歡的箇中主題

④ _config.yml配置檔案中配置相關選項

這裡的配置內容比較多，主題切換也在這裡面， 由於篇幅原因就不展開講了，大家參考官方文件即可

https://hexo.io/zh-cn/docs/configuration

⑤ 在哪寫作？

在前面我們提到過source 目錄，我們在 source/_posts 目錄下使用markdown 語法寫文章即可

⑥ 編譯釋出啟動服務

hexo clean //清除快取檔案和生成的靜態檔案
hexo g    // 生成靜態檔案，將我們上一步寫的文章，編譯成html
hexo d    // 部署網站
Hexo S    //本地電腦啟動hexo服務

⑦ Github Pages 部署

我們的網站需要其他小夥伴能夠在網際網路訪問，這一步是必不可少的了

三、主題切換

應小夥伴的問題，這個是主要的一步，你可以在各種好看的主題間來回切換

只要在 themes 資料夾內，新增一個任意名稱的資料夾，並修改 _config.yml 內的 theme 設定，即可切換主題。

那麼問題又來了，主題在哪找呢？

我們開啟 https://hexo.io/themes/ 地址，看上哪個，選哪個即可

hexo主題切換

四 、主題推薦

不知道大家有沒有跟我一個的感覺，看到琳琅滿目的主題，反而不知道怎麼選了

這裡呢，根據個人踩坑經驗，給大家推薦幾種

4.1 NexT 主題

據說是使用最多的主題

NexT主題

  • 線上演示：https://theme-next.js.org/
  • 主題倉庫：https://github.com/theme-next/hexo-theme-next
  • 使用文件：https://theme-next.js.org/docs/
  • 推薦值：⭐⭐⭐⭐

4.2 Butterfly 主題

混跡各種部落格群多年的我發現，不少小夥伴對這款主題情有獨鍾

Butterfly主題

  • 主題倉庫：https://github.com/jerryc127/hexo-theme-butterfly
  • 使用文件：https://butterfly.js.org/
  • 推薦值：⭐⭐⭐⭐⭐

4.3 Fluid主題

Fluid主題

  • 線上演示：https://hexo.fluid-dev.com/
  • 主題倉庫：https://github.com/fluid-dev/hexo-theme-fluid
  • 使用文件：https://hexo.fluid-dev.com/docs/start/
  • 推薦值：⭐⭐⭐⭐

4.4 Volantis 主題

Volantis 主題

  • 線上演示：https://xaoxuu.com/
  • 主題倉庫：https://github.com/volantis-x/community
  • 使用文件：https://volantis.js.org/v6/getting-started/
  • 推薦值：⭐⭐⭐⭐⭐

4.5 Matery 主題

Matery 主題

  • 線上演示：https://xiezhrspace.cn/
  • 主題倉庫：https://github.com/blinkfox/hexo-theme-matery
  • 使用文件：https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
  • 推薦值：⭐⭐⭐⭐⭐

注： 由於我目前自己用的是Matery 主題，所有研究得比較多，這裡給大家推薦一個經過不少魔改後的主題

https://gitee.com/nekodeng/hexo-theme-itsneko

w(ﾟДﾟ)w 好看的主題真的太多了，根本例舉不完。由於篇幅原因，這裡就不一一列舉了

更多好看的主題等著小夥伴自己去探索，如果您發現上面好看實用的主題，歡迎在留言區互動

五、主題魔改

不管什麼主題模板拿過來，肯定有不如意的地方，或者自己想要新增一些個性化的需求，這就需要我們自己魔改了

自己剛開始搭建時，也遇到不少問題。

也是參照了不少大佬寫的文章，這裡分享出來供大家一起慢慢享用

https://zhangxiaocai.cn/posts/9f117b.html

參考文章

本期內容到這兒就結束了，希望對您搭建個人網站有所幫助

我們下期再見 ヾ(•ω•`)o (●'◡'●)

相關文章