使用Hexo + GitHub Pages 搭建我的博客

時間 2019-11-13

標籤使用 hexo github pages 搭建我的博客欄目 Git 简体版

原文原文鏈接

一.前言

　　以前是在CSDN上寫博客的，可是無奈其廣告滿天飛，還有由於我的不太喜歡CSDN博客裏的一些東西，加上看到不少技術大牛都有本身的我的博客，因而乎！便想着搭建一個本身的我的博客。其實以前寫博客仍是追求於有不少人來看，以知足本身這樣的一個慾望，後來慢慢以爲寫博客無非是記錄一下本身成長的歷程，別人看不看其實也是可有可無的。html

　　就在這各樣的緣由驅使下，便開始了搭建我的博客之路，第一次使用Hexo+碼雲搭建了一次博客，可是由於其老是加載不了個人博客樣式，沒辦法只好放棄了，可是過了幾天，以前的動力又忽然出現了，因此就再一次踏上了搭建我的博客之路，不過此次是GitHub+Hexo了，沒想到此次是一次成功，感受良好，並無像搭建時感受那麼複雜。想着或許也有人和我同樣，因此想着寫一篇簡單的搭建教程，和你們分享一下。node

二.搭建前準備

　1).安裝Git

　　1.首先是下載Git（此教程中全部軟件下載安裝僅以Mac爲例），下載文件的下載地址是：https://git-scm.com/download/mac ，打開頁面找到這個位置，能夠在這裏選擇本身所想要的下載版本。以下圖：git

　　2.下載完成後，便開始安裝，安裝完成以後，能夠在終端輸入命令查看版本，若是顯示則說明安裝成功。至於Git的學習資料，你們能夠去官網。命令以下：github

git --version

　　3.而後建立一個全局用戶名、全局郵箱做爲配置信息，這裏的user.name是你Github上的名字，user.email也是你Github註冊的郵箱。npm

git config --global user.name "***"
git config --global user.email "***@example.com"

　2).安裝Node

　　1.首先是下載node，打開弄的官網：https://nodejs.org/en/download/ ，在官網頁面找到這個位置，選擇你所須要的系統及版本下載便可。以下圖：ubuntu

　　2.在官網中下載完成以後，點擊安裝，而後一路next便可。安裝完成後，打開終端輸入node -v 會返回當前安裝的版本號，以下：瀏覽器

****MacBook-Pro:~ vincent$ node -v
v10.11.0

　　而後再輸入npm -v 驗證，以下：服務器

****MacBook-Pro:~ vincent$ npm -v
6.4.1

　　如以上，即是已安裝成功。markdown

三.搭建 Hexo 博客

　　1.安裝 Hexo，在電腦中新建一個 blog 文件夾，用來存放本身的博客文件，而後在終端進入你所建立的文件夾路徑下，執行如下代碼（由於我這裏以前已經安裝了，就不展現結果了）：hexo

npm install -g hexo-cli

　　2.初始化 Hexo，獲得 hexo 文件夾，用於存放 Hexo 博客全部的文件，包括下面會講到的主題文件，都是在終端執行如下代碼：（若是無特別提示，如下代碼基本都在終端窗口執行相關命令）

hexo init hexo

　　結果如圖：

　　3. 配置 Hexo，進入 hexo 文件夾安裝依賴，部署造成的文件，分別執行如下代碼：

cd hexo
npm install
hexo generate

　　結果如圖：

　　4. 啓動服務器：執行如下代碼，能夠看到服務器代碼是 4000

hexo server

　　結果以下：

****MacBook-Pro:hexo vincent$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

　　5. 打開瀏覽器輸入http://localhost:4000/ ，結果以下圖，能夠看到初始化的 Hexo 博客已經搭建成功。

四.將初始化的 Hexo 博客部署到 GitHub Pages

　　1. 在Github上，新建一個倉庫，倉庫名爲：hexo.github.io ，以下圖所示：（這個倉庫的名稱必須嚴格按照 username.github.io 的格式來命名）

　　2. 配置 Git 我的信息：打開一個終端窗口，進入到blog路徑下，輸入下面的命令:

git config --global user.name " GitHub 用戶名 "
git config --global user.email " GitHub 郵箱 "

　　3. 生成 SSH KEY，其實就是生成一個公鑰和密鑰，由於 GitHub 須要一個密鑰才能與本地相鏈接。執行如下命令，並連續按 3 次回車生成密鑰：

ssh-keygen -t rsa -C " 郵箱地址 "

　　由於我以前已經生成了這個密鑰，這裏就不展現了。

　　4.SSH KEY 生成以後會默認保存在 /Users/電腦名用戶名/.ssh 目錄中，打開這個目錄，打開名爲「id_rsa.pub」文件，複製所有內容，即複製密鑰。

　　5.打開 GitHub ，依次點擊頭像-->Settings-->SSH and GPG keys-->Add SSH key，將複製的密鑰粘貼到 key 輸入框，最後點擊 Add Key ，SSH KEY 配置成功，以下圖所示：

　　6.修改 hexo 文件夾下的 _config.yml 全局配置文件，修改 deploy 屬性，而後將本地 hexo 項目託管到 GitHub 上，以下圖所示：

deploy:
 type: git    #部署的類型
 repository: git@github.com:compassblog/compassblog.github.io.git # 倉庫地址
 branch: master    #分支名稱
 message: hexo deploy  #提交信息

　　7. 執行下面的命令，安裝 hexo-deployer-git 插件，快速把代碼託管到 GitHub 上

npm install hexo-deployer-git --sava

　　執行結果以下：

****MacBook-Pro:hexo vincent$ npm install hexo-deployer-git --sava
npm WARN deprecated swig@1.4.2: This package is no longer maintained
+ hexo-deployer-git@0.3.1
added 31 packages from 36 contributors and audited 5870 packages in 9.085s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

　　8.執行下面的代碼命令，將 hexo 項目託管到 GitHub 上

hexo clean && hexo generate && hexo deploy

　　執行結果以下：

　　8.在瀏覽器中輸入 https://username.github.io/ 訪問，能夠正常訪，說明博客已經部署到 GitHub 上，以下圖所示：

五.配置我的博客信息

　　這一步是我以爲很重要的，由於我以前在搭建我的博客時，不少教程只是截止到上面第四步而已，可是也有比較細心的人寫了後面步驟的文章，因此仍是很是感謝的（後面我會貼出這兩篇文章的地址的）。

　　1.打開博客目錄，修改Hexo 全局配置文件 _config.yml，這個在第四大步的第六小步已經截圖了，這裏我只貼一下我搭建完成部署到GitHub上的此文件內容（不過有一些私人信息可能並不徹底展現），內容以下：

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

# Site
title: 寒山道
subtitle: 合抱之木，生於毫末；九層之臺，起於累土；千里之行，始於足下。
description: Who has seen the wind? Neither you nor I !
keywords:
author: vincent
language: zh-Hans
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://hsdy.github.io
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: 7
  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: git
  repository: https://github.com/github的name/hsdy.github.io.git
  branch: master    #分支名稱
  message: hexo deploy  #提交信息


search:
  path: search.xml
  field: post
  format: html
  limit: 10000

　　友情提示：若是真的想搭建一個博客，建議要動起手來，一步一步，只有真正行動了，纔會發現本身錯在哪裏，本人就是在這樣的錯誤中慢慢搭建好博客的。

　　特別注意：配置 *.yml 文件有嚴格的格式要求，文件裏全部的配置都是：冒號空格值，而且冒號是英文狀態下的輸入。而 *.yml 格式的文件是 Java 模板引擎 thymeleaf 文件，想了解的能夠前往thymeleaf官網學習一下。

　　3.到這裏咱們在終端進入到hexo目錄下，執行如下命令來本地啓動服務器預覽博客，而後去瀏覽器地址欄訪問就會發現，Hexo 博客的基本站點信息已經配置完畢。

hexo server

六.切換博客主題

　　1.安裝主題命令，在終端中運行到hexo項目目錄下執行：

Next 主題官方下載地址：https://github.com/iissnan/hexo-theme-next
Hexo 博客其餘主題下載地址：https://hexo.io/themes/
Next 主題官方使用文檔地址：http://theme-next.iissnan.com/

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

　　2.修改 hexo 文件夾下的主配置文件 _config.yml ，將 theme 屬性修改成 next ，修改代碼代碼以下：

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

　　4.打開hexo目錄中的 themes 文件夾下的主題文件夾next，打開主題配置文件 _config.yml，以下圖所示：

　　5.在主題文件中配置 Hexo 博客演示外觀，默認的 Hexo 樣式是 Muse ，我這裏選的是 Pesces 樣式，以下所示：

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

　　6.配置網站底部基本信息，具體配置代碼如圖：

　　7.配置菜單按鈕，在主題配置文件中，找到 menu 屬性，具體配置如圖：

　　8.到這裏，網站基本信息的配置基本完成，但這時候本地測試時咱們會發現，打開分類、標籤、關於等幾個頁面時會顯示 404 錯誤，這是由於咱們尚未建立相應的頁面。在終端中hexo文件夾目錄下的source文件夾目錄下執行下面的命令，建立相應的頁面便可，這時候咱們會發現博客目錄的 source 文件夾下已經生成了跳轉頁面的生成，如圖所示：

hexo new page 'categories'
hexo new page 'tags'
hexo new page 'about'

　　9.每個分類菜單都生成了一個 index.md 初始文件，默認包含了 title 和 date 字段，咱們須要給每一 index.md 文件添加上 type 字段，以下圖所示：

　　十、配置搜索菜單

　　　　(1).安裝 hexo-generator-searchdb ，在hexo項目目錄下執行下面命令：

npm install hexo-generator-searchdb --save

　　　　(2).打開全局配置文件，新增下面代碼

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

　　　　(3).打開主題配置文件，找到 local_search 屬性，開啓本地搜索功能，以下圖所示：

　　注：至此，算是配置的差很少了，能夠執行：hexo s命令來預覽博客。

七.在 Hexo 博客發佈文章並託管到 GitHub 上

　　1.這也是我以爲比較重要的一步，在hexo博客目錄下執行以下命令，新建一篇博客，執行完命令後能夠發如今source/_posts文件夾下多了一個你所新建的md文件。以下所示：

hexo new "Hello Hexo"

特別提示：Hexo 發佈的文章是 Markdown 格式的文件，如沒使用過 Markdown 編輯器的同窗，能夠自行去學習一下 Markdown 語法，半小時基本能夠掌握基本的語法了，推薦一個學習 Markdown 基本語法的網址：http://wowubuntu.com/markdown/

2.給文章添加分類和標籤，直接在所要編輯文章的頭部添加以下代碼便可，多個分類和標籤可使用英文狀態下的句號分隔。

---
title: tags
date: 2018-10-19 12:23:21
type: tags
categories: [Hexo]
---

　　3.本地啓動，在瀏覽器測試預覽文章，如圖所示：

　　4.添加閱讀全文按鈕：在文章的任意位置添加下面命令便可.

<!--more-->

　　5.所要發表的文章在本地預覽無誤後，在終端中執行如下命令，發佈到 GitHub Pages 上，或者在WebStorm中執行。

hexo clean && hexo g && hexo d

　　六、上傳成功後，在瀏覽器地址欄直接訪問本身的域名，便可看到本身編寫的文章已經發布到了 GitHub 上。而且每次發佈文章到 GitHub 都須要在終端中執行下面的命令：

Hexo clean
Hexo g
Hexo d

八.總結

　　至此，博客也已經搭建的差很少了，筆者博客地址是：https://zfy-zhang.github.io ，以前也在網上搜索了很多關於hexo + github搭建博客的文件，但大多幫助不大，可是總有比較細心的博主，這裏比較感謝孔乙己的兩篇博文，給我帶來了很大的幫助，因此我最後博客的搭建成功仍是很是感謝這位博主的。

　　搭建完博客以後的感覺，仍是認爲不少事情要本身親手去作，這樣才能發現更多的問題，紙上談兵永遠解決不了問題。就像看書同樣，不動筆的看書或許不少時候意義並不大，當你用筆記錄了你看書後的一些問題，或者作一個學習筆記，其效果也是徹底不同的，這或許就是所謂的：好記性不如爛筆頭吧。

　　若是有讀者搭建博客中遇到問題，能夠聯繫筆者，聯繫方式在我我的博客中的關於我中可見。

參考：基於 Hexo + GitHub Pages 搭建我的博客，基於 Hexo + GitHub Pages 搭建我的博客（二）