Hexo部落格系統搭建的完整過程

Pop_Rain發表於2018-02-23

這是一篇自己總結的搭建Hexo部落格的經驗貼,便於日後檢視同時也分享給大家,希望少走些彎路

說起做技術部落格,前前後後也有1年半時間了。

最開始在CSDN上記錄技術學習過程,程式語言、系統安裝等入門級筆記較多,堅持時間較長。後來遷移副本至部落格園,可能先入為主的原因,之後一直沒再同步更新;同樣,先前也有自己搭建過一次部落格,jekyll系統、Hexo系統都做過,後來因為考研的原因也都草草收場。部落格雖擱置一邊但筆記還要記啊,懶出天際的我直接markdown文件儲存在電腦中,這些待嫁的深閨文章越積越多,寒假閒來無事,突然想起這些爛攤子該理一理。

今天看了下CSDN統計:原創132篇,訪問量100618,排名24463,其中最熱門的 Win10+Ubuntu17.04雙系統安裝 訪問量5萬+。由此說明一個完整的入門貼對於小白來說還是有所幫助的,而本人做部落格的初衷之一也是希望記錄自己成長過程的同時分享給更多同行自己遇到的坑和響應的解決方案;同樣,每當入門一個全新的領域如能看到同行前輩分享的完整學習貼也會感激萬分,這種正向反饋給我堅持技術分享的動力。技術之路無窮盡,但希望在這條充滿挑戰兼具無盡獲得感的路上我們都會程式設計出屬於自己的那片天,熠熠生輝。

心路歷程還算詳細吧,好了客官,開工吧

一、Hexo部落格系統搭建

安裝node.js

node.js官網下載node.js並安裝

安裝Git

自行百度安裝

安裝markdown編輯器

mac: macdown

win: MarkdownPad2

使用git通過ssh建立github連線

我們使用Github官方提供的Github Pages這一服務來作為靜態部落格的伺服器,沒有github的同學去官網註冊一個。

使用git通過ssh建立github連線。大概流程是本地設定user.name user.email,這樣本地即可通過git命令列的方式連線github;為了安全便捷,我們本地再生成一個ssh key,它是一對私鑰和公鑰,私鑰自己儲存別動它,把ssh key中的公鑰新增到github官網自己賬號中,這樣就可以用自己裝置很方便的連線至自己的github並享受其服務。如有多臺裝置,可以每臺裝置生成一對ssh key,並將多個公鑰新增github賬號中即可,這樣就可以實現多臺裝置無縫連線,便於移動辦公。

本地Hexo系統搭建

以上步驟都完成後,用npm安裝hexo:

npm install -g hexo

本地建立自己的blog目錄,如MyBlog,在該目錄下進行Hexo初始化:

hexo init MyBlog
cd ~/MyBlog/
npm install

安裝Hexo必備外掛:

npm install hexo-server --save #本地服務便於本地預覽
npm install hexo-generator-index --save #索引生成器
npm install hexo-generator-archive --save #歸檔生成器
npm install hexo-generator-category --save #分類生成器
npm install hexo-generator-tag --save #標籤生成器
npm install hexo-deployer-git --save #hexo通過git釋出
npm install hexo-renderer-marked@0.2.7--save #渲染器
npm install hexo-renderer-stylus@0.3.0 --save #渲染器

至此,在部落格根目錄執行如下命令,即可在本地生成靜態頁面並預覽。

hexo clean #清理public目錄快取(如果有)
hexo g #生成靜態頁面至public目錄
hexo s #開啟本地伺服器,在http://localhost:4000/進行預覽
hexo d #經過下文配置,後期將這些靜態頁面部署至github倉庫,完成部落格釋出

本地Hexo系統與Github賬戶關聯

在自己Github賬號下新建一個名為 [your_account].github.io 的倉庫

編輯Hexo部落格根目錄下的_config.yml檔案,找到最下面的deploy

deploy:
  type: git
  repo:https://github.com/XXXX/XXXX.github.io #你的GitHub Pages的https連結
  branch:master

儲存配置檔案後,執行如下命令後訪問XXXX.github.io即可看到部署在github上的預設部落格:

hexo g
hexo d

常用命令

hexo clean #清除public靜態頁面快取
hexo new page "pageName" #新建頁面

hexo help  # 檢視幫助
hexo version  #檢視Hexo的版本
hexo new "postName" #新建文章

簡寫:
hexo n == hexo new #新建文章
hexo g == hexo generate #生成靜態頁面至public目錄
hexo s == hexo server #本地服務
hexo d == hexo deploy #部署至github倉庫完成部落格釋出

二、Hexo系統裝修-相關配置細化

主題配置

Hexo系統有很多主題,本文采用Next主題。相關配置包括站點配置與主題配置,跟著官方文件走就行 傳送門

第三方功能外掛配置

第三方功能包括但不限於:首頁全文閱讀、站內搜尋、訪問人數、打賞功能、多說評論、404頁面、RSS、sitemap。這些第三方功能詳見上面傳送的Next主題官方文件

全文閱讀:在合適的位置新增 < !–more–> 標籤,之前的文字都會寫在首頁文章名稱下面的簡介裡

站內搜尋:採用Local Search

訪問人數:不蒜子統計

文章頭部

配置完成後,每一篇md文章的頭部資訊如下即可:

---

title: Hexo部落格系統搭建的完整過程
date: 2018-02-22 19:29:01
categories: 部落格搭建
tags:
    - 部落格搭建
    - Hexo
    - github

---

至此客官已基本完成Hexo這個強大方便的部落格系統,今後的路就讓它陪你,好基友一起走吧。

附上本人小窩,歡迎交流。

參考資料:Hexo的安裝和使用(mac篇)

版權宣告:本文為原創文章,客官如需轉載請註明

轉載自:[Pop_Rain的部落格](http://blog.csdn.net/pop_rain)

相關文章