一步步教你建博客:Hexo 博客搭建與基礎配置

每個技術人多少都應該寫幾篇博客,可以選擇發布在博客平臺如:CSDN、簡書;也可以發布于自己搭建的博客,簡單好用。

本文記錄了基于 Hexo 框架 + GitHub 搭建個人博客的過程,應該是足夠清晰的,你可以按照此文進行實踐,也期待看到你自己的博客。

本文的實踐基于 Ubuntu 18.04 和 Deepin 15.7 環境,博客地址:Mupceet

環境搭建

Hexo 的介紹及詳細信息請查看官方文檔,以下記錄實操的具體細節。

安裝 Git

$ sudo apt install git

Hexo 文檔中寫的 Git 的安裝命令為 sudo apt-get install git-core,這是因為老一點的 Ubuntu 中有一個軟件也叫 GIT(GNU Interactive Tools),所以 Git 只能叫 git-core 了,后來因為 Git 的名氣實在太大,所以 GNU Interactive Tools 就改名了,git 就變成了真正的 Git。

安裝完成后記得配置一下:

$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"

安裝 Node.js

選擇下載最新的 10.11.0 版本(2018-10-04),得到 node-v10.11.0-linux-x64.tar.xz,解壓到 /opt/(適用于共享用戶)或 /usr/local/(適用于用戶個人資料)。以下以 /opt/ 為例。

$ cd ~/Download
$ tar -xvf node-v10.11.0-linux-x64.tar.xz
$ sudo mv node-v10.11.0-linux-x64 /opt

/opt/node-v10.11.0-linux-x64/bin 添加到 PATH 環境變量中,這樣就可以從任意終端中執行 npm 命令了。

$ sudo vim /etc/profile

打開 /etc/profile 文件,增添以下內容,注意等號前后沒有空格,保存退出。

# Node.js
export NODE_HOME=/opt/node-v10.11.0-linux-x64/bin
export PATH=$PATH:$NODE_HOME

為了使該環境變量生效,可以在終端中執行 source /etc/profile 或者 . /etc/profile,但這樣只在當前終端中生效。要使得任意終端都生效,退出當前用戶再登陸即可。

Deepin 下 zsh 使用 source 的方式會有問題,請使用注銷再登錄的方式

Node 自帶 npm,所以裝完應該會有某個版本的 npm。但 npm 相比 Node 更新更頻繁,所以,要是想確保使用的是最新版本的,你可以執行以下命令:

$ npm install npm -g

安裝 Hexo

$ npm install -g hexo-cli

如果網絡條件不好——你懂的,比較難以下載成功,這個自行解決。

如果碰到權限問題,可以參考鏈接:處理npm權限問題

安裝后可使用 hexo versionhexo -v 查看版本信息。一般來說不需要去關心這些信息,我就是看看……

hexo-cli: 1.1.0
os: Linux 4.15.0-20-generic linux x64
http_parser: 2.8.0
node: 10.11.0
v8: 6.8.275.32-node.28
uv: 1.23.0
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.33.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

建站及配置

建站初始化

選擇在 Documents 目錄下創建 blog 文件夾來存放源文件。

$ cd ~/Documents
$ hexo init blog
$ cd blog
$ npm install

初始化完成后,目錄內容結構為如下內容:

.
├── _config.yml
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
└── themes

生成文件及本地調試

初始化后執行 hexo generatehexo g 可生成靜態文件(public 文件夾)與緩存文件(data.json)。

然后我們執行 hexo serverhexo s 就可以啟動本地服務器,訪問網址 http://localhost:4000/ 就可以查看文章效果了。

初始效果

接下來就是部署網站等簡單的操作,好了,本文到此為止,大家自行實踐吧。

……

好吧,其實真正的重點才剛剛開始……

部署遠程服務器

感謝 GitHub 提供的 Pages 服務,可用來部署靜態網頁。首先你得注冊網站的賬號,這里就不具體展開了。

注冊賬號之后,記得上傳一下 SSH 公鑰,便于部署、上傳操作。具體操作請查看網站的幫助文檔:

Github: Connecting to GitHub with SSH

創建 GitHub Pages

  1. 創建項目

創建一個名為 username.github.io 的項目,例如我創建的項目為 https://github.com/Mupceet/mupceet.github.io。從這個例子中可以看到,這里 username 大小寫可以不完全對應。

  1. 部署內容

將 Hexo 生成的靜態文件上傳到該倉庫中,就可以通過訪問 username.github.io 來查看你的博客,也就是可以看到剛才本地調試時看到的網頁了。這個上傳過程會使用 hexo deploy 來操作。

部署

上面提到了要使用命令 hexo deploy 上傳文件,這需要下載插件,并且要修改站點配置文件 _comfig.yml,關于這個配置文件后續會介紹,這里暫時先修改部署所需要的配置。

首先安裝相關插件:

注意:插件下載時需要在博客的文件夾中,在本文就是 blog 文件夾

$ cd ~/Documents/blog
$ npm install hexo-deployer-git --save

然后修改配置,這里配置上傳的倉庫為 GitHub。以我的配置為例:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: git@github.com:Mupceet/mupceet.github.io.git,master

最后執行 hexo deploy 或者 hexo d 就可以將其部署到服務器上。現在訪問對應的域名就可以看到你自己的博客啦!

后續更新文章內容或者配置,標準流程如下:

$ hexo g
$ hexo s
$ hexo d

事實上,我每次本地做了修改,執行 hexo g 生成內容后,都會使用 hexo s -p 2333 --debug 然后訪問 http://localhost:2333/ 查看排版格式是否正確、是否有錯別字。加 debug 參數是為了可以在訪問頁面時看到調試信息,便于定位、解決問題。在調整到本地查看效果滿意后,最后再 hexo d 部署到遠程,完成一次博客的更新。

站點配置文件

上文提到了 _config.yml 這一配置文件,它是關于網站的一些配置,具體說明可見 Hexo 官方文檔。以下對官網有詳細說明的內容就不再贅述,優先查看官網文檔也是個好習慣。

# Site 網站
# URL 網址
# Directory 目錄
# Writing 文章
# Home page setting 主頁相關設置
# Category & Tag 分類 & 標簽
# Date / Time format 日期 / 時間格式
# Pagination 分頁
# Extensions 插件

以上內容在官網中都有詳細的說明介紹,在你搭建的開始,不需要在配置上面花費過多的精力,大部分保持默認設置即可。這里只補充說明有必要修改的部分。

Site 網站

這一部分是顯示在頁面上的重要基本信息,如網站的標題、作者、說明等。這一定是要修改的,以我的配置為例:

# Site
title: Mupceet # 博客標題
subtitle: Don't Repeat Yourself # 博客副標題
description:  君子坦蕩蕩 小人長戚戚 # 博客描述,部分主題會用來生成簡介
keywords: # 通常建議包含網站的關鍵詞
author: Mupceet # 博客作者,部分主題會用來顯示作者
language: zh-Hans # 語言,具體需要查看主題theme說明
timezone: # 默認使用電腦的時區

URL 網址

這一部分配置你的博客鏈接的具體格式形式,我參照使用了 Android Developers Blog 的 URL 格式:

https://android-developers.googleblog.com/2018/10/kotlin-momentum-for-android-and-beyond.html

即:域名 + 年 + 月 + 以 - 為連接符的英文標題,因此修改配置如下:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
# permalink: :year/:month/:day/:title/
permalink: :year/:month/:title/
permalink_defaults:

Home page setting 主頁相關設置

默認配置文件中只寫了 index_generator 這部分,也就是首頁的配置,事實上,查看 node_modules 文件中,可以看到有以下幾個 generator

├── hexo-generator-archive
├── hexo-generator-category
├── hexo-generator-index
├── hexo-generator-tag

這也表明了我們博客可以通過以上幾個維度來展示你的文章,它們分別是歸檔、分類、索引、標簽,其中對于分類與標簽我個人理解是一篇文章最好使用一個類別(category)和多個標簽(tag)。

分別查看這些 module 的 README 文件,可以將它們內容組合起來,還是以我的配置為例進行說明:

# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator: # 首頁文章列表頁面
  path: ''
  per_page: 10 # 首頁顯示多少篇文章,默認為10,如果值為0則不分頁。由于首頁會顯示文章的摘要內容,建議不要取太大的數值,造成翻頁定位困難
  order_by: -date # 排序,默認時間逆序,即最新的在最上面

archive_generator: # 歸檔文章列表頁面
  per_page: 20 # 默認10個文章標題,由于僅顯示標題,可適當設置為較大的數值
  yearly: true  # 生成年視圖
  monthly: true # 生成月視圖
  daily: false # 生成日視圖,默認關
  order_by: -date # 排序

tag_generator: # 標簽中各個標簽下文章列表頁面
  per_page: 20 # 默認10篇文章

category_generator: # 分類中各個分類下文章列表頁面
  per_page: 20 # 默認10篇文章

Extensions 插件

Hexo 有強大的插件系統,豐富的插件給 Hexo 帶來了生氣。

上面部署一節提到了 deploy 插件。可以看到一個插件的生效不僅需要下載,可能還需要修改配置,后續我們會接觸的幾個插件皆是如此。

另一個插件就是主題(theme)。

## Themes: https://hexo.io/themes/
theme: landscape

可以看到默認的主題為 landscape,從顯示效果上看顯得少了些現代感。我們可以從 Themes 中選擇更多好看優雅的主題。

你可以和我一樣選擇非常流行的 NexT 主題,它的介紹及說明見:精于心,簡于形(新網址 https://theme-next.org 難產了),下面我們先簡單介紹如何使用此主題。

Hexo 主題:NexT

作為開發者,我更喜歡使用 master 分支,這將包含最新的特性。

$ cd blog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

后續主題可以及時更新到最新版本。

$ cd blog/themes/next
$ git pull --rebase

現在,我們有兩份主要的配置文件,其名稱都是 _config.yml

  • blog/_config.yml:Hexo 本身的配置,我們稱為站點配置文件
  • blog/themes/next/_config.yml:主題相關配置,我們稱為主題配置文件

在 Hexo 中切換主題需要修改站點配置文件中的 theme 一節:

## Themes: https://hexo.io/themes/
theme: next

執行 hexo ghexo s 就可以查看使用了 NexT 主題的博客樣式了。

NexT 主題效果

從預覽可以看到,雖然站點配置文件設置了網站的語言為 zh-Hans 但還是英語顯示(我是說主頁與歸檔這兩個詞……),原因其實很簡單,NexT 主題中,中文需要指定的 language 字段不是 zh-Hans,而是 zh-CN,所以 language 字段的配置需要查看具體的主題是如何定義。NexT 的語言列表對應關系可見 NexT 主題語言文件夾:themes/next/language/,修改之后再次預覽就可以看到切換為中文顯示了。

修改了站點配置文件已經可以使用上簡潔的 NexT 主題了,而主題還可以進行配置使得顯示效果更符合你的心意。

主題配置文件

外觀(Scheme)

NexT 主題通過 Scheme 設置可展現出不同的外觀。而且幾乎可以說所有的配置都可以在 Scheme 之間共用。

修改主題配置文件 scheme 一節:

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

當前提供了四種樣式,去掉某一樣式的行首注釋即可使用,修改之后可預覽查看顯示效果。你可以修改選擇自己喜歡的樣式。

菜單(Menu)

在修改站點配置文件的時候說到博客可以顯示歸檔、分類、標簽等,下面展示如何修改主題配置文件使得能夠真正地展示這幾個頁面。

修改主題配置文件 menu 一節:

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

取消 tags 和 categories 兩行的注釋,預覽可以看到已經在界面上顯示這兩個菜單了,但單擊選擇時頁面提示:Cannot GET /categories/ ,這是因為我們還未創建對應的頁面。

$ hexo new page "tags"
INFO  Created: ~/Documents/blog/source/tags/index.md
$ hexo new page "categories"
INFO  Created: ~/Documents/blog/source/categories/index.md

執行命令后還需要修改 index.md 。

分類與標簽頁不需要標題,當然你也可以自定義一個合適的標題,選擇去掉 title: 或修改它。另外,后續博文內容頁會集成評論服務,頁面會帶有評論功能,因此添加 comments: false 在此頁面上關閉評論功能。并聲明對應的 type: tagstype: categories) 使得在文章中進行配置時可進行歸類。

以 tags/index.md 修改為例(tags/index.md 和 categories/index.md 是一樣的修改):

---
date: 2018-10-06 09:59:20
comments: false
type: tags
---

現在博客上就有了這兩個頁面,只不過,現在頁面上還是空的,因為,文章并沒有增加這兩個屬性,我們需要在文章頭增加對應的內容才能顯示到這兩個頁面上。

創建文章

目前為止還沒有自己創建過文章,經過以上配置,我們就可以開始正式地創建文章了:)

創建新文章命令為:hexo new post "name",這是以 scaffolds/post.md 為模板創建文章,我們打開該模板,可以看到已經添加了 tags,我們還需要添加 categories,這樣創建出的文章中添加的標簽即可就可以歸類到對應的頁面下。如前所述,一篇文章最好使用一個類別(category)和多個標簽(tag)。

---
title: {{ title }}
date: {{ date }}
categories:
- 分類
tags:
- 標簽
- 其他
---

我們真正來創建博客的第一篇文章:

$ hexo new post "my-first-post"
INFO  Created: ~/Documents/blog/source/_posts/my-first-post.md

修改 my-first-post.md:

Tips: 使用 < !--more--> 將文章分為兩部分,首頁只展示前面部分,這樣首頁瀏覽更方便

---
title: my-first-post
date: 2018-10-06 10:10:24
categories:
- 技術向
tags:
- Android
- Performance
---

這是我發布的第一篇文章!

<!--more-->

這是更多的內容。

完成基礎搭建

經過以上步驟,一個 Hexo 博客已經搭建出來了,并且我們可以愉快地發表文章了!

后續可修改的內容還有很多,可以給博客添加更多的功能如搜索、評論、閱讀量統計等,還可以對博客進行個性化定制如頭像、背景的修改等等。這些內容我們可以查看主題的說明文檔、網站、配置文件,它們一般都對支持的配置進行了說明。

博客的修改暫且不表,后續還要考慮一個問題:程序員一般都不只一臺電腦,想在不同電腦上都能維護博客怎么辦?或者說以上配置、發布的內容丟失了,博客又怎么找回?可以看到,遠程倉庫中上傳的只有編譯好的網頁文件,而沒有這些博客源文件、文章、主題、配置等,因此我們需要合理備份這些內容來解決上面這個問題。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,401評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,011評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,263評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,543評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,323評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,874評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,968評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,095評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,605評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,551評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,720評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,242評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,961評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,358評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,612評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,330評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,690評論 2 370

推薦閱讀更多精彩內容