0%

使用GitHub + Hexo 建立個人blogger

發表於 分類於 閱讀次數：

為什麼選擇利用GitHub + Hexo 作為寫blogger的呢？

一直以來都在找工具來做技術的筆記，我有用過 Google blogger、Medium、Gitbook、HackMD來寫過。
會使用的原因：

  1. 對我來說能讓程式碼跟IDE那樣，粒粒分明是很重要的。
    我在使用上面那些工具的經驗上是程式碼都沒有Highlight的效果，還是我用得太淺了。
    Meduim 可以透過額外工具(ex. gist)才能達到Highlight的效果
  2. 後期用了Gitbook、HackMD所以比較熟悉markdown的語法
  1. 剛好看到六角學院的影片 六角學院 - Github Pages - 免費網頁空間隨你開 ，就衝一發了

先說自己架站寫技術文章的缺點就是要自己處理SEO問題

起手式 安裝 git & node.js

安裝git

因為我使用Mac來開發，所以我是使用之前裝的 Homebrew 軟體來安裝 Git

1
2
# 安裝 git
$ brew install git

安裝 node.js

https://nodejs.org/en/download/

準備Github與新增Repository

可以看這個來做 六角學院 - Github Pages - 免費網頁空間隨你開

  1. 註冊一個github帳號
  2. 建立一個 Repository名稱為 ${yourAccount}.github.io，以我的帳號來說就是sinyilin.github.io
  3. 進入該Repository 設定source 為master branch

各種安裝

安裝 Hexo

1
2
3
4
5
# 安裝
$ npm install hexo-cli -g

#查看安裝版本
$ hexo version

安裝 Hexo Git

1
$ npm install hexo-deployer-git --save

初始化 Hexo

1
2
3
$ hexo init blog  #會建立一個blog資料夾
$ cd blog   #進入該資料夾
$ npm install

如何與github連接

設定連結

進入blog 資料夾，修改blog 資料夾下的_config.yml(全域的config)，如下：

在全域的config 

1
2
3
4
deploy:
  type: git
  repository: http://github.com/{yourname}/{yourname}.github.io.git
  branch: master

部署

1
$ hexo d -g

推上去後可以至 https://{yourname}.github.io/ 查看結果

設定樣式

選擇主題

一開始會有一個預設的主題
如果看不順眼可以自行選擇主題
https://hexo.io/themes/

我看蠻多人好像都會使用nexT (在我建置的當下已經到v7.4.0)
https://github.com/theme-next/hexo-theme-next

透過指令將主題載下來

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

我看到另一個感覺也不錯的主題

設定blog主題

在blog資料夾中，有個檔案_config.yml，這個檔案是整個專案的設定檔
將裡面的theme 改成next，後重新部署

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
1
2
#重新部署
$ hexo d -g

有時重新部署不會很快更新，這時可以直接在local run做測試

1
2
# local run
$ hexo s --debug

可以透過本機的 http://localhost:4000 查看

next又分為四個小主題

💟 Muse | 🔯 Mist | ♓️ Pisces | ♊️ Gemini
可以由next 資料夾中的_config.yml設定
直接搜尋Pisces
不註解掉的就是要使用的主題

在next的config 

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

各種設定

剛剛有提到有一個是全域的config
在主題next內有一個config，這是針對使用該主題的設定

設定整體的blog 基礎資訊

在全域的config

1
2
3
4
5
6
7
8
# Site
title: roi's blog
subtitle:
description: 在此紀錄我所學到的東西.
keywords:
author: Roi Lin
language: en
timezone:

程式碼呈現方式

在next的config

搜尋 codeblock，
總共有這幾種樣式可供選擇 normal | night | night eighties | night blue | night bright
我是使用night eighties的

也可選擇要不要開啟複製按鈕

1
2
3
4
5
6
7
highlight_theme: night eighties
# Add copy button on codeblock
copy_button:
  enable: true
  # Show text copy result.
  show_result: true
  # Available values: default | flat | mac

設定menu

在next的config

搜尋 Menu Settings，並修改

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

移除預設”嗯..! 目前共有 2 篇文章。 繼續努力。”

在next的config

設定cheers 為false

1
2
# Enable "cheers" for archive page.
cheers: false

取消底下的由 Hexo 強力驅動 v3.7.1 | 主題 — NexT

在next的config

搜尋powered 與theme 改為false

1
2
3
4
5
6
7
8
9
10
11
powered:
  # Hexo link (Powered by Hexo).
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: true

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: true

自動新增繼續閱讀

在首頁的部分會列出所有文章，此時文章都會完全地顯示，很佔版面。

解決方法：

  1. 可以在文章中直接添加，顯示閱讀全文按鈕

    1
    <!-- more -->

  2. 一勞永逸作法：

則搜尋 auto_excerpt:，設成true
可以在length設定預設斷開的長度

設置樣式總結

這篇NexT 實用的設定與功能有列出一些blog的設定配置可以參考

另外，這一篇HEXO搭配主題next基礎配置教學也有列出一些設定可以參考
這篇文中有提到講到一重點，就是不要太客製化，不然之後升版可能會有問題

新增tags、categories、archives 頁面

terminal cd至blog根目錄

1
2
3
$ hexo new page tags
$ hexo new page categories
$ hexo new page about

到source資料夾下新出現的這3個目錄，裡面的index.md各自加上type: “tags”(categories、archives同理)
主題會自動渲染成相關頁面

1
2
3
4
5
---
title: about
date: 2019-09-15 00:27:20
type: about
---

發表文章

發新文章

1
2
# postName是文章的名稱
$ hexo new {postName}

這時在 source / _post 資料夾中可以看到你剛剛新增的檔案.md檔
寫完內容後，重新部署就可以更新blog了

1
2
# 重新部署
$ hexo d -g

設定每篇文章基本資訊 :文章分類 categories 與 tags

每一個.md檔 上面都可以設定基礎資訊，如：

1
2
3
4
5
6
7
8
9
10
---
title: Mac ＆ Win7 port 佔用處理方式
date: 2019-09-14 21:03:58
categories: 
- spring boot
tags: 
- port
- command line
- spring boot
---

編輯已發表的文章

直接編輯.md檔案
再重新部署

刪除文章

直接刪除目錄中的.md 然後下指令

1
2
$ hexo clean    # 清除快取檔案和已產生的靜態檔案。
$ hexo d -g     # d = deploy, g = generate

草稿

我目前都是在HackMD 上面寫完草稿，完成後就直接發，所以比較少用到這個功能
可以參考這篇 Hexo 文章保存为草稿

安裝第三方套件

設定每篇文章閱讀量

如果想要觀察自己的blogger有多少人看的話可以設定
設定又分成兩種
一種是全站的 不蒜子统计
一種是文章單獨分開計算的 LeanCloud

配置LeanCloud

可參考這兩篇
使用leancloud给博客添加阅读次数

Hexo Next leancloud文章阅读次数配置以及插件无效问题解决

不過因為leanCloud 現在創建應用需要實名認證，實名認證需要掃支付寶，因此我放棄使用

留言板 Disqus

可以參考此篇 部落格第三方服務介紹進行Disqus的申請

在設定的部分，打開Disqus

1
2
3
4
5
6
7
# Disqus
disqus:
  enable: true
  shortname: roi-blog
  count: false
  lazyload: false
  #post_meta_order: 0

設定完後你可能會發現，部分頁面不想給別人下評論ex. tag 跟category頁面
可以透過設定.md檔的基礎資訊來排除

1
2
3
4
5
6
---
title: Categories
date: 2019-09-15 00:22:40
type: categories
comments: false
---

讓大家找得到你的blog SEO

對google search的設定

我先依照這篇來做 Hexo博客的优化方法，以Google搜索为例

網站整體的調整

這兩篇也有提到一些注意事項

  1. hexo的SEO方法

  2. 基于Hexo中Next主题的SEO优化指南

當文章越來越多時 該怎麼管理

本站還沒開始做，但未來可能會參考這篇來做
Hexo - 使文章依文章分類為資料夾名稱置放

參考資料

六角學院 - Github Pages - 免費網頁空間隨你開

Hexo+GitHub，新手也可以快速建立部落格