每個技術(shù)人多少都應(yīng)該寫幾篇博客醋界，可以選擇發(fā)布在博客平臺如：CSDN、簡書提完；也可以發(fā)布于自己搭建的博客形纺，簡單好用。

本文記錄了基于 Hexo 框架 + GitHub 搭建個人博客的過程徒欣，應(yīng)該是足夠清晰的逐样，你可以按照此文進(jìn)行實(shí)踐，也期待看到你自己的博客打肝。

本文的實(shí)踐基于 Ubuntu 18.04 和 Deepin 15.7 環(huán)境脂新，博客地址：Mupceet

環(huán)境搭建

Hexo 的介紹及詳細(xì)信息請查看官方文檔，以下記錄實(shí)操的具體細(xì)節(jié)粗梭。

安裝 Git

$ sudo apt install git

Hexo 文檔中寫的 Git 的安裝命令為 sudo apt-get install git-core争便，這是因?yàn)槔弦稽c(diǎn)的 Ubuntu 中有一個軟件也叫 GIT（GNU Interactive Tools），所以 Git 只能叫 git-core 了断医，后來因?yàn)?Git 的名氣實(shí)在太大滞乙，所以 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 環(huán)境變量中，這樣就可以從任意終端中執(zhí)行 npm 命令了。

$ sudo vim /etc/profile

打開 /etc/profile 文件垄琐，增添以下內(nèi)容边酒，注意等號前后沒有空格，保存退出此虑。

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

為了使該環(huán)境變量生效甚纲，可以在終端中執(zhí)行 source /etc/profile 或者 . /etc/profile口锭，但這樣只在當(dāng)前終端中生效朦前。要使得任意終端都生效，退出當(dāng)前用戶再登陸即可鹃操。

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

Node 自帶 npm，所以裝完應(yīng)該會有某個版本的 npm荆隘。但 npm 相比 Node 更新更頻繁恩伺，所以，要是想確保使用的是最新版本的椰拒，你可以執(zhí)行以下命令：

$ npm install npm -g

安裝 Hexo

$ npm install -g hexo-cli

如果網(wǎng)絡(luò)條件不好——你懂的晶渠，比較難以下載成功，這個自行解決燃观。

如果碰到權(quán)限問題褒脯，可以參考鏈接：處理npm權(quán)限問題

安裝后可使用 hexo version 或 hexo -v 查看版本信息。一般來說不需要去關(guān)心這些信息缆毁，我就是看看……

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 目錄下創(chuàng)建 blog 文件夾來存放源文件番川。

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

初始化完成后，目錄內(nèi)容結(jié)構(gòu)為如下內(nèi)容：

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

生成文件及本地調(diào)試

初始化后執(zhí)行 hexo generate 或 hexo g 可生成靜態(tài)文件（public 文件夾）與緩存文件（data.json）脊框。

然后我們執(zhí)行 hexo server 或 hexo s 就可以啟動本地服務(wù)器颁督，訪問網(wǎng)址 http://localhost:4000/ 就可以查看文章效果了。

初始效果

接下來就是部署網(wǎng)站等簡單的操作浇雹，好了沉御，本文到此為止，大家自行實(shí)踐吧昭灵。

……

好吧吠裆，其實(shí)真正的重點(diǎn)才剛剛開始……

部署遠(yuǎn)程服務(wù)器

感謝 GitHub 提供的 Pages 服務(wù)，可用來部署靜態(tài)網(wǎng)頁虎锚。首先你得注冊網(wǎng)站的賬號硫痰，這里就不具體展開了。

注冊賬號之后窜护，記得上傳一下 SSH 公鑰效斑，便于部署、上傳操作柱徙。具體操作請查看網(wǎng)站的幫助文檔：

Github: Connecting to GitHub with SSH

創(chuàng)建 GitHub Pages

1. 創(chuàng)建項(xiàng)目

創(chuàng)建一個名為 username.github.io 的項(xiàng)目缓屠，例如我創(chuàng)建的項(xiàng)目為 https://github.com/Mupceet/mupceet.github.io奇昙。從這個例子中可以看到，這里 username 大小寫可以不完全對應(yīng)敌完。

2. 部署內(nèi)容

將 Hexo 生成的靜態(tài)文件上傳到該倉庫中储耐，就可以通過訪問 username.github.io 來查看你的博客，也就是可以看到剛才本地調(diào)試時看到的網(wǎng)頁了滨溉。這個上傳過程會使用 hexo deploy 來操作什湘。

部署

上面提到了要使用命令 hexo deploy 上傳文件，這需要下載插件晦攒，并且要修改站點(diǎn)配置文件 _comfig.yml闽撤，關(guān)于這個配置文件后續(xù)會介紹，這里暫時先修改部署所需要的配置脯颜。

首先安裝相關(guān)插件：

注意：插件下載時需要在博客的文件夾中哟旗，在本文就是 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

最后執(zhí)行 hexo deploy 或者 hexo d 就可以將其部署到服務(wù)器上≌⒉停現(xiàn)在訪問對應(yīng)的域名就可以看到你自己的博客啦！

后續(xù)更新文章內(nèi)容或者配置矾芙，標(biāo)準(zhǔn)流程如下：

$ hexo g
$ hexo s
$ hexo d

事實(shí)上舍沙，我每次本地做了修改，執(zhí)行 hexo g 生成內(nèi)容后蠕啄，都會使用 hexo s -p 2333 --debug 然后訪問 http://localhost:2333/ 查看排版格式是否正確场勤、是否有錯別字。加 debug 參數(shù)是為了可以在訪問頁面時看到調(diào)試信息歼跟，便于定位和媳、解決問題。在調(diào)整到本地查看效果滿意后哈街，最后再 hexo d 部署到遠(yuǎn)程留瞳，完成一次博客的更新。

站點(diǎn)配置文件

上文提到了 _config.yml 這一配置文件骚秦，它是關(guān)于網(wǎng)站的一些配置她倘，具體說明可見 Hexo 官方文檔。以下對官網(wǎng)有詳細(xì)說明的內(nèi)容就不再贅述作箍，優(yōu)先查看官網(wǎng)文檔也是個好習(xí)慣硬梁。

# Site 網(wǎng)站
# URL 網(wǎng)址
# Directory 目錄
# Writing 文章
# Home page setting 主頁相關(guān)設(shè)置
# Category & Tag 分類 & 標(biāo)簽
# Date / Time format 日期 / 時間格式
# Pagination 分頁
# Extensions 插件

以上內(nèi)容在官網(wǎng)中都有詳細(xì)的說明介紹，在你搭建的開始胞得，不需要在配置上面花費(fèi)過多的精力荧止，大部分保持默認(rèn)設(shè)置即可。這里只補(bǔ)充說明有必要修改的部分。

Site 網(wǎng)站

這一部分是顯示在頁面上的重要基本信息跃巡，如網(wǎng)站的標(biāo)題危号、作者、說明等素邪。這一定是要修改的外莲，以我的配置為例：

# Site
title: Mupceet # 博客標(biāo)題
subtitle: Don't Repeat Yourself # 博客副標(biāo)題
description:  君子坦蕩蕩 小人長戚戚 # 博客描述，部分主題會用來生成簡介
keywords: # 通常建議包含網(wǎng)站的關(guān)鍵詞
author: Mupceet # 博客作者兔朦，部分主題會用來顯示作者
language: zh-Hans # 語言偷线，具體需要查看主題theme說明
timezone: # 默認(rèn)使用電腦的時區(qū)

URL 網(wǎng)址

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

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

即：域名 + 年 + 月 + 以 - 為連接符的英文標(biāo)題烘绽，因此修改配置如下：

# 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 主頁相關(guān)設(shè)置

默認(rèn)配置文件中只寫了 index_generator 這部分淋昭，也就是首頁的配置，事實(shí)上安接，查看 node_modules 文件中，可以看到有以下幾個 generator：

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

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

分別查看這些 module 的 README 文件痕鳍，可以將它們內(nèi)容組合起來硫豆，還是以我的配置為例進(jìn)行說明：

# 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 # 首頁顯示多少篇文章，默認(rèn)為10笼呆，如果值為0則不分頁熊响。由于首頁會顯示文章的摘要內(nèi)容，建議不要取太大的數(shù)值诗赌，造成翻頁定位困難
  order_by: -date # 排序汗茄，默認(rèn)時間逆序，即最新的在最上面

archive_generator: # 歸檔文章列表頁面
  per_page: 20 # 默認(rèn)10個文章標(biāo)題铭若，由于僅顯示標(biāo)題洪碳，可適當(dāng)設(shè)置為較大的數(shù)值
  yearly: true  # 生成年視圖
  monthly: true # 生成月視圖
  daily: false # 生成日視圖，默認(rèn)關(guān)
  order_by: -date # 排序

tag_generator: # 標(biāo)簽中各個標(biāo)簽下文章列表頁面
  per_page: 20 # 默認(rèn)10篇文章

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

Extensions 插件

Hexo 有強(qiáng)大的插件系統(tǒng)叼屠，豐富的插件給 Hexo 帶來了生氣瞳腌。

上面部署一節(jié)提到了 deploy 插件【涤辏可以看到一個插件的生效不僅需要下載嫂侍，可能還需要修改配置，后續(xù)我們會接觸的幾個插件皆是如此。

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

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

可以看到默認(rèn)的主題為 landscape纯命，從顯示效果上看顯得少了些現(xiàn)代感。我們可以從 Themes 中選擇更多好看優(yōu)雅的主題痹栖。

你可以和我一樣選擇非常流行的 NexT 主題亿汞，它的介紹及說明見：精于心，簡于形（新網(wǎng)址 https://theme-next.org 難產(chǎn)了）揪阿，下面我們先簡單介紹如何使用此主題疗我。

Hexo 主題：NexT

作為開發(fā)者，我更喜歡使用 master 分支南捂，這將包含最新的特性吴裤。

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

后續(xù)主題可以及時更新到最新版本。

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

現(xiàn)在溺健，我們有兩份主要的配置文件麦牺，其名稱都是 _config.yml：

• blog/_config.yml：Hexo 本身的配置，我們稱為站點(diǎn)配置文件
• blog/themes/next/_config.yml：主題相關(guān)配置鞭缭，我們稱為主題配置文件

在 Hexo 中切換主題需要修改站點(diǎn)配置文件中的 theme 一節(jié)：

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

執(zhí)行 hexo g 和 hexo s 就可以查看使用了 NexT 主題的博客樣式了剖膳。

NexT 主題效果

從預(yù)覽可以看到，雖然站點(diǎn)配置文件設(shè)置了網(wǎng)站的語言為 zh-Hans 但還是英語顯示（我是說主頁與歸檔這兩個詞……）岭辣，原因其實(shí)很簡單吱晒，NexT 主題中，中文需要指定的 language 字段不是 zh-Hans沦童，而是 zh-CN仑濒，所以 language 字段的配置需要查看具體的主題是如何定義。NexT 的語言列表對應(yīng)關(guān)系可見 NexT 主題語言文件夾：themes/next/language/偷遗，修改之后再次預(yù)覽就可以看到切換為中文顯示了墩瞳。

修改了站點(diǎn)配置文件已經(jīng)可以使用上簡潔的 NexT 主題了，而主題還可以進(jìn)行配置使得顯示效果更符合你的心意鹦肿。

主題配置文件

外觀（Scheme）

NexT 主題通過 Scheme 設(shè)置可展現(xiàn)出不同的外觀矗烛。而且?guī)缀蹩梢哉f所有的配置都可以在 Scheme 之間共用。

修改主題配置文件 scheme 一節(jié)：

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

當(dāng)前提供了四種樣式箩溃，去掉某一樣式的行首注釋即可使用瞭吃，修改之后可預(yù)覽查看顯示效果。你可以修改選擇自己喜歡的樣式涣旨。

菜單（Menu）

在修改站點(diǎn)配置文件的時候說到博客可以顯示歸檔歪架、分類、標(biāo)簽等霹陡，下面展示如何修改主題配置文件使得能夠真正地展示這幾個頁面和蚪。

修改主題配置文件 menu 一節(jié)：

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags # 取消注釋止状，需要手動創(chuàng)建該頁面
  categories: /categories/ || th # 取消注釋，需要手動創(chuàng)建該頁面
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

取消 tags 和 categories 兩行的注釋攒霹，預(yù)覽可以看到已經(jīng)在界面上顯示這兩個菜單了怯疤，但單擊選擇時頁面提示：Cannot GET /categories/ ，這是因?yàn)槲覀冞€未創(chuàng)建對應(yīng)的頁面催束。

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

執(zhí)行命令后還需要修改 index.md 集峦。

分類與標(biāo)簽頁不需要標(biāo)題，當(dāng)然你也可以自定義一個合適的標(biāo)題抠刺，選擇去掉 title: 或修改它塔淤。另外，后續(xù)博文內(nèi)容頁會集成評論服務(wù)速妖，頁面會帶有評論功能高蜂，因此添加 comments: false 在此頁面上關(guān)閉評論功能。并聲明對應(yīng)的 type: tags （type: categories） 使得在文章中進(jìn)行配置時可進(jìn)行歸類罕容。

以 tags/index.md 修改為例（tags/index.md 和 categories/index.md 是一樣的修改）：

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

現(xiàn)在博客上就有了這兩個頁面备恤，只不過，現(xiàn)在頁面上還是空的杀赢，因?yàn)楹娑澹恼虏]有增加這兩個屬性，我們需要在文章頭增加對應(yīng)的內(nèi)容才能顯示到這兩個頁面上脂崔。

創(chuàng)建文章

目前為止還沒有自己創(chuàng)建過文章，經(jīng)過以上配置梧喷，我們就可以開始正式地創(chuàng)建文章了：）

創(chuàng)建新文章命令為：hexo new post "name"砌左，這是以 scaffolds/post.md 為模板創(chuàng)建文章，我們打開該模板铺敌，可以看到已經(jīng)添加了 tags汇歹，我們還需要添加 categories，這樣創(chuàng)建出的文章中添加的標(biāo)簽即可就可以歸類到對應(yīng)的頁面下偿凭。如前所述产弹，一篇文章最好使用一個類別(category)和多個標(biāo)簽(tag)。

---
title: {{ title }}
date: {{ date }}
categories:
- 分類
tags:
- 標(biāo)簽
- 其他
---

我們真正來創(chuàng)建博客的第一篇文章：

$ 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:
- 技術(shù)向
tags:
- Android
- Performance
---

這是我發(fā)布的第一篇文章！

<!--more-->

這是更多的內(nèi)容匾嘱。

完成基礎(chǔ)搭建

經(jīng)過以上步驟斤斧，一個 Hexo 博客已經(jīng)搭建出來了，并且我們可以愉快地發(fā)表文章了霎烙！

后續(xù)可修改的內(nèi)容還有很多撬讽，可以給博客添加更多的功能如搜索蕊连、評論、閱讀量統(tǒng)計等游昼，還可以對博客進(jìn)行個性化定制如頭像甘苍、背景的修改等等。這些內(nèi)容我們可以查看主題的說明文檔烘豌、網(wǎng)站载庭、配置文件，它們一般都對支持的配置進(jìn)行了說明扇谣。

博客的修改暫且不表昧捷，后續(xù)還要考慮一個問題：程序員一般都不只一臺電腦，想在不同電腦上都能維護(hù)博客怎么辦罐寨？或者說以上配置靡挥、發(fā)布的內(nèi)容丟失了，博客又怎么找回鸯绿？可以看到跋破，遠(yuǎn)程倉庫中上傳的只有編譯好的網(wǎng)頁文件，而沒有這些博客源文件瓶蝴、文章毒返、主題、配置等舷手，因此我們需要合理備份這些內(nèi)容來解決上面這個問題拧簸。