Hexo系列(一) 搭建博客網站

寫在前面的話：本系列文章主要參考 Hexo官方說明文檔，同時結合本身在使用過程當中的一些心得體會，擷取下來，和你們分享分享。好，下面閒話很少說，立刻開始咱們的 Hexo 之旅吧

舒適提醒：博主使用的操做系統是 Win10，其餘操做系統可能會略有不一樣

1、Hexo 簡介

Hexo 是什麼呢？也許引用官方文檔中的說明是再好不過了：

Hexo 是一個快速、簡潔且高效的 博客框架。它使用 Markdown（或其餘渲染引擎）解析文章，在數秒內，便可使用靚麗的主題生成靜態網頁

2、Hexo 安裝

一、安裝 Git

Git 是一個開源的分佈式版本控制系統

下載地址：https://git-scm.com/download，按照默認傻瓜式安裝就行了

補充一句，若是你已經安裝了 Git，你能夠經過 Git 自己得到最新的開發版本：

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

完成以後到桌面空白處單擊鼠標右鍵，若是有出現 Git Bash Here 選項，則證實已經安裝成功

二、安裝 Node.js

Node.js 是一個基於 Google V8 引擎的 JavaScript 環境，它支持在後端運行 JavaScript

而 NPM 是默認與 Node.js 一塊兒安裝的包管理工具

下載地址：https://nodejs.org/en，一樣是按照默認傻瓜式安裝就行了

完成以後到桌面空白處點擊鼠標右鍵，選擇 Git Bash Here 進入 bash 窗口

輸入 node -v 命令可查看 node 版本，輸入 npm -v 命令可查看 npm 版本，用於驗證安裝是否成功

$ node -v
v8.11.3

$ npm -v
5.6.0

三、下載 Hexo

在以前說過，NPM 是一個包管理工具，所以咱們能夠經過 NPM 工具下載 Hexo 框架

npm install moduleName 命令用於下載模塊，其中 -g 參數表示在全局進行安裝

$ npm install -g hexo

等待完成以後，輸入命令 hexo -v 查看 Hexo 版本，驗證安裝是否成功

$ hexo -v
hexo: 3.7.1
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

3、Hexo 本地建站

一、本地建站

選擇一個合適的位置建立一個文件夾，該文件夾將做爲 Hexo 的根目錄，用來儲存本地文件

進入該文件夾打開 git bash 窗口，輸入命令 hexo init 和 npm install

hexo init 命令能夠將該文件夾初始化爲 Hexo 根目錄

npm install 命令能夠自動安裝依賴列表中列出的全部模塊

$ hexo init
INFO  Cloning hexo-starter to file
......
INFO  Install dependencies
......
added 397 packages in 34.63s
INFO  Start blogging with Hexo!

$ npm install
......
audited 4704 packages in 5.315s
found 0 vulnerabilities

二、基本配置

打開 根目錄 下的 _config.yml 文件，它是一個配置文件，能夠直接用記事本打開

下面介紹幾個比較重要配置，完整的網站配置能夠參考個人另外一篇文章 —— Hexo系列(二) 配置文件詳解

注意在設置時，屬性與值之間須要留有一個空格，例如：language: zh-CN

#Site 網站相關配置
title           網站標題
subtitle        網站副標題
description     網站描述
keywords        網站關鍵詞
author          網站做者名字
language        網站使用的語言，這裏填zh-CN
timezone        網站使用的時區，這裏默認使用電腦的時區

三、測試

至此，利用 Hexo 搭建的我的博客網站已經能夠在本地上正常運行了

咱們一塊兒來看看效果吧，打開 git bash，輸入命令 hexo s 啓動本地站點

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

若是出現了這樣的提示信息，即表示本地建站成功

在瀏覽器地址欄中輸入 http://localhost:4000/， 就能夠看到站點在本地運行的結果了

4、Hexo 遠端部署

咱們知道，GitHub 是一個基於 git 的代碼託管平臺，是世界上最大的開源社區

GitHub 提供了一項名爲 GitHub Pages 的服務，它容許用戶自定義項目首頁替代默認的源碼列表

所以，GitHub Pages 能夠被認爲是由用戶編寫的、託管在 GitHub 上的靜態網頁

而咱們的目的，正是要把用 Hexo 在本地搭建的網站部署到 Github 上，使得站點能夠被公共訪問

一、註冊 Github 帳號

登錄 GitHub官網 ，按要求填寫好本身的我的信息（包括用戶名，郵箱，密碼等），而後進行郵箱驗證後就註冊好 GitHub 帳號了，十分方便快捷

完成以後還須要在本地配置一下本身的我的信息，打開 git bash 窗口，輸入如下的命令便可

（注意要將 your_name 和 your_email 替換成本身的信息）

$ git config --global user.name your_name
$ git config --global user.email your_email

二、建立 GitHub 倉庫

打開 GitHub 官網的我的首頁，點擊 New repository 新建倉庫，並按如下說明填寫倉庫信息：

Repository name 的格式爲 username.github.io，其中，username 是本身的 GitHub 名稱

另外，建議勾選 Initialize this repository with a README 選項，生成 README.md 文件

最後點擊 Create repository，建立倉庫

此時打開 Settings 就能夠看到本身的我的網站已經生成，網址爲 https://username.github.io

三、安裝插件

進入站點根文件夾，打開 git bash 輸入 npm install hexo-deployer-git --save 命令安裝插件

$ npm install hexo-deployer-git --save

四、修改配置

打開根文件夾下的 _config.yml 配置文件，進行以下配置

（注意要將 username 替換成本身的名字，而且在屬性與值之間留一個空格）

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

五、配置 SSH

進入站點根文件夾，打開 git bash，輸入 ssh-keygen -t rsa -C "your_email" 命令並一路回車得到密鑰

（注意將 your_email 替換成本身的郵箱地址）

完成後，根據提示信息中的文件地址 /c/Users/user/.ssh/id_rsa.pub 找到 id_rsa.pub 文件，複製文件裏面的內容

$ ssh-keygen -t rsa  -C "your_email"

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/user/.ssh/id_rsa): <Enter>
Enter passphrase (empty for no passphrase): <Enter>
Enter same passphrase again: <Enter>
Your identification has been saved in /c/Users/user/.ssh/id_rsa.
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:0Is/n+PgAf+mUEhFgTx+nVyJRZ4Pk/nqj3YOnVOAQmE email_address
The key's randomart image is:
+---[RSA 2048]----+
|     . o+.E=o.   |
|      +o o..o=   |
|     .o..o.oO .  |
|     ..+..+. = . |
|      +.S     o .|
|       =     o o |
|      . *   o +  |
|       o *oo.o.. |
|        o+=oo+o  |
+----[SHA256]-----+

登陸 Github，打開 Settings

選擇 SSH and GPG keys，選擇 New SSh Key

將複製的內容添加到 Key 中， Title 能夠本身設定，最後點擊 Add SSH Key 便可

最後，回到站點根文件夾，打開 git bash，輸入 ssh -T git@github.com 命令驗證是否添加成功

$ ssh -T git@github.com

The authenticity of host 'github.com (13.250.177.223)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? <yes> <Enter>
Warning: Permanently added 'github.com,13.250.177.223' (RSA) to the list of known hosts.
Hi Forwhfang! You've successfully authenticated, but GitHub does not provide shell access.

六、發佈網頁

git bash 中輸入命令 hexo g 生成靜態文件，輸入命令 hexo d 部署到 Github

此時，打開 https://username.github.io 就能夠看見已經部署好的網站了，大功告成！

【Hexo系列相關文章】

• Hexo系列(一) 搭建博客網站

• Hexo系列(二) 配置文件詳解

• Hexo系列(三) 經常使用命令詳解

• Hexo系列(四) NexT主題配置

• Hexo系列(五) 撰寫文章