Posted Updated HEXO

Hexo + Github Blog 建立過程

這篇文章就簡單紀錄一下，建立這個 Blog 的過程。

建置環境

OS: Windows 10
Hexo: 3.2.2
Node.js: 8.9.4
Github Desktop

Blog 建立步驟

Github 配置

創建放置 Blog 檔案的 Repository

[Note] Repository 名稱為 yourname.github.io，yourname是你的帳號名稱

Github Desktop 與 Github 同步

首先，把剛創的 Repository Clone 到本地端：
Github Desktop
然後右鍵剛拉下來的 Repository，選取 Open in Git Shell 打開 powershell，執行指令將 Github 上的倉庫拉到本地端。

1
git pull origin master

安裝 Hexo

首先，使用 npm 安裝 hexo

1
npm install -g hexo-cli

安裝成功後，輸入以下指令可查看安裝版本

1
2
3
4
5
6
7
$ hexo version
hexo: 3.2.2
hexo-cli: 1.0.2
os: Windows_NT 10.0.10586 win32 x64
http_parser: 2.7.0
node: 7.3.0
...

接下來就可以來初始化我們的第一個 Blog 了，依序輸入以下指令：

1
2
3
4
hexo init       # 初始化 blog
npm install     # 安裝相關套件
hexo g          # 產生 blog 靜態文件
hexo s          # 啟動本地瀏覽，用於預覽 blog

再來就可以用瀏覽器訪問http://localhost:4000/了，預設會有一個 Hello-World 的文章，如 Hexo’s Hello World。

安裝其他插件

  • hexo-deployer-git

    1
    npm install hexo-deployer-git --save

    修改設定
    - repo: 儲存庫（Repository）網址
    - branch: 分支名稱。如果您使用的是 GitHub 或 GitCafe 的話，程式會嘗試自動偵測。
    - message: 自定提交訊息

    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: <repository url>
      branch: [branch]
      message: [message]

  • hexo-admin

    安裝 hexo 後台

    1
    npm install hexo-admin-qiniu --save

    使用方法

    1
    2
    $ hexo server -d
    open "http://localhost:4000/admin/"

  • hexo-git-backup

    1
    npm install hexo-git-backup --save

    使用方法

    1
    hexo backup

  • hexo-generator-sitemap

    安裝

    1
    $ npm install hexo-generator-sitemap --save

    於 _config.yml 加入

    1
    2
    sitemap:
      path: sitemap.xml

HEXO Blog 設定

安裝主題

使用的主題為 NEXT

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

於 _config.yml 中修改使用主題

1
theme: next

主題設定

  • scheme

    至 next/_config.yml 修改至 scheme: Muse

  • animation

    因為我不喜歡動畫所以把它關掉

    1
    2
    3
    # Use velocity to animate everything.
    motion:
      enable: false

  • disqus

    1
    2
    3
    4
    5
    disqus:
      enable: true
      shortname: [your_disqus_name]
      count: true
      lazyload: false

  • MathJax

    1
    2
    math:
      enable: true

  • Post updated time

    1
    updated_at: true

Blog 配置

  1. tags/categories page
    設定方法照 iissnan/hexo-theme-next - Wiki
    - 创建分类页面
    - 创建标签云页面
    這兩個教學去設定

  2. 設定文章開頭的 snippet
    在 scaffolds 下的 post.md 文件，其功能是用來建置文章的初始狀態。

    1
    2
    3
    4
    5
    6
    7
    title: {{ title }}
    author: Mo1cibo
    date: {{ date }}
    tags:
    categories:
    permalink:
    mathjax: false

  3. Disqus 留言板
    簡單步驟如下
    1.去 Disqus 申請帳號
    2.去 next/_config.yml 中貼上自己的 disqus shortname

    1
    2
    3
    4
    5
    disqus:
      enable: true
      shortname: [your_disqus_name]
      count: true
      lazyload: false

    詳細的設定及修改可以參考以下網頁
    解決 Hexo Comment !
    Disqus 留言系統基本設定與匯入舊留言教學

  4. 設定字型
    1.於 Google Fonts 上找想要的字型，例如 DF Dejavu Pro Regular
    2.於 next/_config.yml 中加入

    1
    2
    3
    4
    global:
      external: true
      family: DF Dejavu Pro Regular
      size:

  5. Permalink
    使用永久連結主要有兩個原因
    1.避免修改標題後，搜尋引擎找到舊的網址。
    2.自訂英文網址，使搜尋引擎關鍵字容易查詢到。
    可參考: Permalinks

  6. Google Analytics
    註冊 Google Analytics
    修改 _config.yml，新增ID：google_analytics: UA-xxxxxxxx-x

  7. Google Search console
    依照指示將一個 html 上傳至 repo 驗證

  8. Favicon
    依照喜好於 next/_config.yml 修改網頁的小圖示
    圖片路徑為： ...\Blog\themes\next\source\images

    1
    2
    3
    4
    5
    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

  9. Avatar
    依照喜好於 next/_config.yml 修改網頁的小圖示
    圖片路徑為： ...\Blog\themes\next\source\images

    1
    2
    3
    4
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.gif
    # in site  directory(source/uploads): /uploads/avatar.gif
    avatar: /images/avatar.gif

  10. sitemap
    安裝完 hexo-generator-sitemap，然後 deploy 就會在 public 資料夾自動產生 sitemap.xml

    再來到 _config.yml 加入 sitemap 選項

    然後就可以到 google search console 上面設定 sitemap 路徑了

    以往經驗大概過一兩天就會撈到資料了

    可參考: ｜Hexo优化｜如何向google提交sitemap（详细）

常用 HEXO 指令

新增 page / post

1
2
$ hexo new "postName"       # 產生新的文章
$ hexo new page "pageName"  # 產生新的頁面

指令簡寫

1
2
3
4
$ hexo n == hexo new        # 產生新的 post/page/draft
$ hexo g == hexo generate   # 產生靜態文件
$ hexo s == hexo server     # 啟動本地瀏覽
$ hexo d == hexo deploy     # 部署文件至 Github 上

指令組合

1
2
$ hexo d -g   # 產生靜態文件後，部署 blog
$ hexo s -g   # 產生靜態文件後，預覽 blog

使用 hexo-admin

1
2
$ hexo server -d
open "http://localhost:4000/admin/"

Hexo + Github Blog 建立過程

https://mousyball.github.io/2018/02/12/Hexo-Github-Build/

Author

Mo1cibo

Posted on

2018-02-11

Updated on

2020-10-31

Licensed under

#

Comments

Follow

Links

Categories

×