最終效果

首先展示下使用 GitHub 和 Hexo 搭建的個人博客效果

Hexo 簡介

Hexo 官網：https://hexo.io/zh-cn/
Hexo 文檔：https://hexo.io/zh-cn/docs/
Hexo 視頻教程

YouTube：https://www.youtube.com/playlist?list=PLD5dyQmlN6xPqBV0cxO7zAe1C8OmDPqfX
Bilibili：https://space.bilibili.com/362224537/channel/detail?cid=61636

安裝 Hexo

首先，本地需要有node.js和git，我的軟件版本爲：

然後安裝Hexo

npm install -g hexo-cli
hexo -v

創建博客

初始化項目

首先創建一個文件夾，用於存放博客項目，我的博客項目文件夾名爲erik-ly-blog，因此

hexo init erik-ly-blog

生成靜態文件

因爲初始化項目後，項目中已經包含了一篇hello world的博客，所以先看下效果，可以使用以下命令生成靜態文件

hexo g

本地部署

使用以下命令進行本地部署，查看效果

hexo s

然後打開網頁 http://localhost:4000/ ，顯示效果爲：

寫作

現在開始寫第一篇文章，我這裏爲了方便使用，暫時使用 IDEA 打開項目並編輯文章，準備寫第一篇文章，可以使用如下命令:

hexo new "GitHub and Hexo create blogs"

然後使用 Markdown 語法編輯文章

編輯好後依次執行如下命令

hexo g
hexo s

查看網頁顯示效果

配置

現在對博客進行一些簡單的設置，打開設置文件_config.yml，然後依據自己情況進行設置

更多配置參數說明可以查看：https://hexo.io/zh-cn/docs/configuration

修改好後可以使用hexo g和hexo s命令查看效果

部署

創建 GitHub 倉庫

在 GitHub 上創建一個用戶名.github.io的倉庫，這個是固定寫法，比如我的 GitHub 用戶名爲Erik-ly，那麼我就要新建一個名爲Erik-ly.github.io的倉庫。

安裝 Hexo 插件

安裝插件

npm install hexo-deployer-git --save

然後配置_config.yml，

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repo: https://github.com/Erik-ly/Erik-ly.github.io.git

部署

使用下面命令部署到 GitHub 上

hexo d

部署完成後，打開 https://erik-ly.github.io/ 查看效果，這個是和你自己的倉庫名稱一致的，網頁效果爲

綁定域名

查看倉庫 IP

如果想要一個自己的域名，可以在阿里雲或騰訊雲上購買域名，這裏以阿里云爲例示範域名解析過程。
首先使用ping查看自己 GitHub 上用戶名.github.io的 IP 地址，

設置域名解析

然後在阿里雲上進行域名解析

分別添加如下兩條記錄

查看域名解析效果

配置 CNAME

在 Hexo 文件夾的source目錄下創建一個名爲CNAME的文件，然後輸入你的域名

部署

使用hexo d部署，然後訪問網頁查看效果，我這裏是 http://www.erik-ly.com/

Next 主題及設置

更換主題

這裏選擇的是 Next主題，簡潔方便，更換主題步驟爲：

由於我在 Windows 系統中編輯的博客，無法使用官方的命令安裝，因此我直接下載的 Next V7.5.0 版本的源碼，放到themes目錄中，在配置文件_config.yml中配置如下：

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

設置佈局

在 themes\next\_config.yml 的配置文件中設置 Next 主題的佈局，有四種佈局，可以分別嘗試下，這裏選擇的是“Pisces”。

設置左邊欄

Next 主題的詳細設置可以參考 Next官方設置。
我這裏主要根據自己的需要對左側邊欄內容進行設置，最終效果爲：

首先在\themes\next\_config.yml中設置如下：

menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  about: /about/ || user

設置分類

新建分類頁面

hexo new page categories

在 source\categories\index.md 中設置

---
title: 分類
date: 2019-11-09 09:50:39
type: "categories"
comments: false
---

之後在文章開頭設置分類，如這篇文章爲：

---
title: 使用 GitHub 和 Hexo 搭建個人博客
date: 2019-11-03 10:39:21
tags:
categories: 軟件工具
---

設置標籤

新建標籤頁面

hexo new page tags

在 source\tags\index.md 中設置

---
title: 標籤
type: "tags"
date: 2019-12-01 10:35:08
---

之後在文章開頭設置 tags ，如：

---
title: IDEA 常用快捷鍵和設置
date: 2019-11-25 20:37:44
tags: IDEA
categories: 軟件工具
---

如果需要設置多個標籤可以使用tats:[標籤1，標籤2，標籤3]，如

tags: [Hexo,GitHub]

設置關於

“關於”頁面與“分類”差相似，都需要新建頁面，

hexo new page about

然後在 \source\about\index.md 中寫“關於”頁面的內容。

設置搜索

搜索使用的是 Next 自帶的搜索工具 hexo-generator-searchdb ，首先下載安裝

npm install hexo-generator-searchdb

然後在\themes\next\_config.yml中設置如下：

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: true

設置訪問量

在\themes\next\_config.yml中設置如下：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

設置頭像

將頭像圖片放到 images 文件夾中，然後在\themes\next\_config.yml中設置如下：

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # If true, the avatar would be rotated with the cursor.
  rotated: false

設置社交