使用 Github + Hexo 從 0 搭建一個博客

最近有幾位同窗在公衆號後臺留言問個人博客站是怎麼建站的，思來想去，仍是寫一篇從 0 開始吧。

前置準備

咱們先聊一下前置準備，可能不少同窗一據說要本身搭一個博客系統，直接就望而卻步。不得有臺服務器麼，不得搞個數據庫麼，不須要域名備案麼？固然，這些確實是創建一個博客站點須要的東西，若是都沒有，問題卻是也不大。

首先，Github 爲咱們作出了巨大的貢獻，直接幫咱們解決服務器和域名問題，固然，在國內訪問 Github 可能會有些慢，可是國內有 Gitee 啊，徹底不遜色 Github 的好很差。

博客站的創建，這時咱們須要用到 Hexo ，這個博客框架沒有那麼的重量級，它是使用 Markdown 直接來寫文章，而後能夠將文章編譯成靜態頁面，編譯完成後，咱們只須要將編譯好的頁面放在 Github 或者 Gitee 上，就能夠直接被訪問到。這樣，咱們就省去了一臺數據庫和服務器，文章的內容、標題、標籤等信息就無需放在數據庫中了，能夠直接在靜態頁面上訪問到。

那麼，接下來，須要的就是一個 Github 或者 Gitee 的帳號了，這個我就很少講，你們自行準備吧。

環境安裝

Node.js

Hexo 的編譯環境是使用 Node.js 的，須要在本身的電腦上安裝 Node.js ，下載地址我直接貼出來：http://nodejs.cn/download/ 。各位直接選擇本身對應系統的 Stable 版本安裝就好。

windows 環境下載後一路 next 便可，無需額外選擇什麼。安裝完成後環境變量如未自動配置，還需配置下環境變量，配置完成後可使用以下命令驗證是否安裝成功：

node -v
# v10.16.3
npm -v
# 6.9.0

博主安裝的時間比較早，版本比較老了，各位領會精神。

Hexo

接下來咱們安裝 Hexo ，這是一個博客框架，Hexo 官方還提供了一個命令行工具，用於快速建立項目、頁面、編譯、部署 Hexo 博客，因此在這以前咱們須要先安裝 Hexo 的命令行工具。

npm install -g hexo-cli

安裝完成以後，可使用以下命令驗證安裝是否成功：

hexo -v

博主這邊的輸出以下：

hexo-cli: 2.0.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.16.3
v8: 6.8.275.32-node.54
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.39.2
napi: 4
openssl: 1.1.1c
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

建立項目

接下來到了重頭戲的時間，開始建立一個博客項目。

接下來，咱們使用 Hexo 在本地建立一個項目，並在本地將這個項目總體跑通看看。

在一個本身喜歡的目錄下建立項目，使用如下命令：

hexo init <folder>

這裏的 <folder> 是項目名稱，使用本身喜歡的名稱，我這裏使用 firstblog 。

hexo init firstblog

靜靜等待進度條走完，這樣咱們在 firstblog 這個文件夾中就有了 Hexo 初始化的相關文件。如圖：

進入這個文件夾中，安裝相關 node 依賴：

npm install

接下來，咱們可使用 generate 命令將剛剛生成的文件編譯成靜態 HTML 代碼了。

hexo generate

能夠看到輸出結果裏面包含了 js、css、font 等內容，並發現他們都處在了項目根目錄下的 public 文件夾下面了。

而後咱們使用 Hexo 提供的 server 命令，讓博客在本地運行起來，以下：

hexo server

服務默認會在 4000 端口，直接在瀏覽器中訪問 http://localhost:4000 ，咱們看下結果：

到這裏，整個博客的架子就行了，咱們只使用了 3 個命令。

部署

接下來，咱們要將這個建好的博客部署到 Github Page 上驗證一下可用。成功以後咱們再進行一些其餘的騷操做，好比更換主題，修改配置等等。

這裏須要咱們先在 Github 上建立一個倉庫。

這裏有一點須要注意，GitHub Pages 容許每一個帳戶建立一個名爲 {username}.github.io 的倉庫，另外它還會自動爲這個倉庫分配一個 github.io 的二級域名。各位同窗建立命名規則能夠跟參照博主的命名方式。

倉庫建立完成後，接下來能夠開始進行部署了， Hexo 的部署命令：

hexo deploy

在部署前須要先安裝一個插件：

npm install hexo-deployer-git --save

而後咱們還須要配置一下本地項目的配置文件 _config.yml ，這個文件在本地項目目錄的跟目錄下，打開修改最下面的部署的部分：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: {git repo ssh address}
  branch: master

博主這邊修改結果以下：

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

而後執行 hexo deploy 命令，看到如下差很少的內容說明部署成功：

INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
Enumerating objects: 46, done.
Counting objects: 100% (46/46), done.
Delta compression using up to 12 threads
Compressing objects: 100% (36/36), done.
Writing objects: 100% (46/46), 507.64 KiB | 1.67 MiB/s, done.
Total 46 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), done.
To github.com:meteor1993/meteor1993.github.io.git
 * [new branch]      HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'git@github.com:meteor1993/meteor1993.github.io.git'.

這時，咱們就能夠訪問一下咱們 Github Page 爲咱們分配的域名了，好比個人倉庫名稱爲 meteor1993.github.io ，那我這裏就要訪問：https://meteor1993.github.io，結果以下：

這時咱們能夠去 Github 倉庫看下具體上傳了什麼內容：

能夠看到，這裏就是將咱們 public 目錄下的全部文件上傳了，Hexo 把編譯以後的靜態頁面內容上傳到 GitHub 的 master 分支上面去了。

站點配置

咱們上面僅僅只是將初始化的頁面部署成功了，博客裏還有一些站點的信息還沒有配置，這些站點信息是爲了讓搜索引擎知道咱們的站點是作什麼的。

一樣是須要配置項目根目錄的 _config.yml 文件，打開這個文件，找到 site 相關的配置信息。

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

小編這裏的工程僅是作演示使用，並沒有什麼其餘的做用，就隨便寫寫了，各位同窗能夠根據本身的須要作配置：

# Site
title: Geekdigging
subtitle: '一個專一於技術分享的博客'
description: '主要涉獵方向有 Java 、 Python 等領域'
author: 極客挖掘機
language: zh-CN

小編這裏主要將語言設置成了中文，咱們看下修改後的博客長什麼樣：

能夠看到其中的時間日期格式變成了中文。這樣咱們就完成了博客的站點配置。

修改主題

目前默認的樣式風格並非那麼好看，若是想要換一下的話，就涉及到了主題的修改。目前 Hexo 使用最多的必定是 Next 主題。固然，小編的站點並非使用的 Next 的主題。

接下來，咱們來看下如何在 Hexo 中使用 Next 主題。

首先咱們須要將 Next 從 Github 上克隆下來，命令以下：

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

咱們直接將這個主題克隆至項目的 themes 目錄下。

克隆完成後， Next 的源碼就會出如今 themes 目錄下。咱們須要修改根目錄下的 _config.yml 文件中的主題配置，這樣咱們就可使用剛纔咱們克隆好的 Next 主題了：

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

修改成：

theme: next

重啓本地服務，咱們看下效果：

主題配置

Next 主題一樣爲咱們提供了豐富的配置，供咱們自定義本身的博客站點使用。

在目錄 themes\next 中，找到 _config.yml 文件並打開。

Next 一樣爲咱們準備了幾種樣式可供選擇：

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

這些樣式一樣都是黑白配色，僅佈局風格不一樣，各位同窗能夠選擇本身喜歡的佈局風格。

關於 Next 的更多配置小編這裏就不一一列舉了，屬實有些多，這裏提供 Next 主題的官方文檔，是中文版的，有須要修改的同窗可自行參考。官方文檔：http://theme-next.iissnan.com/theme-settings.html 。

添加文章

添加文章 Hexo 也爲咱們提供了相關的命令，好比咱們要添加一個名爲 test 的文章，以下：

hexo new test

咱們能夠看到，在 source\_posts 的目錄下，建立了一個 test.md 的 Markdown 的文檔。打開看下里面的內容：

---
title: test
date: 2019-11-10 12:28:52
tags:
---

這些內容僅是自動建立的，咱們還能夠添加其餘的內容進去，能夠給各位同窗看下我平時的文章頭：

---
title: 小白 Python 爬蟲部署 Linux
author: 極客挖掘機
categories:
  - 技術分享
tags:
  - 技術分享
date: 2019-11-02 21:05:45
---

開頭下方撰寫正文，MarkDown 格式書寫便可。

這樣在下次編譯的時候就會自動識別標題、時間、類別等等，另外還有其餘的一些參數設置，能夠參考文檔：https://hexo.io/zh-cn/docs/writing.html。

另外在建立新的文章的時候也不是必定要經過命令建立，也能夠本身在對應的目錄下新建一個 .md 的文檔，Hexo 在編譯的時候也是一樣會識別的。

本篇文章在這裏就分享結束了，各位感興趣的同窗能夠本身動手嘗試一下。

題外話

小編本身的我的站點爲了保持訪問速度和穩定性，部署在騰訊雲上並使用了 CDN 加速，而且映射了本身申請的域名，其中比較困難的點是域名的備案和騰訊雲是須要產生必定的費用的，若是隻是本身使用無需考慮穩定性和訪問速度的話，國內能夠部署在 Gitee ，經測試是要比 Github 快不少。

參考

https://cuiqingcai.com/7625.html

https://hexo.io/zh-cn/docs/