為什么搭建這個博客？

從畢業(yè)到現(xiàn)在已經(jīng)有一年多的時間熔掺，在開發(fā)中遇到了很多問題老厌，但總是記錄在excel中雀鹃，復(fù)習(xí)起來不方便，搭建這個博客剛好有個地方可以記錄學(xué)習(xí)歷程。

搭建工具

先整理下需要用到的工具：

• hexo -> 生成文章
• node.js -> 生成靜態(tài)頁面
• git -> 云端存儲

安裝過程

下載安裝上述工具（node.js,git）均可在官網(wǎng)下載
安裝完git,點擊鼠標(biāo)右擊選擇Git Bash Here,分別輸入

npm install hexo-cli -g //安裝hexo
npm install hexo-deployer-git --save //安裝hexo部署到git page的deployer

創(chuàng)建hexo文件夾

在電腦上任意位置新建一個Hexo文件夾，進(jìn)入文件夾根目錄鼠標(biāo)右擊選擇Git Bash Here，輸入

hexo init //在此文件夾新建所需文件晨雳，包括主題配置文件、網(wǎng)頁等等
到這里你已經(jīng)完成了本地建站奸腺，你可以在本地看到你的網(wǎng)頁了餐禁！
如何在本地看到剛剛生成的網(wǎng)頁？

hexo g //生成
hexo s //開啟本地預(yù)覽服務(wù)
開啟后打開瀏覽器輸入http://localhost:4000 即可看見網(wǎng)站
以上僅僅只是在本地預(yù)覽突照，我們需要將hexo部署到github,實現(xiàn)云端預(yù)覽

部署至Github

1帮非、擁有g(shù)ithub賬號
2、新建倉庫绷旗，倉庫名："用戶名.github.io"
3喜鼓、編輯hexo根目錄下的_config.yml文件

deploy:
  type: git
  repository: https://github.com/mirse-partner/mirse-partner.github.io //倉庫對應(yīng)鏈接
  branch: master

4、保存上述修改后的文件衔肢，git bash 執(zhí)行下述命令

hexo generate
hexo deploy //部署到github

5庄岖、成功后通過網(wǎng)址https://你的github用戶名.github.io 即可打開你在云端部署的博客。

發(fā)表第一篇文章

只需要在根目錄下

hexo new "文章名稱"

即可生成你的文章角骤，在hexo\source_posts路徑下隅忿，可以看到相應(yīng)的.md文件，打開文件你就可以開始創(chuàng)作你的第一篇文章了邦尊。

使用Next主題

打開你的網(wǎng)站后背桐，你會發(fā)現(xiàn)默認(rèn)主題并不美觀，你可以隨意更換主題蝉揍，打開https://hexo.io/themes/ 尋找你喜歡的主題链峭，下載即可使用主題，本初以Next主題為例又沾，打開 https://github.com/iissnan/hexo-theme-next 下載該主題弊仪，并解壓至至hexo/themes下，打開根目錄/hexo路徑下的_config.yml文件按杖刷，全局查找theme關(guān)鍵字励饵，改為theme:next ，執(zhí)行指令hexo g->hexo s ,即可在本地預(yù)覽next主題滑燃，執(zhí)行hexo d,即可在云端預(yù)覽效果役听。

修改next樣式

next自帶四種主題樣式

# Schemes
#scheme: Muse # 默認(rèn) Scheme，這是 NexT 最初的版本，黑白主調(diào)典予，大量留白
#scheme: Mist # Muse 的緊湊版本甜滨，整潔有序的單欄外觀
scheme: Pisces # 雙欄 Scheme，小家碧玉似的清新
#scheme: Gemini # 類似 Pisces

我使用的是Pisces

修改主題語言

默認(rèn)主題語言是英文熙参，我們可以將其改成中文艳吠，打開根目錄文件_config.yml,找到language字段修改成language: zh-Hans，即可將主題語言改成中文孽椰。目前支持的語言可以在themes\next\languages文件夾下進(jìn)行查看。

修改側(cè)邊欄

側(cè)邊欄默認(rèn)標(biāo)簽有Home凛篙、about黍匾、tags等等，如果你想修改這些顯示可以在themes\next_config.yml文件中修改呛梆，找到menu字段锐涯，即可修改成自己設(shè)置的字段，目前我用的字段是：

menu:
  主頁: /|| home  # 主頁鏈接及其圖標(biāo)
  #about: /about/ || user
  標(biāo)簽: /tags/|| tags # 標(biāo)簽頁鏈接及其圖標(biāo)
  分類: /categories/|| th # 分類頁鏈接及其圖標(biāo)
  歸檔: /archives/|| archive # 歸檔頁及其圖標(biāo)
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

側(cè)邊欄點擊指向

在設(shè)置好側(cè)邊欄之后填物，當(dāng)你點擊標(biāo)簽或分類時會出現(xiàn)Cannot GET /tags/ 問題纹腌，此時你需要在根目錄下創(chuàng)建兩個文件夾分別命名為tags、categories滞磺，并在文件夾中創(chuàng)建新文件index.md,分別在兩個文件中寫入

---
title: 標(biāo)簽
date: 2019-12-25 20:47:24
type: "tags"
---

---
title: 分類
date: 2019-12-25 20:46:21
type: "categories"
---

hexo g->hexo d后重新打開網(wǎng)頁升薯，點擊tags，就可以跳轉(zhuǎn)至點擊的鏈接了击困。

發(fā)表的文章增加字?jǐn)?shù)和閱讀時長

此功能需要安裝相關(guān)插件

npm i --save hexo-wordcount

安裝完插件之后涎劈，進(jìn)入next_config.yml文件，找到post_wordcount:并修改

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true //文本顯示
  wordcount: true //字?jǐn)?shù)統(tǒng)計
  min2read: true //閱讀時長
  totalcount: false //站點總字?jǐn)?shù)
  separated_meta: true

文章側(cè)邊欄顯示文章目錄

搭建博客時阅茶，發(fā)現(xiàn)別人的博客文章側(cè)邊欄有文章的層級目錄蛛枚，上網(wǎng)搜了下如何達(dá)到這個效果，發(fā)現(xiàn)幾乎沒有這個回答脸哀，后來經(jīng)過研究蹦浦，發(fā)現(xiàn)只要在自己的文章里，用上大標(biāo)題盲镶、小標(biāo)題等，側(cè)邊即可實現(xiàn)顯示文章目錄谅摄。

# //一級標(biāo)題
## //二級標(biāo)題
### //三級標(biāo)題

增加版權(quán)聲明

如果你的next版本時7.2.0徒河，在next_config.yml文件中，找到post_copyright:false 修改為：

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

老版本需要修改文件送漠，建議使用新版本Next

添加github推廣

在網(wǎng)頁上可以添加github的推廣顽照，如在右上角添加“fork me on Github”，具體實現(xiàn)方法為在
https://github.blog/2008-12-19-github-ribbons/ 挑選自己喜歡的樣式并復(fù)制代碼，在

<div class="headband"></div>

代碼下方添加你剛剛復(fù)制的代碼代兵，以我復(fù)制后的代碼為例：

  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>

    <a ><img style="position: absolute; top: 0; right: 0; border: 0;"  width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>

注意：你復(fù)制完代碼后查看效果時尼酿，可能位置不太合理，可以在img中添加style屬性設(shè)置圖片位置植影，具體可以參考我上面的代碼裳擎。

添加gitalk

1、 在Github創(chuàng)建一個倉庫來存放issue.
2思币、創(chuàng)建github application用來授權(quán)登錄鹿响，網(wǎng)址https://github.com/settings/applications/new ，其中需要注意Homepage URL和Authorization callback URL谷饿，第一個填寫你在1惶我、創(chuàng)建的issue倉庫地址，第二個為你的github首頁地址
3博投、gitalk主題樣式
在themes/next/layout/_third-party/comments路徑下新建gitalk.swig文件绸贡，內(nèi)容為：

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" >
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.clientID }}',
      clientSecret: '{{ theme.gitalk.clientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.owner }}',
      admin: ['{{ theme.gitalk.admin }}'],
      id: location.pathname,
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
  </script>
{% endif %}

在themes/next/layout/_third-party/comments/index.swig文件中，引入剛剛創(chuàng)建的文件
具體語句如下：

{% include 'gitalk.swig' %}

在themes/next/layout/_partials/comments.swig文件中找到最后一條

 {% endif %}

替換為

{% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>
{% endif %}

最后在themes/next/_config.yml文件中進(jìn)行g(shù)italk配置毅哗，

gitalk:
  enable: true # 是否啟用
  owner: mirse-partner # 用戶名
  repo: MyGitalk # 存放評論的倉庫名
  clientID: xxxx 
  clientSecret: xxxx
  admin: mirse-partner # 用戶名
  distractionFreeMode: false # 評論時遮照效果的開關(guān)

執(zhí)行完上面的操作听怕，hexo clean -> hexo g->hexo d就歐克了。

未找到相關(guān)的Issues/Error:Validation Failed.

但是可能不那么順利虑绵，這里列舉下我遇到的問題尿瞭，首先瘋狂報錯Error: Validation Failed.或者 未找到相關(guān)的 Issues 進(jìn)行評論，遇到這種情況返回第2個步驟確認(rèn)下填寫的地址正不正確或者是themes/next/_config.yml文件中g(shù)italk的配置蒸殿，請認(rèn)真檢查一遍筷厘，一般都是在這兒填寫錯誤導(dǎo)致。
還有可能是的你文章文件名的原因宏所，你會發(fā)現(xiàn)只要把你的文章文件名xxxx.md中的xxxx改少就不會出現(xiàn)這個問題了酥艳，但是這明顯不是解決方法，所以下面給出真正的解決方法
打開文件路徑themes\next\layout_third-party\comments\gitalk.swig,修改文件中的id值使用page.date代替爬骤，具體代碼如下：

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" >
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.clientID }}',
      clientSecret: '{{ theme.gitalk.clientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.owner }}',
      admin: ['{{ theme.gitalk.admin }}'],
      id: '{{ page.date }}', //location.pathname **fixed**
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
  </script>
{% endif %}

具體問題的原因是因為github創(chuàng)建issue有長度限制充石，gitalk默認(rèn)使用location.pathname即url來創(chuàng)建，只要文件名過長就無法創(chuàng)建霞玄，現(xiàn)在改成page.date就不會有影響了骤铃。

gitalk樣式顯示問題

解決完這個問題又遇到個抓狂的問題-gitalk樣式顯示問題,現(xiàn)象如圖

gitalk.png

在網(wǎng)上百度了好久一直找不到答案，索性打開樣式文檔研究看看吧坷剧。
打開themes\next\layout_partials\comments.swig,代碼整合后如下圖

comments.png

發(fā)現(xiàn)問題所在惰爬，代碼中并沒有把gitalk-container樣式包含在endif中，重新修改代碼惫企。直接附上comments.swig文件的全部代碼：

{% if page.comments %}

  {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
    <div class="comments" id="comments">
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
    </div>

  {% elseif theme.facebook_sdk.enable and theme.facebook_comments_plugin.enable %}
    <div class="comments" id="comments">
      <div class="fb-comments"
           data-href="{{ page.permalink }}"
           data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
           data-width="{{ theme.facebook_comments_plugin.width }}"
           data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
      </div>
    </div>

  {% elseif theme.vkontakte_api.enable and theme.vkontakte_api.comments %}
    <div class="comments" id="comments">
      <div id="vk_comments"></div>
    </div>

  {% elseif theme.disqus.enable %}
    <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a >comments powered by Disqus.</a>
        </noscript>
      </div>
    </div>

  {% elseif theme.hypercomments_id %}
    <div class="comments" id="comments">
      <div id="hypercomments_widget"></div>
    </div>

  {% elseif theme.youyan_uid %}
    <div class="comments" id="comments">
      <div id="uyan_frame"></div>
    </div>

  {% elseif theme.livere_uid %}
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
    </div>

  {% elseif theme.changyan.appid and theme.changyan.appkey %}
    <div class="comments" id="comments">
      <div id="SOHUCS"></div>
    </div>

  {% elseif theme.gitment.enable %}
    <div class="comments" id="comments">
      {% if theme.gitment.lazy %}
        <div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
        <div id="gitment-container" style="display:none"></div>
      {% else %}
        <div id="gitment-container"></div>
      {% endif %}
    </div>

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>

    {% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>
  {% endif %}

相關(guān)指令

怎么刪除文章 刪除本地文章 -> hexo g -> hexo d
怎么修改文章 修改本地文章(保存修改) -> hexo g ->hexo s -> hexo d
怎么修改主題 hexo clean #刪除緩存 -> hexo g ->hexo s #更改本地倉庫 -> hexo d

后續(xù)撕瞧，搭建過程中遇到的問題及解決方法

1陵叽、##標(biāo)題 預(yù)覽時不生效
正確寫法 ## 標(biāo)題 ##之后得有空格，語言才能生效丛版。

2巩掺、如何在主頁不顯示全文
打開主題中得_config.yml ,找到 auto_excerpt:設(shè)置成true即可,
auto_excerpt中的參數(shù)可以修改顯示文字：

    site_uv_header: 訪客數(shù)
    site_uv_footer: 人
    site_pv_header: 總訪問量
    site_pv_footer: 次

3、如何實現(xiàn)本站人數(shù)統(tǒng)計
如果你使用得是next主題页畦，在themes\next_config.yml文件中胖替，找到busuanzi_count:enable 設(shè)置成true即可實現(xiàn)人數(shù)統(tǒng)計，但是由于不蒜子統(tǒng)計的域名過期了豫缨，所以你看到的人數(shù)統(tǒng)計是空独令，修改 /theme/next/layout/_third-party/analytics/busuanzi-counter.swig文中，修改后：

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