Kevin Blog
置頂 0%

Hexo & Next 建構部落格

發表於 分類於 Disqus：

前言

Hexo是一個基於Node.js的部落格框架，加上沒有廣告的干擾，讓人看起來就十分舒服。因此，本篇記錄了HEXO搭配Next主題來製作部落格的相關筆記，並花了一些時間整理Hexo框架的重點和流程，有興趣可以參考一下這篇。

  • Hexo框架搭配next主題
    Hexo是一個開源且強大的框架，而且網路上也有許多資源和文件，搭配使用 Markdown 語法來撰寫Blog，Markdown 也是Github上的README.md使用的語法，另外 Hexo框架有許多支援的樣板 ，而且風格及排版都具有不同風格。因為Hexo是一個基於Node.js 開發的套件，所以對於js有點功力的人來說，還可以做客製化的修改，讓自己的部落格更有自己的特色!!
  • 部署到Github page
    通常會透過Hexo框架快速部署部落格至Github上，並以https://你的帳號.github.io/ 作為部落格的URL網址，當然也可以部署到自己的伺服器或其他雲端平台。

本機端需要安裝

  1. Git
  2. Node.js
  3. hexo套件 (安裝好node.js後，使用cmd來輸入指令安裝)
    1
    npm install -g hexo-cli

最後確定是否正確裝好Node.js和hexo套件，使用下面指令來確定

1
2
node -v 
npm -v

建立一個基本Hexo部落格

資料夾名子可以自己隨意取，在下面範例是叫做myblog，這個資料夾就為hexo的根目錄資料夾

1
2
3
4
hexo init myblog
cd myblog      #進入目標資料夾
npm install    #安裝相關套件
npm install hexo-deployer-git --save    #安裝git部署套件

上面初始化後會建立一個檔名為myblog(我自己取的)的資料夾，資料夾內生成的檔案如下

接著後續的許多設定都是在 _config.yml 這檔案中來完成， _config.yml 這檔案的部分內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Site
title: Kevin Blog
subtitle: become a better programmer
description: 歡迎交流和討論喔!!
keywords: 部落格, 心情, blog
author: Kevin Fang
language: zh-TW
timezone: Asia/Taipei

# URL
url: https://username.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

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

# Deployment
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master
  
# .....
# the rest of the code
# .....
  1. Site:  部落格的基本相關內容的資訊設定
  2. url:  設定部落格的網址，而架構在Github上面的標準URL結構為https://username.github.io/ ，username則是自己的Github帳號名稱
  3. theme:  設定部落格的主題內容 (landscape、next或其他很多主題套件)
  4. deploy:  部署到Github page上面的設定，或是也可以將Hexo部署到其他平台

next主題套用

Hexo預設主題為landscape，如要轉換成Next主題套件則是要注意一點，大部分在網路上關於hexo和next主題的教學文章可能太舊沒更新，有許多還是使用下面的指令來clone next主題套件

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

但這是錯的!，目前這URL的repo沒有繼續更新和維護，所以裡面存在許多的bug，最新的版本會是如下的指令

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

在cmd輸入指令後，接著將next檔案放到hexo根目錄中的themes資料夾裡面，最後要記得在hexo根目錄的_config.yml 檔案中將原本的themes: landscape改為 themes: next

新增頁面

頁面的新增可以分成目錄頁面和文章頁面。下面的指令是來建立categories目錄的頁面，也可以替換程tags或about等目錄頁面，如下會生成..\blog\source\categories\index.md

  • 目錄頁面
    1
    hexo new page categories

如果只是新增一般的文章，就是下面這指令，MyFirstPost可替換成自己要取的標題名稱，如下會生成..\blog\source\_posts\index.md

  • 文章頁面
    1
    hexo new MyFirstPost

index.md檔案必須要使用Markdown語法，可以參考這篇或這篇的相關語法

部署到Github page上面

在hexo根目錄資料夾的cmd中執行下面指令

1
2
3
4
5
hexo cl //清除過去建立的靜態檔案，也可輸入 hexo clean
hexo g  //建立靜態檔案，也可輸入 hexo generate
hexo s  //啟動伺服器預設網址為: http://localhost:4000/.，另外也可輸入 hexo server 或 hexo s --debug
hexo d  //部署至 Github Page，也可以輸入 hexo deploy
//或是可以只執行這一行 hexo d -g 等同於hexo g 和 hexo d

部署完成後就可以在 https://username.github.io ，看到自己的部落格樣子了~~，這邊的username一樣是自己的Github帳號喔

其他

檔案結構

下面指令在cmd將相關資源clone下來

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

但要注意要將檔案放進 themes 資料夾當中，初始化的hexo檔案是在 blog 資料夾內，如下圖所示

留言服務套件

這邊是使用Disqus的留言服務，但如果不想它出現在文章頁面以外的地方，只要將其他類型的頁面的 index.md 標註 comments: false 即可，如下的內容

1
2
3
4
title: categories
date: 2020-08-03 00:28:05
type: "categories"
comments: false

通常要調整的index.md會在source資料夾中(例如: ..\hexo\blog\source\categories)，而頁面的設定變數可以參考Front-matter，另外的解法

注意專案名稱

部屬在Github平台上的部落格，專案名稱必須要取做 username.github.io ，如果我帳號是叫做kevin123，建立的專案名稱就要叫 kevin123.github.io，最後所部署的部落格網址就會是位於 https://kevin123.github.io/，但如果執意要取其他專案名稱像是pig ，但最後你部署的網址會變成是在https://kevin123.github.io/pig/

加入RSS套件

加入RSS需要注意一些細節，下面是我設定完成後的畫面

首先要先在hexo根目錄資料夾的cmd中執行下面指令來安裝相關套件

1
npm install hexo-generator-feed --save

如果成功安裝應該會在hexo根目錄中的 node_modules 資料夾發現 hexo-generator-feed 資料夾，接著在根目錄的 _config.yml 中加入如下(注意! 不是next資料夾的 _config.yml )

1
2
3
4
5
6
7
8
9
10
# RSS配置
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

下一步就是在next主題資料夾中的 _config.yml 加入如下指令

1
rss: /atom.xml

但目前還是沒有在側邊欄加入RSS，因為還少了一個步驟，要從下面的路徑中找到 ..\blog\themes\next\layout\_partials\sidebar中的 site-overview.swig 這檔案，並在檔案中 <div class="site-author motion-element"... 到 </div> 加入如下

1
2
3
4
5
6
7
8
{% if theme.rss %}
   <div class="feed-link motion-element">
      <a href="{{ url_for(theme.rss) }}" rel="alternate">
         <i class="fa fa-rss"></i>
           RSS
      </a>
   </div>
{% endif %}

最後部署上去就會看到RSS出現了!!

移除強力驅動

開啟./themes/next/layout/_partials/footer.swig的檔案，將下面的區段註解掉，就可以將強力驅動那些字移除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 移除強力驅動
   {% if theme.copyright %}
   <div class="powered-by">
	  {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
   </div>
	​
   <div class="theme-info">
	  {{ __('footer.theme') }} -
	  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
	 NexT.{{ theme.scheme }}
	  </a>
   </div>
   {% endif %}
-->

將Footer的愛心換掉

1
2
3
4
5
6
7
8
<!-- 把footer愛心換掉 -->
  {% set copyright_year = date(null, 'YYYY') %}
  &copy; {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} – {% endif %}
  <span itemprop="copyrightYear">{{ copyright_year }}</span>
  <span style="color: #fc6423; margin: 0px 5px;">
	 <i class="fas fa-user-graduate"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }}</span>

參考

其他相關文章