鑑於現在CSDN有時候會十分卡頓，於是臨時決定利用github搭建一個靜態的博客
這是我的博客: http://www.orzff.cn ，歡迎來踩

一. Hexo + Github 搭建博客：

二：Hexo 主題配置

Hexo目錄下的_config.yml稱爲站點配置文件

Hexo/themes/next/目錄下的_config.yml稱爲主題配置文件

1. next主題

下載next主題

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

在站點配置文件 _config.yml

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

在主題配置文件_config.yml中可以選擇四種scheme，我選擇的是Gemini

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

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

2. 基本信息配置

配置站點配置文件_config.yml

title: 標題
subtitle: 副標題
description: 描述
author: 作者
language: 語言（簡體中文是zh-Hans）
timezone: 網站時區（Hexo 默認使用您電腦的時區，不用寫）

3. 菜單信息配置：

配置主題配置文件_config.yml

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

# Enable/Disable menu icons.
menu_icons:
  enable: true

4. 設置標籤，分類頁面

在Git-Bash中輸入：

hexo new page "tags"
hexo new page "categories"
hexo new page "about"

這時在Hexo/source/下出現一個tags/index.md和categories/index.md

這時你修改index.md的屬性，新加type屬性

tags的index

---
title: 標籤
data: 2019-08-10 00:11:16
type: "tags"
comments: false
---

categories的index

---
title: 分類
date: 2019-08-10 00:08:44
type: "categories"
comments: false
---

about的index

---
title: 這是我的自我介紹
layout: about
comments: false
---

comments: false是關閉評論功能

5. 搜索功能

在Hexo的根目錄下執行

npm install hexo-generator-searchdb --save

站點配置文件_config.yml

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

在主題配置文件_config.yml中

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

6. 頭像設置

把你要作爲頭像的圖片放到：Hexo/themes/next/source/images

然後更改主題配置文件_config.yml中的 Sidebar Avaatar

avatar: /images/header.jpg

7. 網站縮略圖圖標

把你要作爲縮略圖的圖片放到：Hexo/themes/next/source/images

然後打開主題配置文件_config.yml,找到 favicon，修改成這樣

favicon:
  small: /images/header.jpg
  medium: /images/header.jpg
  apple_touch_icon: /images/header.jpg
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

8. 修改鏈接文本樣式

打開Hexo/themes/next/source/css/_common/components/post.styl，添加

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

9. 添加評論系統

註冊登錄來必力, 安裝City，獲得安裝代碼中的data-uid="xxx"

配置主題配置文件_config.yml,添加LiveRe Uid:

livere_uid: #你的LiveRe UID

10. 添加訪問計數

next已經集成了busuanzi計數，編輯Hexo/themes/next/layout/_third-party/analytics/busuanzi-counter.swig

將

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

改爲

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

主題配置文件_config.yml

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  total_visitors: true
  total_visitors_icon: user
  total_view: true
  total_views_icon: eye
  post_views: false
  post_view_icon: eye
  site_uv_header: <i class="fa fa-user"></i> 訪客數
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 總訪問量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>  閱讀數
  page_pv_footer: 次

11. 文章版權信息

編輯主題配置文件_config.yml，修改

post_copyright:
  enable: true

12. 打賞

編輯主題配置文件_config.yml,修改

# Reward
reward_comment: 求打賞文本
wechatpay: /images/wechatpay.png  # 微信收款二維碼 圖片路徑
alipay: /images/alipay.png        # 支付寶收款二維碼 圖片路徑
#bitcoin: /images/bitcoin.png     # 比特幣

13. 添加更新時間

編輯主題配置文件_config.yml,修改

post_meta:
  item_text: true
  created_at: true   # 創建時間
  updated_at: true   # 更新時間
  # Only show 'updated' if different from 'created'.
  updated_diff: false # 只使用更新時間
  # If true, post's time format will be hexo config's date_format + ' ' + time_format.
  date_time_merge: false
  categories: true

14. 修改文章底部的標籤

編輯Hexo/themes/next/layout/_macro/post.swig

找到rel="tag">#

將#改爲<i class="fa fa-tag"></i>

15. 文章底部添加"本文結束"

編輯Hexo/themes/next/laayout/_macro/post.swig，在文章結束的地方加上

{% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">
        ---------Thanks for your attention---------
    </div>
{% endif %}

16. 在頁腳添加運行時間

編輯themes/next/layout/_partials/footer.swig

在所示位置加上代碼：

[外鏈圖片轉存失敗(img-wZQSuBPs-1565841289155)(2019-08-11-My-First-Blog/Hexo-img5.png)]

{### 運行時間 ####}
<span id="sitetime"></span>
<script language=javascript>
	function siteTime(){
		window.setTimeout("siteTime()", 1000);
		var seconds = 1000;
		var minutes = seconds * 60;
		var hours = minutes * 60;
		var days = hours * 24;
		var years = days * 365;
		var today = new Date();
		var todayYear = today.getFullYear();
		var todayMonth = today.getMonth()+1;
		var todayDate = today.getDate();
		var todayHour = today.getHours();
		var todayMinute = today.getMinutes();
		var todaySecond = today.getSeconds();
		/* Date.UTC() -- 返回date對象距世界標準時間(UTC)1970年1月1日午夜之間的毫秒數(時間戳)
		year - 作爲date對象的年份，爲4位年份值
		month - 0-11之間的整數，做爲date對象的月份
		day - 1-31之間的整數，做爲date對象的天數
		hours - 0(午夜24點)-23之間的整數，做爲date對象的小時數
		minutes - 0-59之間的整數，做爲date對象的分鐘數
		seconds - 0-59之間的整數，做爲date對象的秒數
		microseconds - 0-999之間的整數，做爲date對象的毫秒數 */
		var t1 = Date.UTC(2018,02,13,15,00,00); //北京時間2018-2-13 00:00:00
		var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
		var diff = t2-t1;
		var diffYears = Math.floor(diff/years);
		var diffDays = Math.floor((diff/days)-diffYears*365);
		var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
		var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
		var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
		document.getElementById("sitetime").innerHTML=" 已運行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小時 "+diffMinutes+" 分鐘 "+diffSeconds+" 秒";
	}/*因爲建站時間還沒有一年，就將之註釋掉了。需要的可以取消*/
	siteTime();
</script>

17. Latex公式

更換Hexo的Markdown渲染引擎

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然後打開node_modules/kramed/lib/rules/inline.js

替換11行的escape變量

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

改變20行的em變量

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

next集成了Mathjax，編輯主題配置文件_config.yml

# MathJax Support
mathjax:
  enable: true
  per_page: true
  engine: mathjax
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

# Han Support docs: https://hanzi.pro/
han: false

在寫文章時要在文章的配置中加上mathjax: true

18. 短鏈接

在根目錄執行

npm install hexo-abbrlink --save

配置站點配置文件_config.yml,修改

# abbrlink config
abbrlink:
  alg: crc16 #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex

# 更改 permalink 值
permalink: /:abbrlink/

19. 文章封面圖片

在根目錄執行

npm install --save hexo-less

在寫文章時手動設置文章摘要爲分界線

20. social

修改主題配置文件_config.yml

social:
  #GitHub: https://github.com/yourname || github
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #E-Mail: mailto:[email protected] || envelope
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  GitHub: github
  Twitter: twitter
  微博: weibo

21. 友鏈

修改主題配置文件_config.yml

# Blog rolls
links_icon: link
links_title: Friend Links
links_layout: block
#links_layout: inline
links:
  github: http://github.com/

22. 字數統計和閱讀時長

在根目錄執行

npm install hexo-symbols-count-time --save

修改站點配置文件_config.yml

symbols_count_time:
 #文章內是否顯示
  symbols: true
  time: true
 # 網頁底部是否顯示
  total_symbols: true
  total_time: true

修改主題配置文件_config.yml

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  #文章中的顯示是否顯示文字（本文字數|閱讀時長） 
  item_text_post: true
  #網頁底部的顯示是否顯示文字（站點總字數|站點閱讀時長） 
  item_text_total: false
  # Average Word Length (chars count in word)
  awl: 4
  # Words Per Minute
  wpm: 275

23. 隱藏網頁底部信息

修改主題配置文件_config.yml

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon: user
  counter: true

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false
  # -------------------------------------------------------------
  # Any custom text can be defined here.
  #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>

# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: false

# If true, will add site-subtitle to index page, added in main hexo config.
# subtitle: Subtitle
index_with_subtitle: false

24. 設置RSS

在根目錄執行

npm install hexo-generator-feed --save

修改站點配置文件_config.yml,在Extensions下添加

# RSS訂閱
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

修改主題配置文件 _config.yml修改rss爲

rss: /atom.xml

25. 修改字體

在GItHub上下載後，解壓後將所有Web文件夾下的所有內容放入Hexo/theme/next/source/fonts

然後修改Hexo/themes/next/source/css/_custom/custom.styl

//字體
@font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Light.eot');
  src: url('/fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Light.woff2') format('woff2'),
       url('/fonts/ComicNeue-Light.woff') format('woff'),
       url('/fonts/ComicNeue-Light.ttf')  format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Light-Oblique.eot');
  src: url('/fonts/ComicNeue-Light-Oblique.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Light-Oblique.woff2') format('woff2'),
       url('/fonts/ComicNeue-Light-Oblique.woff') format('woff'),
       url('/fonts/ComicNeue-Light-Oblique.ttf')  format('truetype');
  font-weight: 300;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Regular.eot');
  src: url('/fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Regular.woff2') format('woff2'),
       url('/fonts/ComicNeue-Regular.woff') format('woff'),
       url('/fonts/ComicNeue-Regular.ttf')  format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Regular-Oblique.eot');
  src: url('/fonts/ComicNeue-Regular-Oblique.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Regular-Oblique.woff2') format('woff2'),
       url('/fonts/ComicNeue-Regular-Oblique.woff') format('woff'),
       url('/fonts/ComicNeue-Regular-Oblique.ttf')  format('truetype');
  font-weight: 400;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Bold.eot');
  src: url('/fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Bold.woff2') format('woff2'),
       url('/fonts/ComicNeue-Bold.woff') format('woff'),
       url('/fonts/ComicNeue-Bold.ttf')  format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Bold-Oblique.eot');
  src: url('/fonts/ComicNeue-Bold-Oblique.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Bold-Oblique.woff2') format('woff2'),
       url('/fonts/ComicNeue-Bold-Oblique.woff') format('woff'),
       url('/fonts/ComicNeue-Bold-Oblique.ttf')  format('truetype');
  font-weight: 700;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue Angular';
  src: url('/fonts/ComicNeue-Angular-Light.eot');
  src: url('/fonts/ComicNeue-Angular-Light.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Angular-Light.woff2') format('woff2'),
       url('/fonts/ComicNeue-Angular-Light.woff') format('woff'),
       url('/fonts/ComicNeue-Angular-Light.ttf')  format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Comic Neue Angular';
  src: url('/fonts/ComicNeue-Angular-Light-Oblique.eot');
  src: url('/fonts/ComicNeue-Angular-Light-Oblique.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Angular-Light-Oblique.woff2') format('woff2'),
       url('/fonts/ComicNeue-Angular-Light-Oblique.woff') format('woff'),
       url('/fonts/ComicNeue-Angular-Light-Oblique.ttf')  format('truetype');
  font-weight: 300;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue Angular';
  src: url('/fonts/ComicNeue-Angular-Regular.eot');
  src: url('/fonts/ComicNeue-Angular-Regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Angular-Regular.woff2') format('woff2'),
       url('/fonts/ComicNeue-Angular-Regular.woff') format('woff'),
       url('/fonts/ComicNeue-Angular-Regular.ttf')  format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Comic Neue Angular';
  src: url('/fonts/ComicNeue-Angular-Regular-Oblique.eot');
  src: url('/fonts/ComicNeue-Angular-Regular-Oblique.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Angular-Regular-Oblique.woff2') format('woff2'),
       url('/fonts/ComicNeue-Angular-Regular-Oblique.woff') format('woff'),
       url('/fonts/ComicNeue-Angular-Regular-Oblique.ttf')  format('truetype');
  font-weight: 400;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue Angular';
  src: url('/fonts/ComicNeue-Angular-Bold.eot');
  src: url('/fonts/ComicNeue-Angular-Bold.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Angular-Bold.woff2') format('woff2'),
       url('/fonts/ComicNeue-Angular-Bold.woff') format('woff'),
       url('/fonts/ComicNeue-Angular-Bold.ttf')  format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Comic Neue Angular';
  src: url('/fonts/ComicNeue-Angular-Bold-Oblique.eot');
  src: url('/fonts/ComicNeue-Angular-Bold-Oblique.eot?#iefix') format('embedded-opentype'),
       url('/fonts/ComicNeue-Angular-Bold-Oblique.woff2') format('woff2'),
       url('/fonts/ComicNeue-Angular-Bold-Oblique.woff') format('woff'),
       url('/fonts/ComicNeue-Angular-Bold-Oblique.ttf')  format('truetype');
  font-weight: 700;
  font-style: oblique;
}

修改主題配置文件 _config.yml修改font爲

font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: xx`. Use `px` as unit.

  # Global font settings used on <body> element.
  global:
    external: true
    family: 'Comic Neue'
    size:

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6).
  # Fallback to `global` font settings.
  headings:
    external: true
    family: 'Comic Neue'
    size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  posts:
    external: true
    family: 'Comic Neue'

  # Font settings for Logo.
  # Fallback to `global` font settings.
  logo:
    external: true
    family: 'Comic Neue'
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: 'Comic Neue'
    size:

剛開始的字體是默認14px，在代碼部分會很小，所以可以在themes/next/source/css/_variables/base.styl

修改 font size和code font 爲18px就很好

26. 設置新建文件配置

進入Hexo/scaffolds修改post.md

---
title: {{ title }}
date: {{ date }}
mathjax: true
categories:
tags:
---

27. 新建帶日期的博文

修改站點配置文件-config.yml

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true # 同時生成一個文件夾
relative_link: false
future: true
highlight: # Hexo自帶代碼高亮插件
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

28. 背景圖片

把背景圖片存放到Hexo/themes/next/source/images

再在Hexo/themes/next/source/css/_custom/custom/styl修改一下

body { background:url(/images/music.png);}

參考博客：

https://www.jianshu.com/p/3a05351a37dc

https://www.cnblogs.com/liziczh/p/9318656.html

https://xian6ge.netlify.com/posts/82ce1911/

https://www.jianshu.com/p/805bd0b65d98https://www.jianshu.com/p/805bd0b65d98

https://www.jianshu.com/p/3a01cc514ce7?utm_source=oschina-app

https://leflacon.github.io/7167e0bc/

Hexo+Github搭建靜態博客

一. Hexo + Github 搭建博客：

二：Hexo 主題配置

1. next主題

2. 基本信息配置

3. 菜單信息配置：

4. 設置標籤，分類頁面

5. 搜索功能

6. 頭像設置

7. 網站縮略圖圖標

8. 修改鏈接文本樣式

9. 添加評論系統

10. 添加訪問計數

11. 文章版權信息

12. 打賞

13. 添加更新時間

14. 修改文章底部的標籤

15. 文章底部添加"本文結束"

16. 在頁腳添加運行時間

17. Latex公式

18. 短鏈接

19. 文章封面圖片

20. social

21. 友鏈

22. 字數統計和閱讀時長

23. 隱藏網頁底部信息

24. 設置RSS

25. 修改字體

26. 設置新建文件配置

27. 新建帶日期的博文

28. 背景圖片