Hexo搭建博客系列:(一)Hexo安裝與添加NexT主題

原來發(fā)了一個關于Hexo搭建博客系列的總綱报亩,想要搭建個人博客的同學章蚣,建議直接根據官方文檔(https://hexo.io/zh-cn/docs/)搭建博客推励,本文針對Windows系統(tǒng)補充講解一些個人設置父晶。

Hexo是一個開源的博客框架曲梗,是一位臺灣小哥(tommy351)在大學時開發(fā)出來的赞警。我們可以直接基于這個框架,選擇一個自己喜歡的主題虏两,修改一些配置愧旦,就搭建出一個博客了。我使用的是NexT主題定罢,最終效果可看我的博客:https://depp.wang笤虫。個人博客是也通過Jekyll和WordPress搭建,但是Hexo簡單免費祖凫,建議使用Hexo琼蚯。

Hexo搭建的博客是靜態(tài)的,沒有后臺代碼惠况,所以速度很快遭庶。

安裝Git+NodeJS環(huán)境

Hexo是基于Node.js的靜態(tài)博客生成器,所有需要提前安裝Node.js稠屠,可使用命令行下載(詳見官方文檔教程)峦睡,最好下載長期維護版,地址:

https://nodejs.org/zh-cn/  

Hexo是在本地使用MarkDown語法寫博客完箩,再使用Git發(fā)布到遠程代碼托管平臺上赐俗,如GitHub。

需要安裝Git弊知,一個代碼管理工具阻逮。以下所有命令均是在Git Bash(Git命令行窗口)中執(zhí)行的。下載地址:

https://git-scm.com/downloads  //官方地址秩彤,速度應該比較慢
https://github.com/waylau/git-for-win //github下載地址

推薦一個廖雪峰大神的Git經典入門教程叔扼,講得非常好事哭,學完肯定對git原理了然于胸。

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

Hexo配置使用

Hexo安裝

當Node.js安裝完畢后瓜富,在任意文件夾鼠標右擊選擇Git Bash Here打開Git命令行鳍咱,執(zhí)行如下命令安裝Hexo:

$ npm install -g hexo-cli

初始化博客

新建一個文件夾(如E:\Hexo,以下教程都以這個目錄為博客根目錄)与柑,在博客根目錄下點擊鼠標右鍵谤辜,選擇Git Bash Here,執(zhí)行如下命令价捧,如果以下命令執(zhí)行失敗丑念,說明你Hexo沒有安裝成功。

$ hexo init

在博客根目錄下會生成以下文件

/source:/_post中存放MarkDown編寫的博文等源文件
/themes:存放主題文件结蟋,每個主題包含主題配置文件(_config.yml)
_config.yml:站點配置文件脯倚,用于配置博客信息,如網站信息嵌屎,主題設置

在博客根目錄可執(zhí)行如下命令用于啟動服務器推正,主要用來本地預覽:

hexo g    #完整命令為hexo generate,用于生成靜態(tài)文件(即public文件夾)  
hexo s    #完整命令為hexo server宝惰,將上面的文件部署到本地服務

瀏覽器訪問http://localhost:4000植榕,你會看見一個默認主題是landscape的博客,可以在Git Bash中按Ctrl+C停止尼夺。

image.png

NexT主題配置使用

NexT比較簡潔耐看内贮,幾乎大多數人都喜歡。主題的官方文檔

NexT主題安裝

在博客根目錄下運行以下命令汞斧,將下載NexT主題夜郁。

$ cd themes //切換到主題文件夾
$ git clone https://github.com/theme-next/hexo-theme-next next //將其克隆的hexo-theme-next重命名為next

Hexo 有兩份主要的配置文件(_config.yml):一份位于站點根目錄下,稱為站點配置文件,關鍵字站點粘勒;另一份位于主題目錄下竞端,稱為主題配置文件,關鍵字主題庙睡。

建議使用Notepad++打開配置文件事富,它內存比較小、免費乘陪。下載地址:

https://notepad-plus-plus.org/download/v7.5.9.html

修改站點配置文件

主要包含以下內容:
1统台、新增網站的信息

# Site
title: DeppWang's Blog    #網站標題
subtitle: 這是副標題    #網站副標題
description: 堅持分享知識,堅持留言支持    #網站描述
author: DeppWang    #你的名字
language: zh-Hans   #網站使用的語言
timezone:

2啡邑、修改博客文章的URL贱勃,默認顯示英文,避免中文過長亂碼,需要在新建文章中的Front-matter(頂部-線包裹區(qū)域)中新增一個字段english_title配合使用贵扰,方生效仇穗。此項可暫時跳過

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://depp.wang    #你網站的URL
root: /
permalink: :year/:month/:day/:english_title/   #此處將文字url改為英文,避免中文亂碼戚绕。
permalink_defaults:

3纹坐、將標簽和分類名在此處對應設置,這樣URl的中文改為對應英文舞丛,此項可暫時跳過

# Category & Tag
default_category: uncategorized
category_map:
  設計模式: Design Pattern    #為避免分類名稱為中文造成URL過于冗長耘子,將中文轉換成對于英文
  數據庫: Database
  
tag_map:
  單例模式: Singleton Pattern    #為避免標簽名稱為中文造成URL過于冗長,將中文轉換成對于英文
  排序算法: Sort Algorithms
  

4球切、主題更改next

# Extensions
# Plugins: -hexo-generator-sitmap
## Themes: https://hexo.io/themes/
theme: next    #主題設置拴还,改為next        

5、設置GitHub倉庫托管路徑

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
       github: git@yourname.github.com:yourname/yourname.github.io.git,master  //博客文件存儲位置欧聘;注意格式

修改主題配置文件

主要修改以下內容:
1、修改網址圖標端盆,可在http://tool.lu/favicon/上設計自己的網址圖標怀骤,替換themes/next/source/images/文件下對應文件

favicon:
  small: /images/favicon-16x16-next.png             
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

2、新增頁面標簽焕妙、分類選項

menu:
  home: / || home                         #主頁
  #about: /about/ || user                 #關于頁面
  tags: /tags/ || tags                    #標簽頁
  categories: /categories/ || th          #分類頁
  archives: /archives/ || archive         #歸檔頁
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap       #搜索引擎抓取
  #commonweal: /404/ || heartbeat         #公益404
  #about: /about                          #關于頁面(需手動創(chuàng)建)
  #search: /search                        #搜索頁面(需手動創(chuàng)建)
  

3蒋伦、根據個人喜好切換主題,以下切換為Mist主題

# Schemes
#scheme: Muse
scheme: Mist    #切換為Mist主題
#scheme: Pisces

4焚鹊、設置博客頭像痕届,將頭像(如:deppwang.jpg)放在站點下的 /themes/next/source/images文件夾下

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /images/deppwang.jpg    #設置頭像

5、設置博客友鏈

# Blog rolls
links_title: Links
#links_layout: block
#links_layout: inline
links:    #鏈接
  阿里中間件團隊博客: http://jm.taobao.org/
  Jark's Blog: http://wuchong.me/
  廖雪峰個人網站: http://www.liaoxuefeng.com/
  

6末患、設置文章中代碼主題

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night   #代碼主題

生成標簽研叫、分類頁面

主題文件修改第2條,已經在頁面上顯示出標簽和分類頁選項璧针,但此時還未完全成功配置嚷炉。需要在站點下打開Git Bash運行分別以下命令生成標簽和分類頁面

hexo new page "tags"

hexo new page "categories"

在/source目錄下會生成一個tagscategories文件夾,里面包含一個index.md文件探橱。
可用有道云筆記或其他MarkDown編譯器打開申屹,修改title為中文名標簽分類

常用hexo命令

hexo g :完整命令為hexo generate隧膏,用于生成或更新靜態(tài)文件(即public文件夾哗讥,也就是整個博客網站的靜態(tài)文件)
hexo d : 完整命令為hexo deploy,用于將public文件夾發(fā)布到遠程代碼托管網站中(如GitHub)
hexo clean :用于清除靜態(tài)文件(public文件夾)胞枕。當hexo g命令更新文件失敗時杆煞,可先清除文件
hexo g -d :同時生成靜態(tài)文件,并發(fā)布,最實用

總結

Hexo主題不斷更新索绪,各項配置也在變化湖员,建議直接根據官方文檔配置。網上此類教程十分豐富瑞驱,可多加參考娘摔。此文不免出現差錯,有問題請留言唤反。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末埂奈,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子蚯舱,更是在濱河造成了極大的恐慌随常,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盏阶,死亡現場離奇詭異晒奕,居然都是意外死亡,警方通過查閱死者的電腦和手機名斟,發(fā)現死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門脑慧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人砰盐,你說我怎么就攤上這事闷袒。” “怎么了岩梳?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵囊骤,是天一觀的道長。 經常有香客問我冀值,道長也物,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任列疗,我火速辦了婚禮焦除,結果婚禮上,老公的妹妹穿的比我還像新娘作彤。我一直安慰自己膘魄,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布竭讳。 她就那樣靜靜地躺著创葡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪绢慢。 梳的紋絲不亂的頭發(fā)上灿渴,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天洛波,我揣著相機與錄音,去河邊找鬼骚露。 笑死蹬挤,一個胖子當著我的面吹牛,可吹牛的內容都是我干的棘幸。 我是一名探鬼主播焰扳,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼误续!你這毒婦竟也來了吨悍?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤蹋嵌,失蹤者是張志新(化名)和其女友劉穎育瓜,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體栽烂,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡躏仇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了腺办。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片焰手。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖菇晃,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情蚓挤,我是刑警寧澤磺送,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站灿意,受9級特大地震影響估灿,放射性物質發(fā)生泄漏。R本人自食惡果不足惜缤剧,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一馅袁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧荒辕,春花似錦汗销、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至李皇,卻和暖如春削茁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工茧跋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留慰丛,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓瘾杭,卻偏偏與公主長得像诅病,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子富寿,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容