手把手 hexo 從零開始教學(一)

發表於 更新於 分類於 Disqus： 文章字數： 5.1k 所需閱讀時間 ≈ 13 分鐘

最近為了想要在家要面自己用 resperry pi 做一個網頁伺服來放個人筆記，所以花了一些時間研究了 hexo 的一些設定，以及踩了一些雷 w，以下用很簡單的內容來快速架好一個 hexo 的網頁。

keywords: hexo

手把手 hexo 從零開始教學(一)

初使化 hexo

首先我們要先下載 hexo 

1
npm install -g hexo-cli
接著初使化 hexo 依照以下指令輸入 <your_hexo_dir\ 的部份填入資料夾的名稱 
1
2
3
mkdir <your_hexo_dir>
hexo init <your_hexo_dir>
cd <your_hexo_dir>
這樣一個簡單的 hexo 就創立好啦

hexo 常用指令

我們可以透過 hexo 的一些常用指令來開起 server * 生成 public 檔 

1
2
hexo generate
hexo g
* 開起一個簡單的 server 
1
2
hexo server
hexo s
* 把 public 檔刪掉 
1
hexo clean
都常我都會用 npm 把它們合在一起，這樣開發的時候 debug 比較方便一些 
1
hexo clean && hexo g && hexo s --debug
接著 hexo 的網頁就會開在 localhost:4000 的地方囉

安裝 & 設定 next 主題

在 hexo 中裡面有各式各樣的主題可以選擇，在這裡我用 next 主題做試範，也因為 next 主題非常多人在使用，而且在許多第三方服務都已經包好了，使用起來資源非常多，非常方便。

首先先下載 next 

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

接著到 hexo _config.yaml 裡面去把 theme 修改成 next 

1
theme: next

下載完就會發現在 theme 資料夾中多了一個 next 的新資料夾，在裡面會有一個 _config.yaml 設定檔，等等我們就要來修改裡面的值，讓我們的網頁更漂亮囉。

修改 icon

在 theme/next/source/images 中，把想要新增的圖片放上來，並且修改對應的路徑 

1
2
3
4
5
favicon:
  small: /images/camal.png
  medium: /images/camal.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/camal.png

footer 是網頁最底下的那一行，我們可以把它的 icon 以及一些文字修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fas fa-dragon
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#111111"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: "若要轉載文章，麻煩請保留原作者名稱與原始連結。"

  # Powered by Hexo & NexT
  powered: true

設定 schemes

我自己比較喜歡這一個 w，把它註解掉就可以了 

1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

這個東西會顯示在網頁的最左手邊 (如果沒設定到其它地方的話)，如果有要新增分頁，要先到 source 資料新增一個名字對應的資料夾，接著到 theme _config.yaml 設定 menu。設定格式為：分頁連結 || 圖示

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  demo: /demo/ || fa fa-laptop-code
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

設定社交平台

這個就看個人想要放什麼囉 w

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/mushding || fab fa-github
  E-Mail: mailto:ajy1005464@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  Instagram: https://instagram.com/mushding || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

mathjax

在另一個筆記中有更詳細的設定教學 

1
2
3
4
5
math:
  per_page: true
  mathjax:
    enable: true
    mhchem: false

avatar 頭像設定

在左邊的欄位可以加上自己的像片，在 theme _config.yaml 找到 avatar，而圖片的位置在 theme/next/source/images 中

1
2
3
4
5
6
7
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

其它第三方設定

next 提供超多第三方可以設定的，在這邊我只使用了兩個

pjax 可以實現轉換分頁不重新加載 disqus 則是網頁底下的討論欄 

1
2
3
4
5
pjax: true
disqus:
  enable: true
  shortname: mushding-website
  count: true

設定背景、透明度

如果你想讓你網頁變得更文青的話，可以來修改這兩項設定

找到 在 theme _config.yaml 中找到 custom_file_path，並且把 style 的地方註解拿掉 

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

接著在 hexo 的 source 資料下新增 source/_data/styles.styl 檔案，在裡面填上：

1
2
3
4
5
6
7
body {
    background: url(/images/bg-2.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position:50% 50%;
}

透明度則是到 themes/next/source/css/_variables/base.styl 中

找到 content-bg-color ，且改成 rgba 的格式 rgba(255, 255, 255, 0.8) 就可以囉

新增 sitemap

我們可以透過 Google Search Console 來使得我們網站可以被 Google 搜尋到，增加流量。下載並生成：

1
2
npm install hexo-generator-sitemap --save
hexo d -g

會在 public 資料夾生成一個 sitemap.xml 檔，接著去 Google Search Console 提交就可以囉

會需要在 DNS 中 (我是用 cloudflare 代管) 新增一筆 TXT Record，長這樣：

image-20210709110129707

等一下就可以回到 Google 看看囉！

新增本地搜尋

打開 themes\next\_config.yml 後，尋找 local_search，把 false 改成 true 就可以了

1
2
3
4
5
6
7
8
9
10
11
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: true
  # Preload the search data when the page loads.
  preload: false