前言
想要有一個自己的博客,拿來記平時的筆記。但是又不想去博客平臺注冊賬號,平臺那么多,選擇也是件讓人頭大的事情。又不想自己買服務(wù)器專門搭建一個博客服務(wù)。怎么辦呢,用Hexo + Github Pages,就可以很容易的擁有一個自己的博客了。
簡介
Hexo是一款Node.js開發(fā)的博客框架。它快速、簡潔、高效,支持Markdown語法,是一款簡單易用的博客框架。既可以部署到自己的服務(wù)器,又可以生成靜態(tài)資源文件,放在Github Pages當(dāng)作個人博客使用,無需自己買服務(wù)器部署。
Github Pages支持創(chuàng)建自己的靜態(tài)頁面,并提供Github的二級域名訪問。
安裝和使用
Node.js + npm
安裝Node.js和npm請詳見Node.js官網(wǎng),Hexo官網(wǎng)也有相關(guān)的介紹說明。這里我們從Hexo的安裝開始介紹。
Git
因為我們使用 Github Pages 服務(wù)做博客,所以 git 是必須安裝的。
如果沒有安裝的話,去 git 官網(wǎng)下載安裝即可。
mac 可以直接用 brew install git 命令安裝。
Git 的使用教程不再此文范圍內(nèi),所以不做介紹。推薦官網(wǎng)手冊和廖雪峰的Git學(xué)習(xí)教程。廖大神寫了對Git的介紹到安裝到使用詳細(xì)且易懂的教程。
Hexo
安裝Hexo
$ sudo npm install hexo-cli -g
用Hexo創(chuàng)建一個博客項目
$ hexo init <blog-folder>
啟動博客服務(wù)
用hexo init 創(chuàng)建好項目之后,進(jìn)入項目目錄cd <blog-folder>
然后輸入命令hexo server 或者 hexo s便可以啟動博客服務(wù)。
$ hexo server
啟動成功后有提示:
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
瀏覽器訪問 http://localhost:4000便可以看到博客頁面了。
創(chuàng)建一篇文章
$ hexo new <filename>
此命令執(zhí)行完之后,會在生成 source/_posts/filename.md 文件。用編輯器打開文件,開始編輯文檔內(nèi)容,這便是博客文檔的編輯了。推薦使用 Markdown 語法。
創(chuàng)建一個頁面
$ hexo new page <page-folder-name>
此命令執(zhí)行完之后,會在生成 source/<page-folder-name>/index.md 文件。
Next主題安裝
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
關(guān)于博客主題,博主選了很久決定用 Next,簡潔大方不花哨。
這里給一個其他主題介紹的傳送門:
配置
Hexo 配置
Hexo的配置文檔為 _config.yml
這里介紹幾個主要的配置項:
Site基本信息配置:
# Site
title: 你的博客的名字
subtitle: 你的博客的subtitle
description: 你的博客的描述
author: 你的名字
language: zh-Hans # 語言,默認(rèn)是en。這個是簡體中文
timezone: 時區(qū) # 默認(rèn)是電腦的時區(qū)
favicon: /favicon.ico # 把favicon.ico文件拷貝至source下,這個默認(rèn)的路徑。
avatar: /avatar.jpg # 把你的頭像圖片拷貝到source目錄下。名字你自己定。
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 你的 Github Pages 訪問地址。
博客主題配置:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 配置你的主題為 next
博客部署配置項:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git # 我們要用 Github Pages,所以這里 type 為 git
repo: 你的 github repository 的地址 # 查看code,有一個綠色的 clone or download, 我選的是https
branch: master
Next 配置
Next的配置文檔為 themes/next/_config.yml
同樣這里只介紹介個主要的配置項:
menu 設(shè)置
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories/ # 啟用分類
tags: /tags/ # 啟用標(biāo)簽
archives: /archives/ # 啟用歸檔, hexo 按時間歸檔
about: /about/ # 啟用關(guān)于
要啟用這些 menu,需要 hexo 創(chuàng)建好這幾個 page:
$ hexo new page categories # 生成 source/categories/index.md
$ hexo new page tags # 生成 source/tags/index.md
$ hexo new page about # 生成 source/about/index.md
archives是 hexo 會默認(rèn)有的
創(chuàng)建好之后這些page后,需要對tags和categories下的index.md稍作修改
source/categories/index.md:
---
title: categories
date: 2017-08-11 16:49:50
type: "categories"
comments: false
---
source/tags/index.md:
---
title: tags
date: 2017-08-11 16:49:50
type: "tags"
comments: false
---
修改scaffolds/post.md, 添加上
tags:
categories:
這兩項,然后用 hexo new 創(chuàng)建文章后,在tags: 后添加 tag,在 categories: 后添加分類,就行了。單個 tag 或 分類,可以直接寫,如果是多個的話,寫成[a,b,c]這種形式。
博客樣式設(shè)置
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
Next官方給出了四種可選方案,博主把這四個都試了一遍,決定用第四個,Gemini。啟用的方式就是去掉注釋,把不要的注釋掉。
文章折疊
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
默認(rèn)是顯示全文的。官方給出兩個解決方案,一個是將 auto_excerpt 里的 enable 設(shè)置為 true。但是這種方式不推薦,會將你文章的格式去掉。官方推薦的做法是,在你文檔中想要折疊提示"閱讀全文"的地方加上
<!--more-->
開啟文章版權(quán)聲明
# Declare license on posts
post_copyright:
enable: true # 把這個項設(shè)置為true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
開啟之后,會在每一篇文章中顯示版權(quán)聲明。
開啟social network links
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social: # 去掉這里的注釋
#LinkLabel: Link
GitHub: 你的github主頁地址
博主只加了github主頁地址。其他的參見配置文檔的說明。
點(diǎn)擊這里可以帶你去Next官方的主題設(shè)置教程
創(chuàng)建 Github Pages
首先要有一個 Github 賬號。然后創(chuàng)建一個 repository。你可以在 Github 上看到 綠色的 new repository。

點(diǎn)擊之后進(jìn)入創(chuàng)建頁面:

取一個名字,勾選 Initialize this repository with a README,然后點(diǎn)擊綠色的創(chuàng)建。
創(chuàng)建完之后,到 Settings 選項:

到 Github Pages 那一項去:

選擇 master branch ,然后點(diǎn)擊 save。然后你會看到一個你 Pages 主頁的地址。這就是你以后的博客訪問地址了。

部署至 Github Pages
前面配置章節(jié)講了如何配置 Hexo 的 repo,所以這時候,當(dāng)我們準(zhǔn)備好時,先執(zhí)行 hexo clean 清掉之前的數(shù)據(jù)和頁面,再執(zhí)行 hexo generate 生產(chǎn)新的頁面, 最后執(zhí)行部署命令 hexo deploy,便成功部署到了 Github Pages。
即:
$ hexo clean
$ hexo generate
$ hexo deploy
Github Pages 有短時間的緩存,所以稍等片刻,訪問我們的 Github Pages 頁面,就可以看到博客頁面啦。
尾聲
至此,我們便成功擁有了一個屬于自己的博客。
可以將博客項目提交到 Github 管理,作為自己的博客備份,這樣在可以使用網(wǎng)絡(luò)和電腦的地方我們都可以方便的寫博客了。
此外,除了 Github 提供 Pages 這樣的服務(wù),國內(nèi)的 Coding 也提供有 Coding Pages 可以用哦。