如何使用Github+Hexo快速搭建個人博客

如何使用Github+Hexo快速搭建個人博客

假設道友已經都是git熟練使用者了,這裏不再詳細介紹git相關知識。
git還未入門的可以查看Git常用核心命令
或者訪問Pro Git(中文版) get 更多知識點。

在Github新建倉庫,取名 account.github.io

這裏的 account 是您的在Github上的賬戶名。

新建倉庫

也可以直接用命令創建倉庫:

echo "# Byron4j.github.io" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/Byron4j/Byron4j.github.io.git
git push -u origin master

或者將已經存在的倉庫覆蓋:

git remote add origin https://github.com/Byron4j/Byron4j.github.io.git
git push -u origin master

友好幫助

安裝Node.js

Hexo基於Node.js,所以您還需要安裝Node.js。Node.js的官網下載地址: http://nodejs.cn/download/,選擇適合您操作系統的安裝程序包。

安裝Hexo

Hexo 官方網址: https://hexo.io/zh-cn/。
Hexo使用文檔參考:https://hexo.io/zh-cn/docs/。

使用 npm 安裝 Hexo(演示是在windows-64環境下):

npm install -g hexo-cli

安裝結果如下:

C:\Users\BYRON.Y.Y>npm install -g hexo-cli
C:\Users\BYRON.Y.Y\AppData\Roaming\npm\hexo -> C:\Users\BYRON.Y.Y\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:\Users\BYRON.Y.Y\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\fsevents'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 225 packages from 431 contributors in 60.523s

如何使用 Hexo

指定一個空目錄初始化hexo所需文件:

命令:

hexo init 目錄名(要求是空目錄)
C:\Users\BYRON.Y.Y>hexo init F:\217my_optLogs\001系統相關\系統設計\007\blog
INFO  Cloning hexo-starter to F:\217my_optLogs\001系統相關\系統設計\007\blog
Cloning into 'F:\217my_optLogs\001系統相關\系統設計\007\blog'...
remote: Enumerating objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'F:/217my_optLogs/001系統相關/系統設計/007/blog/themes/landscape'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 867 (delta 0), reused 0 (delta 0), pack-reused 866
Receiving objects: 100% (867/867), 2.55 MiB | 1.52 MiB/s, done.
Resolving deltas: 100% (459/459), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
[32mINFO [39m Install dependencies
npm WARN deprecated [email protected]: no longer maintained
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 421 packages from 500 contributors and audited 4699 packages in 72.178s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

指定一個空目錄初始化hexo所需文件

新建完成後,生成如下目錄文件:

C:\Users\BYRON.Y.Y>dir /B F:\217my_optLogs\001系統相關\系統設計\007\blog
.gitignore
node_modules
package-lock.json
package.json
scaffolds
source
themes
_config.yml

hexo 項目的文件說明

_config.yml 是配置信息

網站的 配置 信息,您可以在此配置大部分的參數。
應用程序的信息。EJS, StylusMarkdown renderer 已默認安裝,您可以自由移除。
更多關於該文件的說明可以參考:https://hexo.io/zh-cn/docs/configuration。

scaffolds 模板文件

模板文件夾,當您新建文章時,hexo會根據模板來創建新的文件。

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

source

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

themes

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

瀏覽博客雛形

進入hexo項目目錄中,使用如下命令開啓博客服務:

hexo s

開啓服務

瀏覽器中訪問:http://localhost:4000

至此,代表着博客已經完成搭建了,剩下的工作就是不斷完善了。

使用Hexo寫文章

在項目目錄下使用如下命令可以創建一片新的文章:

hexo new [layout] <title>

您可以在命令中指定文章的佈局(layout),默認爲 post,可以通過修改 _config.yml 中的 default_layout 參數來指定默認佈局。

佈局(Layout)

Hexo 有三種默認佈局:post、page 和 draft,它們分別對應不同的路徑,而您自定義的其他佈局和 post 相同,都將儲存到 source/_posts 文件夾。

佈局 路徑
post source/_posts
page source
draft source/_drafts

文件名稱

Hexo 默認以標題做爲文件名稱,但您可編輯 new_post_name參數來改變默認的文件名稱,舉例來說,設爲 :year-:month-:day-:title.md可讓您更方便的通過日期來管理文章。

我們修改配置文件new_post_name的值後,新建一篇文章:

F:\217my_optLogs\001系統相關\系統設計\007\blog>hexo new post 如何使用Github+Hexo快速搭建個人博客
INFO  Created: F:\217my_optLogs\001系統相關\系統設計\007\blog\source\_posts\2019-01-27-如何使用Github-Hexo快速搭建個人博客.md

再刷新瀏覽器頁面,可以看到新增了一篇文章:

新發布一篇文章

草稿

剛剛提到了 Hexo 的一種特殊佈局:draft,這種佈局在建立時會被保存到 source/_drafts文件夾,您可通過 publish命令將草稿移動到 source/_posts文件夾,該命令的使用方式與 new十分類似,您也可在命令中指定 layout來指定佈局。

hexo publish [layout] <title>

草稿默認不會顯示在頁面中,您可在執行時加上 --draft參數,或是把 render_drafts參數設爲 true 來預覽草稿。

我們把配置參數設置一下: render_drafts.

#render_drafts: false
render_drafts: true

模版(Scaffold)

在新建文章時,Hexo 會根據 scaffolds 文件夾內相對應的文件來建立文件,例如:

hexo new photo "My Gallery"

在執行這行指令時,Hexo 會嘗試在 scaffolds 文件夾中尋找 photo.md,並根據其內容建立文章,以下是您可以在模版中使用的變量:

變量 描述
layout 佈局
title 標題
date 文件建立日期

導入文章

您可以將已寫好的 .md導入到 _posts目錄裏,完成文章的導入。

扉頁 Front-matter

扉頁 front-matter 是文件最上方以 ---分隔的區域,用於指定個別文件的變量,示例:


---
layout: photo
title: My Gallery
date: 2019-01-27 11:52:58
tags:
---

以下是預先定義的參數,您可以在模板中使用這些參數值並加以利用:

參數 描述 默認值
layout 佈局
title 文章標題
date 建立日期 yyyy-MM-dd HH:mm:ss 格式
updated 更新日期
comments 開啓文章的評論功能 true
tags 標籤(不適用於分頁)
categories 分類(不適用於分頁)
permalink 覆蓋文章網址

分類和標籤

只有文章支持分類和標籤,您可以在 Front-matter 中設置。在其他系統中,分類和標籤聽起來很接近,但是在 Hexo 中兩者有着明顯的差別:分類具有順序性和層次性,也就是說 Foo, Bar 不等於 Bar, Foo;而標籤沒有順序和層次。

categories:
- Diary
tags:
- PS3
- Games

分類方法的分歧

如果您有過使用WordPress的經驗,就很容易誤解Hexo的分類方式。WordPress支持對一篇文章設置多個分類,而且這些分類可以是同級的,也可以是父子分類。但是Hexo不支持指定多個同級分類。下面的指定方法:

categories:

  • Diary
  • Life

會使分類Life成爲Diary的子分類,而不是並列分類。因此,有必要爲您的文章選擇儘可能準確的分類。

JSON Front-matter

除了YAML格式外,還支持json格式的扉頁.
只要將 ---代換成 ;;;即可

,,,
"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

部署到服務器上去

Hexo 提供了快速方便的一鍵部署功能,讓您只需一條命令就能將網站部署到服務器上。

hexo deploy

在開始之前,您必須先在 _config.yml 中修改參數,一個正確的部署配置中至少要有 type 參數,例如:

deploy:
  type: git

您可同時使用多個 deployer,Hexo 會依照順序執行每個 deployer:

deploy:
- type: git
  repo:
- type: heroku
  repo:
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]

安裝 hexo-deployer-git

npm install hexo-deployer-git --save

更多關於部署的信息參考:https://hexo.io/zh-cn/docs/deployment。

Hexo 主題

您 可以在 https://hexo.io/themes/index.html 進行主題的挑選更換。
下載好後放在themes文件夾內,同時在 _config.yml中進行配置變更就好了。

這裏採用了主體: https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/
可參見使用說明。

展示成型的博客

linux作爲後臺服務啓動

安裝 pm2

npm  install -g pm2

博客根目錄下面創建一個hexo_run.js:

const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})

根目錄下執行:

pm2 start hexo_run.js

啓動後臺服務。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章