Github+Hexo一站式部署我的博客(原創)

時間  2020-07-21
標籤 github+hexo github hexo 部署 我的 博客 原創 欄目 Git 简体版
原文   原文鏈接

寫在前面

注：博主 Chloneda：我的博客 | 博客園 | Github | Gitee | 知乎html

本文源連接：https://www.cnblogs.com/chloneda/p/hexo.htmlandroid

本文檔是Github + Hexo 的搭建我的博客教程，其中Hexo基於Hexo v3.8.0版本，themes主題基於爲NexT v7.0.0版本。git

搭建博客前置條件可參考 如何搭建我的獨立博客？github

我的博客地址： Chloneda's blogweb

安裝主題

在 Hexo 項目源碼目錄下，有兩個重要的配置文件，其名稱均爲 _config.yml 。 其中，一份位於站點根目錄下，主要包含 Hexo自己的配置；另外一份位於主題目錄下，主要用於主題相關的配置。爲了描述方便，在如下說明中，將前者稱爲站點配置文件， 後者稱爲主題配置文件。npm

下載NexT主題

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

啓用NexT主題

修改站點配置文件，查找關鍵詞theme，並修改成主題名字next：json

# Extensions	#(注意冒號間的空格)
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

在切換主題以後、驗證以前， 咱們最好使用 hexo clean 來清除 Hexo 的緩存。緩存

主題設置

設置Scheme

在Hexo主題中，有四種不一樣的模式！進入主題配置文件，搜索關鍵詞找到scheme屬性，選擇本身喜歡的模式：bash

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
# scheme: Muse    # 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
scheme: Mist     # Muse 的緊湊版本，整潔有序的單欄外觀
# scheme: Pisces  # 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
# scheme: Gemini  # 相似 Pisces

設置語言

編輯站點配置文件，搜索關鍵詞language，並設置成你所須要的語言：微信

language: zh-CN

設置菜單

進入主題配置文件，找到menu字段，菜單內容的設置格式是：item name: link || menu photo，其中item name 是一個名稱，link時具體菜單分類，菜單的||後面是菜單的圖標,具體菜單圖標可參考Font Awesome網站。

# 菜單示例配置
menu:
  home: / || home
  reading: /reading/ || book
  archives: /archives/ || archive
  categories: /categories/ || th
  #tags: /tags/ || tags
  about: /about/ || user

頭像設置

在主題配置文件，搜索字段avatar，值設置成頭像的連接地址。

# 將頭像放置主題目錄下的 source/uploads/ （新建uploads目錄若不存在） 配置爲：
avatar: /uploads/avatar.png
# 放置在 source/images/ 目錄下, 配置爲：
avatar: /images/avatar.png
# 完整的互聯網 URI
avatar: 
   url: http://example.com/avatar.png

設置側邊欄

在主題配置文件，搜索sidebar關鍵詞，設置爲hide模式，以下圖所示：

sidebar:
  #display: post    // 默認顯示方式
  #display: always  // 一直顯示
  display: hide     // 初始隱藏
  #display: remove  // 移除側邊欄

各位可根據我的喜愛進行設置。

設置站點描述

在站點配置文件中，搜索關鍵詞Site，以下：

# Site
title: Chloneda		        #你的站點標題
subtitle: Less is more
description: Less is more	#你的站點描述
keywords: chloneda
author: chloneda	        #站點做者

進階設定

添加標籤頁面

hexo根目錄下，執行如下命令，新建標籤頁面。

hexo new page tags

修改站點目錄source/tags的 index.md 文件：

---
title: 添加標籤頁面測試
tags: Test	#添加標籤
categories: Test	#添加分類
comments: false
---

修改主題配置文件，搜索關鍵詞menu，取消 #tags: /tags/ || tags註釋，內容以下:

# 菜單示例配置
menu:
  home: / || home
  reading: /reading/ || book
  archives: /archives/ || archive
  categories: /categories/ || th
  tags: /tags/ || tags
  about: /about/ || user

新添菜單翻譯對應的中文

打開 hexo>theme>next>languages>zh-CN.yml 文件，在menu下添加tags: 標籤：

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜索
  schedule: 日程表
  sitemap: 站點地圖
  commonweal: 公益404
  resources: 資源

注：添加其餘頁面也相似。

首頁顯示預覽

首頁顯示文章列表，列表裏的每一篇文章只顯示預覽，不顯示全文。

進入主題配置文件，搜索關鍵詞auto_excerpt，把enable對應的false改成true。

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

友情連接

打開主題配置文件,搜索關鍵字 Blog rolls,添加本身須要的連接：

links: #鏈接
  baidu: https://www.baidu.com/
  google: https://www.google.com/

本地搜索

在Hexo的根目錄下執行如下命令。

$ npm install hexo-generator-searchdb --save

打開主題配置文件,搜索關鍵字local_search,將enable的值設置爲 true：

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true

打開站點配置文件，搜索關鍵詞search，修改成以下內容：

# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

添加RSS

在Hexo根目錄執行安裝指令，安裝 hexo-generator-feed 插件：

npm install hexo-generator-feed --save

打開站點配置文件，追加feed信息:

# 設置RSS
feed:
  type: rss2
  path: rss2.html
  limit: 5
  hub:
  content: 'true'

打開主題配置文件，找到rss，設置爲:

rss: /atom.xml

添加社交連接

在主題配置文件中，找到social屬性，添加社交連接，步驟以下：

social:
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  Facebook: https://www.facebook.com/yourname || facebook

格式爲： 社交平臺名稱：連接

設置代碼高亮

首先須要改動的地方有：

  • 站點配置文件_config.yml。
  • 主題配置文件_config.yml。

在站點配置文件中，搜索highlight關鍵詞:

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

文字自動檢測默認不啓動，改爲true使其起做用。

再到主題配置文件，搜索highlight_theme關鍵詞，修改代碼主題樣式：

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

添加複製按鈕

在主題配置文件中，搜索關鍵詞codeblock，將copy_button的enable值修改成true。

codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true

添加閱讀次數統計

主題配置文件中，搜索關鍵詞busuanzi_count，設置文章閱讀次數統計及網站訪客量:

# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
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

添加 README.md

每一個項目README.md文件能夠簡單說明這個項目的用途。在Hexo目錄下的 source 根目錄下添加一個 README.md 文件，修改站點配置文件，將 skip_render 參數的值設置爲：

skip_render: README.md

再次使用hexo d命令部署博客的時候就不會在渲染 README.md 這個文件。

進階配置

自定義網站頭像

自定義頭像可使用 比特蟲 網站製做！

在主題配置文件中，按如下修改：

favicon:
  small: /images/favicon-16x16-next.png		#你的頭像名稱
  medium: /images/favicon-32x32-next.png	#你的頭像名稱
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

添加自定義頁面[友鏈]

設置菜單項的顯示中文文本，打開themes/next/languages/zh-CN.yml文件,搜索 menu 關鍵字，修改對應中文或者新增。

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜索
  # schedule: 日程表
  # sitemap: 站點地圖
  # commonweal: 公益404
  # 新增menu
  links: 友鏈	# 新增該選項表示新增「友鏈」菜單

在主題配置文件，搜索menu，新增links: /links/ || link：

# 菜單示例配置
menu:
  home: / || home
  reading: /reading/ || book
  archives: /archives/ || archive
  categories: /categories/ || th
  #tags: /tags/ || tags
  about: /about/ || user
  links: /links/ || link

hexo根目錄下，執行如下命令，新建友鏈頁面。

hexo new page links

修改站點目錄下source/links的 index.md 文件：

---
title: 友鏈
tags: links
categories: links
comments: false
---

注：其它自定義菜單也是相似步驟

增長背景音樂

在本博客的側邊欄增長網易雲音樂，生成音樂外鏈可參考**連接** ，複製連接，將外鏈插入到Hexo根路徑的側邊欄文件中：/themes/next/layout/_macro/sidebar.swig，即側邊欄友情連接theme.links這一項以後。

{% if theme.links %}
    <div>
      <div class="links-of-blogroll-title">
       ....省略部分代碼
      </div>
      <ul class="links-of-blogroll-list">
        ....省略部分代碼
      </ul>
    </div>
{% endif %}

    <div id="music163player">
	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
		src="//music.163.com/outchain/player?type=2&id=5239700&auto=0&height=66">
	</iframe>
    </div>

添加打賞功能

現在已進入知識付費時代，打賞是讀者對筆者創造的最大支持，更是對勞動者的尊重。打賞功能具體步驟爲： 獲取二維碼

  • 微信二維碼的獲取（可百度）。
  • 獲取支付寶收款二維碼（可百度）。

添加二維碼圖片資源 獲得二維碼圖片資源後，讀者們可將二維碼圖片放到**NexT根目錄/source/images/**文件夾下。

開啓打賞功能 打開主題配置文件，搜索reward關鍵詞，添加打賞的配置信息。

# Reward
# If true, reward would be displayed in every article by default.
# And you can show or hide one article specially through add page variable `reward: true/false`.
reward:
  enable: true  //默認是false，改成true
  comment: 您的支持是對我最大的鼓勵
  wechatpay: /images/wechatpay.jpg	#圖片連接或圖片相對路徑
  alipay: /images/alipay.jpg	  #圖片連接或圖片相對路徑

開啓版權聲明

打開主題配置文件,搜索關鍵字 creative_commons , post 改成 true：

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true

優化及設置

優化url

seo搜索引擎優化認爲，網站的最佳結構是三層，可是默認hexo編譯的站點打開文章的url是：sitename/year/mounth/day/title四層的結構，url不利於搜索引擎搜索。

所以，咱們能夠將url直接改爲sitename/blog/title的形式，同時title最好是用英文，在站點配置文件搜索permalink關鍵詞，並修改以下。

url: https://chloneda.github.io/
root: /
permalink: /blog/:title.html
permalink_defaults:

Hexo博客備份

利用github分支功能進行博客備份，思路說明:

  • master分支：存放博客的靜態網頁(默認分支)。
  • hexo分支：存放Hexo博客的源碼文件。

master分支部署 進入站點配置文件編輯，搜索deploy關鍵詞：

deploy:
  type: git
  repo: https://github.com/你的github用戶名/你的github用戶名.github.io.git
  branch: master
  • 修改更新博客內容並保存。
  • 執行hexo clean清除本地舊代碼。
  • 執行hexo g -d生成靜態網站並部署到GitHub的master分支上。

hexo分支配置

  • hexo分支，該分支爲博客源碼分支。
  • 使用git clone -b hexo 你的github倉庫路徑， 拷貝源碼倉庫。
  • 修改hexo主配置_config.xml的deploy部分配置，設置靜態頁面的發佈分支爲master。
  • 添加.gitignore文件，將靜態網頁的目錄及其餘無需提交的源文件及目錄排除掉。

博客源碼更新 在本地對博客進行修改後，提交hexo源代碼：

git checkout hexo
git add .
git commit -m 'Code update'
git push origin hexo

發佈hexo靜態文件 hexo根目錄依次執行如下命令：

hexo clean
hexo generate	或者   hexo g
hexo deploy	或者   hexo d

本地資料丟失或其餘主機搭建博客步驟：

  • 拷貝hexo分支源碼到本地：git clone -b hexo github項目地址.git。
  • 安裝hexo及各種插件。
  • 本地安裝調試。

Hexo部署腳本

Hexo修改後利用deploy.sh腳本一鍵部署，提升部署效率。

#!/bin/bash
DIR=`dirname $0`

# Generate blog
hexo clean
hexo generate
sleep 5

# Deploy
hexo deploy
sleep 5

# Push hexo code
git add .
current_date=`date "+%Y-%m-%d %H:%M:%S"`
git commit -m "Blog updated: $current_date"

sleep 2
git push origin hexo

echo "=====>Finish!<====="

把該腳本存放至 hexo根目錄中，並附加腳本執行權限:

chmod 775 deploy.sh

在hexo目錄根執行腳本:

./deploy.sh

可一鍵部署博客及備份博客源碼至github的分支hexoCode上。

提高你的博客

更多提高NexT主題的方法請參考如下網頁。

結束小語

本文采用Github + Hexo搭建的我的博客，在搭建過程優化總結，及時記錄，但願對各位有所幫助！本文若有錯誤，歡迎在 Github 的issue中提出，很是感謝！！！

更多詳情請參考：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程