Hexo NexT 博客本地搭建指南

0x01 寫在前面的話

    第一次見到這個這個Hexo主題，是在查找lucene學習指南時看到了阿里中間件博客，文章寫的自然不錯，但博客程序主題更是令我喜歡不已.

 

    於是我便萌生了也想擼一個的沖動。

    既然想擼一個，那么咱們自然首先得來Hexo 官網看看吧。

0x02 上官網

Hexo官網：https://hexo.io/zh-cn/

 0x03 四大特性

 

Tips:這么好的東西，就問你心動不心動~

 0x04 搭建環境

 點擊開始后我們便進入了開發文檔界面，

安裝前提

安裝 Hexo 相當簡單。然而在安裝前，您必須檢查電腦中是否已安裝下列應用程序：

• Node.js
• Git

如果您的電腦中已經安裝上述必備程序，那么恭喜您！接下來只需要使用 npm 即可完成 Hexo 的安裝。

$ npm install -g hexo-cli

Mac 用戶

您在編譯時可能會遇到問題，請先到 App Store 安裝 Xcode，Xcode 完成后，啟動並進入 Preferences -> Download -> Command Line Tools -> Install 安裝命令行工具。

 如果您的電腦中尚未安裝所需要的程序，請根據以下安裝指示完成安裝

安裝 Git

Git官網: https://git-scm.com/download/

• Windows：下載並安裝 git.
• Mac：使用 Homebrew, MacPorts ：brew install git;或下載 安裝程序 安裝。
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

Windows 用戶

由於眾所周知的原因，從上面的鏈接下載git for windows最好掛上一個代理，否則下載速度十分緩慢。也可以參考這個頁面，收錄了存儲於百度雲的下載地址。

安裝 Node.js

安裝 Node.js 的最佳方式是使用 nvm，但是由於下面這個提示，咱們直接用安裝包安裝吧。

如果想用nvm方式安裝請移步：https://hexo.io/zh-cn/docs/

Windows 用戶

對於windows用戶來說，建議使用安裝程序進行安裝。安裝時，請勾選Add to PATH選項。
另外，您也可以使用Git Bash，這是git for windows自帶的一組程序，提供了Linux風格的shell，在該環境下，您可以直接用上面提到的命令來安裝Node.js。打開它的方法很簡單，在任意位置單擊右鍵，選擇“Git Bash Here”即可。由於Hexo的很多操作都涉及到命令行，您可以考慮始終使用Git Bash來進行操作。

node.js 官網：https://nodejs.org/en/

下載后點擊安裝，我們可以看到這個界面

Tips: 這里我們看到在安裝Node.js 的時候會安裝一個NPM 包管理器，這樣我們才能執行待會的NPM命令。

Add to Path, Node.js and npm

npm modules

 

這兩個選擇Entire feature will be installed on local hard drive不然會出問題。

安裝 Hexo

在任意位置單擊右鍵，選擇“Git Bash Here”即可。

Tips: 由於Hexo的很多操作都涉及到命令行，您可以考慮始終使用Git Bash來進行操作。

所有必備的應用程序安裝完成后，即可使用 npm 安裝 Hexo。

$ npm install -g hexo-cli

 執行后會像這樣

0x05 建站

安裝 Hexo 完成后，我們其實需要切換下目錄

當前我們位置處於桌面，因此假設我想把站建立在C:\Users\fairy\Documents\HexoBlog目錄下

那么需要執行命令

cd ..

 

Tips:這里注意下這個cd和..后面要有空格，這個是和linux有點不太一樣的。

再切換到Documents目錄

cd Documents

 

創建文件夾HexoBlog

mkdir HexoBlog

 

請執行下列命令，Hexo 將會在指定文件夾中新建所需要的文件。

hexo init HexoBlog

 執行成功后會變成這樣

然后進入這個文件夾

cd HexoBlog

進行安裝

npm install

 執行命令后卡看到回顯：

生成目錄結構哦如圖所示

新建完成后，指定文件夾的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

 

 

 

 

 

 _config.yml

網站的 配置 信息，您可以在此配置大部分的參數。

 package.json

應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-server": "^0.2.0"
  }
}

 

 scaffolds

模版 文件夾。當您新建文章時，Hexo 會根據 scaffold 來建立文件。

Hexo的模板是指在新建的markdown文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那么每次新建一篇文章時都會包含這個修改。

source

資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下划線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其他文件會被拷貝過去。

themes

主題 文件夾。Hexo 會根據主題來生成靜態頁面。

0x06 配置

Hexo配置：https://hexo.io/zh-cn/docs/configuration.html

0x07 指令

Hexo指令: https://hexo.io/zh-cn/docs/commands.html

0x08 遷移

Hexo遷移: https://hexo.io/zh-cn/docs/migration.html

 0x09 配置NexT模板

其他中文教程：https://github.com/iissnan/hexo-theme-next/blob/master/README.cn.md

在終端切換到hexo 根目錄. 在hexo目錄下一定有 node_modules, source, themes 和其他文件夾:

ls

執行后你將看到這樣的界面：

從 github 上獲取主題

下載最新發布的版本

下載地址：https://github.com/iissnan/hexo-theme-next/releases/latest

創建主題文件夾

mkdir themes/next

 解壓后結構如圖所示：

復制解壓的文件到theme/next文件夾下

在 hexo 根目錄下 的配置文件_config.yml里設置主題:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

配置文件詳情：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone:

# 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_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
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
# 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
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

執行部署命令

hexo deploy

 執行成功后會如圖所示

啟動服務

hexo server

 訪問頁面：

http://127.0.0.1:4000/

 

成功后界面