自訂文章網址

  1. 在 permalink 中使用一個新增的變數 urlname。
  2. 在 permalink_defaults 中設定 urlname 的預設值為 index。

之後要自訂文章網址時，只需要在 Markdown 文件中的 Front-matter 內設定 urlname 就可以客製化文章網址了。

  • /_config.yml

    1
    2
    3
    permalink: post/:urlname/
    permalink_defaults:
      urlname: index

未來在要發布的文章 Front-matter 上增加剛剛設定的 urlname 並設定自訂網址即可自訂文章網址。

  • example_post.md

    1
    2
    3
    4
    5
    ---
    layout: post
    urlname: 文章網址
    title: 文章標題
    ---

自訂網址效果

自訂網站網址

以設定 example.com 網域為例：

設定 Hexo 配置檔

  • /_config.yml

    1
    2
    url: https://example.com
    root: /

如果網站存放在子目錄中，例如 http://example.com/blog，請將 url 設為 http://example.com/blog 並把 root 設為 /blog/。

設定網址 DNS

前往網址供應商的設定頁面設定 DNS

  • A @ Github Pages
    • A @ 185.199.108.153
    • A @ 185.199.109.153
    • A @ 185.199.110.153
    • A @ 185.199.111.153
  • CNAME @ Github Repositories
    • CNAME www example.com

以上有兩種類型設定分別是 A 記錄 和 CNAME 記錄，兩者重點都是在設定名稱和內容，不同的點在於：

  • A 記錄是以名稱指向 IP 地址（內容）。
  • CNAME 記錄是以名稱指向伺服器名稱（內容）

這裡指的名稱其實也是指伺服器名稱，但在設定上只需要設定子網域就可以，例如像名稱 www 對應的就是 www.example.com，而blog 對應的就是 blog.example.com。www 和 blog 這部分也叫做子網域，每個子網域都是獨立分開的，如果不打算使用子網域，要直接使用主網域則設定 @ 對應在 example.com 上。

了解名稱的意義後接著就要決定這個網域要指向哪裡，分別有兩種方法為 A 記錄與 CNAME 記錄。A 記錄指向的是 IP 地址，例如 xxx.xxx.xxx.xxx。CNAME 記錄指向的是伺服器名稱，例如 example.com。在設定 DNS 的時候要選擇 A 還是 CNAME 可以看自己的狀況決定。

上述例子是用 A 記錄以 example.com 指向 185.199.108.153，也就是 Github Pages 的地址，再用 CNAME 記錄以 www.example.com 指向 example.com。這樣一來，不管是 example.com 還是 www.example.com 最後都可以訪問到 Github Pages 的地址。

設定 Github Repositories

  • Github Repositories/Setting/Option/GitHub Pages
    • Source
      1. Branch: master
        設定自己要發佈哪個分支，這裡選擇 master。
      2. Folder: /root
        設定要發佈的資料夾位置，如果放在根目錄就選擇 root。
      3. Save
    • Custom domain
      • example.com
        這裡設定完 Custom domain 後會產生一個 commit，在根目錄建立一個 CNAME 檔案，裡面存放你的自訂網域，Custom domain 會以 CNAME 檔案內的網域為準，因此你也可以自己建立 CNAME 來設定 Custom domain，或直接複製 Github Pages 產生的 CNAME 放到 /source/ 目錄下，這樣以後每次發佈網站之後 CNAME 也才會在網站的根目錄上。

設定 CNAME

  • /source/CNAME

    1
    example.com

至於為什麼要創建 CNAME 呢？前面設定網域導向到 Github Pages 的地址後還有一個問題是，Github Pages 的用戶數很多，當別人從你的網域指向他們的地址後，他們不知道來自這個網域的訪問要導向哪個用戶的儲存庫，因此在儲存庫的跟資料夾底下放一個檔案叫 CNAME，裡面儲存你的網域名稱，Github Pages 會去從這個檔案中知道這個儲存庫是要接收來自 CNAME 儲存的網域名稱，把訪問導向你的儲存庫。

設定新增文章格式

通常使用 hexo new post <title> 來新增文章時，是直接使用 <title> 來當作資料夾和檔案的名稱，當檔案多的時候可能會有些不好管理，這裡設定 new_post_name 來調整資料夾和檔案的名稱。

  • /_config.yml

    1
    new_post_name: :year:month:day - :title.md

這樣檔案開頭都會統一以日期當作編號，可以了解文章的發布日期當作參考。

同時也可以在 /scaffolds 內的 post 或 draft 設定新增的文章 Front-matter 預設的格式。

設定不渲染的檔案

在發布網站時 Hexo 會將 /source 下的 Markdown 檔案經過 /themes 內選擇的主題進行渲染，如果有不想要經過主題渲染的檔案的話，可以在配置檔案中設定例外檔案。

  • /_config.yml

    1
    skip_render: README.md

忽略 README.md 讓上傳到 Github 上時，使用原始的 README.md 檔案，顯示儲存庫的說明文件。

使用各別文章資料夾

文章內要使用檔案時可以將檔案放在 /source/images 中使用，當文章多的時候同樣可能會不好管理，這裡通過設定 post_asset_folder 來開啟各別文章資料夾。

  • /_config.yml

    1
    post_asset_folder: true

這樣每當使用 hexo new post <title> 建立新文章時，同時會在 _post 內建立一個和 <title> 同名的資料夾，將文章需要的檔案放在資料夾內，就可以直接使用檔案。

首頁每頁顯示的文章數

  • /_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    # 首頁設定
    # path: 網站首頁根路徑。（預設 = ''）
    # per_page: 每頁顯示的文章數量（0 = 禁用分頁）
    # order_by: 文章排序（預設按日期遞減排序）
    index_generator:
      path: ''
      per_page: 6
      order_by: -date

sitemap.xml 搜尋引擎爬蟲

設定 Google 搜尋引擎收錄資料

進入 Google Search Console 驗證自己的網域，驗證網域的方式有很多種，選擇一種適合自己的方法即可。

接下來要使用 Google Search Concole 的 Sitemap 功能，將網站的 Sitemap 提交給 Google，提供給搜尋引擎爬蟲使用。這裡先安裝可以自動產生 sitemap.xml 的套件 hexo-generator-sitemap。

1
npm install hexo-generator-sitemap --save

接著在 _config.yml 增加 Sitemap 設定

  • /_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    # Sitemap
    # path：sitemap 路徑
    # tags：是否要包含標籤（不包含標籤頁）
    # categories：是否要包含分類（不包含分類頁）
    sitemap:
      path: sitemap.xml
      tags: false
      categories: false

之後每當 Hexo 產生網站的靜態資源時，也會自動產生一個 sitemap.xml 在 Public 目錄下，也就是發佈到網站上時會在根目錄上 example.com/sitemap.xml，之後再到 Google Search Console 上的 Sitemap 功能頁面新增 sitemap.xml。

這樣以後 Google 的爬蟲就會定期去看 sitemap.xml 檔案是否有更新，若有更新他就會去爬你的網站並加入到搜尋引擎中了。

如果有特定的頁面不希望被加入 sitemap.xml 中，可以在頁面的 markdown 中 Front-matter 設定 sitemap: false。

1
2
3
---
sitemap: false
---

robots.txt 管理爬蟲

robots.txt 與設定 meta robots 不同在於，meta 內設定的是建立索引 (index) 和連結權重 (follow)，而 robots.txt 設定的是告訴爬蟲機器人哪些是可以爬的，哪些是不能爬的。

建立索引只在當爬蟲機器人要把你的網址索引在搜尋引擎上時會作用。連結權重只負責決定你的頁面是否擔保連出去的連結。然而不管有沒有設定上面兩個，爬蟲機器人都有可能會進到你的網站爬取資料，例如從別人的網站連結近來，如果你有某個頁面不希望被爬到，除了在 sitemap.xml 內不要放入這個頁面外，還可以在網頁根目錄中配置一個檔案 robots.txt，用來控制爬蟲機器人在網站中某些頁面能不能存取。

這裡我沒有特別需要阻擋特定頁面，因此 robots.txt 設定全部允許。

  • User-agent : 爬蟲程式的名字

    必要項目，可以在每項規則中指定一或多個 user-agent。

  • Disallow : 不應爬取的網頁網址

    每項規則至少要有一個 Disallow 或 Allow 的指令，Disallow 用以表示禁止爬蟲程式的項目。若為網頁，應撰寫完整的相對路徑；若為目錄，則必須以 / 作為結尾。

  • Allow : 允許爬取的網頁網址

    每項規則至少要有一個 Disallow 或 Allow 的指令，Allow 用以表示允許爬蟲程式的項目，可覆蓋以 Disallow 禁止的項目。若為網頁，應撰寫完整的相對路徑；若為目錄，則必須以 / 作為結尾。

  • Crawl-delay : 抓取網頁前延遲

非必要項目，用以告訴在開始抓取網頁前延遲多久，單位為毫秒。

  • Sitemap : 網站地圖的路徑

    非必要，可以透過這個指令指出 XML 網站地圖的位置，也可以同時提供多個網站地圖分行列出，此項目應使用絕對路徑。

1
2
3
4
User-agent: *
Disallow:

Sitemap: https://example.com/sitemap

Google Analytics 分析流量

在搜尋引擎收錄完我們的文章後，我們可以利用 Google Analytics（簡稱 GA） 分析我們的網站流量，從分析結果了解我們網站的效果。首先進入 GA 建立帳戶，建立完帳戶後再新增資源，之後再新增串流，也就是我們的網站，完成後依照說明讓網頁嵌入指定代碼即可。

測試使用者方法可以開無痕視窗瀏覽，讓瀏覽器重新請求一次。