Hexo博客搭建以及Next主題美化的經驗之談


這並不是一篇博客搭建教程。內容主要包含個人對於Hexo博客搭建的心得,Next6.0主題美化的部分建議,以及摘錄一些各種用於博客搭建的link。

在博客園3年6個月,確實也學到了很多,博客園也是目前為止相對比較好的博客平台。不忘初心,博客園可以說是做的非常好的了,無論在技術博客初衷上,還是萬年不變的UI上(2333)。因此雖然自己建站了,但是博客園這邊也不會荒廢,會經常回來看的。
個人博客地址:furur.xyz

下面如正題。

個人博客的搭建不外乎兩種,類似Wordpress的動態博客,類似Hexo的靜態博客。前者搭建好了之后維護起來還是比較方便的,不管是發文還是添加分類等等都可以在后台管理中進行;而后者則需要手動進行管理,從博客的美化到內容的維護,當然也存在hexo-admin這類的插件。However,前者需要一個服務器,emmm,后者的話托管在github或者coding就ok,短時間內能用完100M的估計也是人才了。

Absolutely,博主選擇了后者。Hexo的教程網上多了去了,也寫的夠詳盡夠簡單了,畢竟Hexo本來也就是一個快速的blog搭建工具,因此也就不再寫完整教程了。下面我會寫一些針對於當前版本的Hexo以及最受歡迎的主題Next的一些tips,主要內容如下:

  • 搭建一個Hexo&Next的最小博客系統
  • Next主題美化心得
  • 域名綁定
  • 關於博客圖片
  • 備份維護的Tips

搭建一個Hexo&Next的最小博客系統

論最小系統的重要性。對於任何一個需要搭建的系統,無論是博客還是論壇,我都推薦新手先根據教程搭建一個最小系統。最小系統顧名思義,就是一個滿足需求的最小化的系統。舉個栗子,比如你需要搭建Wordpress,這個時候我們就可以先搭建一個最基本的Wordpress博客,即可以進行內容的發布和管理,然后再根據自己的需求去進行主題的美化和插件安裝等等,這樣操作會更具有條理性。完全沒有必要第一次就期望能夠順利搭建完成,直接用於實際生產應用環境。

再看Hexo,Hexo搭建的過程就是單純的配置文件形式和命令行。有些教程寫的非常長,從安裝環境、本地部署、美化、第三方插件寫到域名、SEO優化等等。內容太多,太復雜,這對於新手就顯得不那么友好了。因此在這里,我僅僅描述了如何搭建一個Hexo&Next的最小博客系統,不夾雜其余一些美化優化等操作,待大家玩熟了之后,再進行一些高級的配置。最小博客系統的搭建分為以下幾個步驟:

  1. 本地環境搭建(Git、Node.js)
  2. Github創建博客倉庫,初始化GitHub Pages
  3. 本地搭建Hexo博客
  4. 部署到GitHub Pages
  5. . 主題美化

Attention: 這里未包含域名綁定的過程,因為無論GitHub Pages還是Coding Pages,都可以通過用戶名自帶的域名訪問,如果購買了域名的,可參考附錄進行域名綁定。

1-4步具體的過程可參考GitHub Pages + Hexo搭建博客,按照這篇博客的步驟走,基本上幾分鍾時間就可以搭建一個默認主題的Hexo博客了。

默認的主題並不是那么好看,這里我們選擇目前最流行的Hexo Next主題,該主題非常簡潔,並且有非常詳細的配置文檔,對於不願意花大時間在博客美化上的人來說,是極好的。

主題應用具體可參考Next官方文檔,我們需要根據文檔配置一下信息:

  1. Scheme
  2. 語言
  3. 菜單,包括標簽、分類、關於等
  4. 作者昵稱和站點描述

經過以上幾個步驟的配置,一個基本的個人博客就已經成型了,可以在上面進行內容的發布,這也就是上面所提到的一個最小系統。

Next主題美化心得

搭建完最小系統的Hexo博客,其實已經可以正常工作了。但是Next主題給了我們更多DIY的空間,根據官方配置文檔,我們還能配置例如評論、統計分析、搜索等其他一系列的功能。大家可以根據自己的喜好進行配置。

但是,需要提出的就是,Hexo本身主打的是輕量級博客系統,過多的美化可能會導致博客的卡頓。因此,我只推薦以下個性化設置:

  • Github banner
    在Next6.0之后,配置自帶github_banner,只需要在后面添加自己的github地址即可,例如:
github_banner: https://github.com/maoqyhz || Follow me on GitHub
  • 博文置頂
  • 評論系統和單篇文章統計
    這里把這兩部分何在一起,主要他們都用到了LeanCloud服務。LeanCloud是一個后端服務商,我們在上面注冊后,就可以免費使用其統計和評論的服務。當然,據說leancloud_visitors有一個安全問題,對此比較敏感的可通過Leancloud訪客統計插件重大安全漏洞修復指南進行手動修復,也可忽略。
  • 全站統計
  • 開啟本地搜索
  • 博客字數統計和閱讀所需時間
    舊版的next主題使用的是hexo-wordcount插件,新版已替換成hexo-symbols-count-time

上述的美化配置,均可在Next官方文檔和hexo的next主題個性化教程:打造炫酷網站中找到。

域名綁定

github page自帶二級域名,同時也支持綁定個人域名。

域名其實分為注冊和綁定兩部分。

第一,需要去域名服務商哪里購買域名,國內:萬網、Dnspod;國外選擇余地就更大了,具體的價格可參考www.domcomp.com。博主是在namesilo里買的,價格相對比較便宜。

第二,域名綁定。如果是像博主這樣在國外服務商買的域名,一般就不使用其域名解析服務(NS)了,可以換成國內的Dnspod。然后設置別名即可,不需要添加A記錄。

具體操作如下:

  1. 更換域名服務商的NS,以namesilo為例。

  1. 在Dnspod中添加域名和記錄。

  2. 在博客源文件source/目錄下創建一個無文件類型的文件CNAME,並添加自己的域名,例如furur.xyz。更新部署到github上。

由於NS修改需要時間,過一段時間可以刷新下網頁看看。

關於博客圖片

Hexo博客搭建完后,大多會選擇部署到Github Pages或者Coding Pages上去,這時候由於空間問題,大家可能會對於博客中的圖片放哪的問題存在困惑。網上大多數的人都推薦使用各種圖床或者雲服務(七牛雲)。但是個人覺得如果不是嫌圖片加載的速度過慢,其實直接上傳圖片到github就可以了。Github Pages每人的空間有100M,畢竟技術博客中包含的圖片有限,實在有大圖,可以先進行在線壓縮。一般一篇博客1M都不到,待有恆心寫滿100篇博客在說吧。上傳圖片,需要將Hexo配置文件中的post_asset_folder設為true,然后在博客創建時,會在source文件夾下創建於博客同名的文件夾。在里面放圖片,博客中直接引用文件名即可。

備份維護的Tips

Hexo博客需要本地靜態部署后,push到服務器上去。善於思考的,應該會想到如果換電腦了,應該如何繼續寫博客部署到服務器上去呢?具體可參考使用hexo,如果換了電腦怎么更新博客?

其實原理很簡單,知乎中提到的這么多方法,無非就是將除了部署生成的文件之外,其余的文件夾以及配置文件都單獨保存好即可。保存的方法自然有很多,可以新建一個源代碼分支,也可單獨用雲服務進行備份。

總結

對於coding相關的人來說,Hexo的搭建可以說是非常簡單了,加上網上資料豐富,大家可以隨意折騰~~~

附錄

教程列表

備份維護

主題美化

插件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM