Hexo博客搭建-有解無憂

本文默認已經安裝好git和node.js環境

版本說明：git version 2.16.2.windows.1 、 node.js v8.9.4

Hexo是什么

　　Hexo 是一個快速、簡潔且高效的博客框架，這里不多介紹，丟個鏈接，感興趣的自己去看吧：Hexo中文官網，里面的東西比較多，不光有hexo使用檔案，還有眾多的hexo插件和主題，

我的Hexo博客主頁效果圖

歡迎來訪~逸竹小站

hexo-homepage

安裝Hexo

$ npm install -g hexo-cli

建立默認主題博客

$ hexo init blog
$ cd blog
$ npm install

blog為博客存盤檔案夾名稱，可隨意命名，本文以blog為例，最好命名與GitHub Pages倉庫名稱一致，省的后面修改，不過都是小case

hexo博客初始檔案夾截圖

此時打開localhost:4000即可看到默認主題的Hexo博客

選擇主題

在官網-主題里面有200+的主題可供選擇，我推薦幾款個人比較喜歡的

簡約款
- hexo-theme-next
- maupassant-hexo
- hexo-theme-melody
炫酷款
- black-blue
- hexo-theme-nebula
實用款
- hexo-theme-pure

應用主題

　　選擇好主題后，進入對應的github專案主頁，一般都會有README檔案幫助完成后續搭建，若無可以參考下面步驟進行，進入之前搭建好的博客主題檔案目錄下（本文為：blog/themes/），檢出主題檔案

$ git clone https://github.com/xxxx

　　然后修改博客組態檔_config.yml，添加下面這行

theme: xxx

注意：①xxx為主題名稱

②不是主題的組態檔哦，在博客檔案夾根目錄下

組態檔詳解

　　搭建整個博客程序中有兩個組態檔，非常重要，一個是博客組態檔，一個是主題組態檔分別存放在各自的根目錄下，檔案名均為_config.yml

博客組態檔

# Hexo 配置

# Site
title: Hexo		# Hexo博客網站標題
subtitle:		# Hexo博客網站子標題
description:	# Hexo博客網站描述
keywords:		# Hexo博客關鍵詞
author: John Doe	# 作者
language:			# 語言
timezone:			# 時區

# URL
url: http://yoursite.com	# 網站網址
root: /						# 網站根目錄
permalink: :year/:month/:day/:title/	# 文章永久鏈接格式
permalink_defaults:			# 永久鏈接每部分默認值，一般不設定

# Directory
source_dir: source		# 資源檔案存盤目錄
public_dir: public		# 公共檔案夾，靜態網站生成目錄
tag_dir: tags			# 標簽目錄
archive_dir: archives	# 文章目錄
category_dir: categories	# 分類目錄
code_dir: downloads/code	# 代碼目錄
i18n_dir: :lang			# i18n國際化
skip_render:

# Writing
new_post_name: :title.md 	# 新博客檔案名格式
default_layout: post		# 默認布局
titlecase: false 			# 是否標題小寫
external_link: true 		# 是否在新的標簽頁打開鏈接
filename_case: 0			# 轉換檔案名1：小寫，2：大寫
render_drafts: false		# 顯示草稿
post_asset_folder: false	# 
relative_link: false		# 是否是用相對路徑作為連接
future: true				# 是否展示未來的文章
highlight:					# 代碼高亮設定
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
index_generator:		# 主頁設定
  path: ''				# 博客根目錄
  per_page: 10			# 分頁大小
  order_by: -date		# 排序，默認日期
  
# Category & Tag
default_category: uncategorized	# 默認分類
category_map:			# 分類集合
tag_map:				# 標簽集合

# Date / Time format
date_format: YYYY-MM-DD	# 日期格式
time_format: HH:mm:ss	# 時間格式

# Pagination
per_page: 10			# 分頁大小
pagination_dir: page	# 分頁目錄

# Extensions
theme: landscape		# 主題

# Deployment
deploy:					# 部署
  type:					# 類別：git

　　主題組態檔，這個是black-blue主題的組態檔，已經比較詳細了，直接貼上來了

# >>> Basic Setup | 基礎設定 <<<

# Header | 主選單
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
  # 主頁: /archives/
  所有文章: /archives/
  玩轉開發工具: /categories/開發工具/
  玩轉數碼: /categories/digital
  演算法學習: /categories/algorithm
  關于我: /about/
# 靜心閱讀: /tags

# Link to your avatar | 填寫頭像地址
avatar: /img/avatar.png

# Small icon of Your site | 站點小圖示地址
favicon: /img/favicon.png

# 域名是否啟用https，如果啟用，js檔案必須https加載
isHttps: true

# Social info. Bar | 社交資訊展示
## Keep "mailto:" in Email | 設定 Email 時保留 "mailto:"
## Encrypt email 加密郵件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安裝對應插件
## https://github.com/hexojs/hexo-generator-feed
subnav:
  github: xxxxx
  weibo: xxxxxxxx
  rss: /atom.xml

  # Google: "#"
# search_box: true

# >>> Conments 評論系統 <<<

disqus:
  on: false
  shortname: xxxxxxxxx
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if
  # you have set "disqus_shortname" in your site's "_config.yml"
changyan:
  on: true
  appid: xxxx
  conf: xxxxxxxxx
  # 是否開啟暢言評論，
  # id 中填寫你的友言用戶數字ID，注冊后進入后臺管理即可查看
  # 暢言評論在 Web 環境下運行，普通本地環境無法查看，請部署后在線上測驗，
gitment:
  on: true
  githubID: yourid
  repo: yourrepo
  client_id: yourid
  client_secret: yoursecret
  lazy: true

# >>> Style Customisation 樣式自定義 <<<

# Background | 背景
## "background_sum": show images form /source/background/的圖片數目
## "on: true": 自動隨機顯示這5張圖片
## "on: false": 自定義顯示圖片設定background_image: 5
background:
  on: true
  background_sum: 1
  background_image: 1

highlight_style:
  on: true
  inline_code: 3  # Value: 0 - 9 可選
  code_block: 2  # Value: 0 - 4
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 通過 inline_code 切換內置文本高亮樣式
  # 通過 code_block 切換內置代碼高亮配色主題

blockquote_style:
  #on: true
  blockquote: 5  # Value: 0 - 7 可選
  # 自定義文章「參考部分」的樣式

# 左邊欄寬度 px
left_col_width: 300

# 目錄中標題不換行
# Keep TOC title on the same line |
toc_nowrap: false

# 自定義"閱讀全文"鏈接按鈕的顯示文字
# Customize the text on excerpt link
excerpt_link: 查看更多 #修改more>>的文字

# 是否顯示邊欄中的搜索框（站內搜索）
# Search Box in left column
search_box: true

# 是否開啟主頁及加載頭像時的影片效果
# Animation in Homepage and Loading avatar
animate: true

# >>> Small features | 小功能設定 <<<

# 是否開啟邊欄多標簽切換
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情鏈接
# friends: false
friends:
  csdn: http://blog.csdn.net/baidu_21483933
  segmentfault: https://segmentfault.com/blog/maocg_web
  簡書: http://www.jianshu.com/users/eb37ef89c746/latest_articles
#是否開啟“關于我”，
aboutme: 愛動漫,愛游戲,愛編程,愛運動,愛的太多了!
#aboutme: false

# 是否在新視窗打開鏈接
open_in_new: false

# Customize feed link 自定義訂閱地址
rss: /atom.xml

# >>> Vendors | 第三方工具 & 服務 <<<

# images viewer | 圖片瀏覽器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 數學公式支持
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否開啟分享
# share: true
baidushare: true
#showshare: true

# 百度、谷歌站長驗證，填寫 HTML 標簽 content
# Site Verification for Google and Baidu. HTML label content.
# google_site: # pFW527fHrjfI0si2w4NQ0w3cTw12AvvuohAu1PUfqKA
# baidu_site: #c167b9feb4f0b208b712c79629c188e4

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X, or Baidu Analytics hash key
google_analytics: xxxxx
baidu_analytics: xxxxxx

# 不蒜子網站計數設定
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: true
  site_visit: 極客到訪數
  page_visit: 本頁閱讀量

# A標簽提示
TipTitle: true

# Loading
# Loading: true

日常產出博客

寫作

新建文章

$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默認為 `post`，可以通過修改 `_config.yml` 中的 `default_layout` 引數來指定默認布局，

$ hexo new photo "My Gallery"

在執行這行指令時，Hexo 會嘗試在 scaffolds 檔案夾中尋找 photo.md，并根據其內容建立文章，所以可以新建幾個博客模板檔案放置在 scaffolds 檔案夾下，

我用的博客模板為：

---
title: {{ title }}
categories: 分類
tags: 
  - 標簽
date: {{ date }}
description: 描述
---

** {{ title }}：** <Excerpt in index | 首頁摘要>

<!-- more -->
<The rest of contents | 余下全文>

新建頁面

$ hexo new [layout] <title>

本地啟動

$ hexo s[erver]
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

　　啟動之后http://localhost:4000 即可看到效果

本地除錯

$ hexo s[erver] --debug

　　進入除錯模式，可以看到詳細的啟動日志，包含hexo版本、作業目錄、插件、博客目錄、靜態檔案等資訊，同時訪問除錯博客時還可以看到各資源回應狀態和時間等資訊，這種模式下除錯博客樣式及特效非常方便，

提交檔案到github

$ git add .
$ git commit -m "提交備注"

　　即可提交到本地倉庫，不熟悉git命令的可以查看我的另一篇博文Git命令匯總

GitHub Pages配置

githubPages

這里倉庫名稱有兩種命名方式：

①github賬戶的 用戶名+github.io，這種倉庫訪問地址為:https://用戶名.github.io/

②隨意命名只要與你其他倉庫名稱不沖突即可，例如hexo-blog，則訪問地址為：https://github.com/+用戶名+/hexo-blog/

大多數都會選擇第一種格式創建倉庫

githubPages1

①GitHub Page倉庫資源檔案必須存放master分之

②下面可以配置自己的域名，配置之后會在倉庫根目錄生成CNAME檔案，同時要將域名決議到倉庫訪問地址

連接本地倉庫和遠程倉庫

　　將本地博客檔案夾名稱改為與倉庫名稱一致，然后將二者關聯

$ git remote [email protected]:用戶名/倉庫名.git

部署到Hexo遠程倉庫

$ hexo c[lean]
$ hexo g[enerate]
$ hexo d[eploy]

hexo命令支持簡寫，條件是只有一個匹配項，egs：當安裝了hexo-douban 之后執行hexo d就需要區分hexo deploy和hexo douban這兩個命令了，可以分別使用hexo de和hexo do來呼叫

部署完成之后即可在上面設定的訪問地址中看到效果了，

Hexo插件推薦

與主題一樣，官方-插件也收錄了200余種插件，這里推薦幾款個人喜歡的

hexo-cli：Hexo命令列基礎插件
hexo-server：基礎插件
hexo-deployer-git：git支持基礎插件
hexo-douban：分享豆瓣讀書、電影、游戲的豆瓣秀插件
hexo-admin：插件版博客后臺管理系統
hexo-admin-ehc：hexo-admin增強版
hexo-auto-category：根據檔案夾自動生成分類
hexo-auto-excerpt：自動摘錄標簽
hexo-generator-search：提供搜索支持
hexo-generator-sitemap：生成sitemap

豆瓣插件

　　這款插件貌似對于我正在用的主題插件(black-blue)支持的不是很好，要修改很多東西，我直接棄用了，但是這款插件的還是不錯的，所以推薦下，

安裝

$ npm install hexo-douban --save

配置

douban:
  user: myDoubanID
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000

user: 你的豆瓣ID.打開豆瓣，登入賬戶，然后在右上角點擊 "個人主頁" ，這時候地址欄的URL大概是這樣："https://www.douban.com/people/xxxxxx/" ，其中的"xxxxxx"就是你的個人ID了，
builtin: 是否將生成頁面的功能嵌入hexo s和hexo g中，默認是false,另一可選項為true(1.x.x版本新增配置項)，
title: 該頁面的標題.
quote: 寫在頁面開頭的一段話,支持html語法.
timeout: 爬取資料的超時時間，默認是 10000ms ,如果在使用時發現報了超時的錯(ETIMEOUT)可以把這個資料設定的大一點，

使用

$ hexo douban
或
$ hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
  -b, --books   Generate douban books only
  -g, --games   Generate douban games only
  -m, --movies  Generate douban movies only

選單

　　如果上面的顯示沒有問題就可以在主題的組態檔 _config.yml 里添加如下配置來為這些頁面添加選單鏈接.

menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page
  Games: /games   #This is your games page

更多資訊可以關注我的個人博客：逸竹小站

也歡迎關注我的公眾號：yizhuxiaozhan，二維碼：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/61986.html

標籤：其他

上一篇：有慷訓來看看

下一篇：作為一名軟體工程系的一員，未來的職業規劃！