1. 程式人生 > >Hexo 的安裝與配置

Hexo 的安裝與配置

安裝流程:
    1. 安裝Node.js
    2. 安裝Git → 安裝Hexo
    3. 安裝主題 
    4. 本地測試執行
    5. 在github與coding上建立pages倉庫
    6. 部署到遠端倉庫中
    7. 自定義域名訪問
配置與優化
    1. 新增標籤頁面
    2. 新增分類頁面
    3. 新增自定義頁面
    4. 文章末尾追加版權資訊
    5. 開啟打賞功能
    6. 友情連結
    7. 自定義字型
    8. 自定義圖示和側欄頭像
    9. 新增 Rss 訂閱
    10. MathJax支援
錯誤解決
    1.
關於網站圖示不更新問題

安裝 Hexo

Node.js、GIt 安裝
安裝hexo

開啟 git bash 輸入以下命令

npm install -g hexo-cli

安裝 Hexo 完成後,請執行下列命令,請特別的注意看註釋。

hexo init <folder>  #folder指我們要安裝的部落格根目錄 
                  #hexo init blog 指的是在當前資料夾下新建blog目錄作為部落格的根目錄
cd <folder>
npm install         #安裝所有的依賴包
安裝主題
  • 將主題檔案拷貝至站點目錄的 themes 目錄下
git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 修改配置檔案
    開啟 站點配置檔案, Ctrl +F 搜尋 theme 欄位,並將其值更改為 next
    如果顯示的是繁體中文,那麼在站點配置檔案中設定 language: zh-CN

  • 本地預覽

    hexo g # 等同於hexo generate,生成靜態檔案
    hexo s # 等同於hexo server,在本地伺服器執行
  • 開啟瀏覽器輸入 http://localhost:4000

    能夠訪問說明部署成功。

註冊 Github 並建立Pages
  1. https://github.com/ 上面註冊一個賬號

  2. 新建倉庫,倉庫名為你賬號使用者名稱.github.io

  3. 設定 SSH 遠端連線

    • 設定Git的user name和email:(如果是第一次的話)
    git config --global user.name "ttxxly"
    git config --global user.email "[email protected]"
    • 生成金鑰
    ssh-keygen -t rsa -C "[email protected]"

    連續3個回車。如果不需要密碼的話。
    最後得到了兩個檔案:id_rsaid_rsa.pub。複製 id_rsa.pub內容到github上。

部署到 github

在 部落格的配置檔案(不是主題配置檔案) _config.yml 中 末尾新增

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: [email protected].com:ttxxly/ttxxly.github.io.git,master
    coding: [email protected].coding.net:ttxxly/ttxxly.coding.me.git,master

再然後開啟 Git bash 輸入 hexo d 就是可以提交內容到GitHub上,然後就可以通過倉庫名 ttxxly.github.io 來訪問。

注意一個公鑰只能配置在一個網站,放在github就不能再放在 coding上

自定義域名訪問
  1. blog\source目錄下新建 CNAME檔案
#### 在 CNAME 檔案 中 填寫自定義域名, 格式如下
ttxxly.top

配置與優化

新增標籤頁面
/*
必看!!!!
    確認站點配置檔案_config.yml中有: tag_dir: tags (有註釋的去掉註釋)
    確認主題配置檔案_config.yml中有: tags: /tags
*/
hexo new page "tags"

編輯站點中 source/tags/index.md 檔案:

title: tags
date: 2017-3-16 14:08:51
type: "tags"

如果站點啟用多說或者Disqus,會在預設頁面新增評論,關閉評論那麼還需要新增:

comments: false
新增分類頁面
/*
確認站點配置檔案裡有 category_dir: categories
確認主題配置檔案裡有 categories: /categories
*/
hexo new page "categories"

編輯站點的 source/categories/index.md 檔案:

title: categories
date: 2015-10-20 06:49:50
type: "categories"

如果站點啟用多說或者Disqus,會在預設頁面新增評論,關閉評論那麼還需要新增:

comments: false
新增自定義頁面
hexo new page "title"
  • 如果你不想在該頁面顯示評論,那麼我們需要開啟 blog\source\logs\index.md 在date的 下一行新增 comments: false(注意冒號後面有一個空格)
  • 找到 \next\_config.yml 下的 menu , 把 title 加進去。
  • 然後在下面 menu_icons 中加入你想讓其顯示的圖示圖示傳送
  • /themes/hexo-theme-next/languages/zh-Hans.yml 檔案中(這裡預設你使用的是簡體中文,若是其他語言更改相應的yml就行),在 memu 下加一句即可:
title: 標題
文章末尾追加版權資訊

開啟 themes/next/layout/_macro/reward.swig ,在最上面新增如下程式碼:

<div align="center">
 {% if not is_index %}
   <div class="">
   <p>
    <span>
      <b>本文地址:</b>
      <a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ url_for(page.path) }}</a>
      <br/><b>轉載請註明出處,謝謝!</b>
    </span>
   </p>
   </div>
 {% endif %}
</div>
開啟打賞功能

主題配置檔案 中:

reward_comment: 堅持原創技術分享,您的支援將鼓勵我繼續創作!
wechatpay: /images/wechat-reward.png
alipay: /images/alipay-reward.jpg
友情連結

主題配置檔案

例項:

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/
自定義字型

http://theme-next.iissnan.com/theme-settings.html#fonts-customization

font:
  enable: true

  # 外鏈字型庫地址,例如 //fonts.googleapis.com (預設值)
  host:

  # 全域性字型,應用在 body 元素上
  global:
    external: true
    family: Monda

  # 標題字型 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字型
  posts:
    external: true
    family:

  # Logo 字型
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 程式碼字型,應用於 code 以及程式碼塊
  codes:
    external: true
    family: PT Mono

官方文件:自定義字型

source/css/_variables/custom.styl 檔案中

// 標題,修改成你期望的字型族
$font-family-headings = Georgia, sans

// 修改成你期望的字型族 如果不生效 請在同目錄下的 base.style 下 修改成你期望的字型族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 程式碼字型
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 正文字型的大小
$font-size-base = 16px

// 程式碼字型的大小
$code-font-size = 13px

注:上面的那種方式是更改首選字型,下面的方式會覆蓋上面的那一種方式

自定義圖示和側欄頭像

圖示:在 source 目錄下,放圖示檔案,命名為 favicon.ico
側欄頭像: 編輯 站點配置檔案 _config.yml ,新增欄位 avatar,值設定成頭像的連結地址。

其中,頭像的連結地址可以是:

完整的網際網路 URL,例如:https://avatars1.githubusercontent.com/u/32269?v=3&s=460
站點內的地址,例如:

/uploads/avatar.jpg 需要將你的頭像圖片放置在 站點的 source/uploads/(可能需要新建uploads目錄)
/images/avatar.jpg 需要將你的頭像圖片放置在 主題的 source/images/ 目錄下。
新增RSS訂閱

安裝訂閱外掛:

npm install hexo-generator-feed

編輯網站根目錄下的 _config.yml,新增以下程式碼開啟

# RSS訂閱支援
plugin:
- hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

將訂閱新增到選單欄中

  • 找到 \next\_config.yml 下的 menu , 把 rss 加進去。
menu:
  home: /
  rss: 
  • 然後在下面 menu_icons 中加入你想讓其顯示的圖示圖示傳送
menu_icons:
  logs: th-list
  projects: ra
  rss: rss
  • /themes/hexo-theme-next/languages/zh-Hans.yml 檔案中(這裡預設你使用的是簡體中文,若是其他語言更改相應的yml就行),在 memu 下加一句即可:
menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜尋
  schedule: 日程表
  sitemap: 站點地圖
  commonweal: 公益404
  logs: 日誌
  projects: 專案
  rss: 訂閱
MathJax支援

https://github.com/hexojs/hexo-math

錯誤解答

關於網站圖示不更新問題

可以檢視下GitHub網站上圖示是否更新,因為git提交時忽略大小寫的,可能檔案沒有更新,先將圖示檔案刪除,在重新上傳就可以了。