categories: website網頁設計
tags: web
hexo
因為心血來潮,想說是時候該架設自己的網站了,可以記錄自己一些學習心得,在建立環境的時候也是反反覆覆重建了好多次嗚嗚,當然最後還是順利的建完了。
接下來就開始介紹 hexo 的基本安裝,並且架設在自己的github上。
環境:mscOS mojave (當然windows也是可以)
設置 github page 方式,以 <user_name>.github.io
為專案名稱,利用 branch 建構,這樣生成的網址將會是 https://<user_name>.github.io/<repo_name>
在個人的 github 頁面上新增一個 repository (此處我就使用 blog 作為專案名稱),不需建立 README.md
還有很多重要的事情,中間可能會遇到一些問題,接下來的部分我就簡單介紹一下,上網找一下應該都會有很多解決方式。
Hexo 是一個用 Node.js 所寫成的部落格框架,因此在安裝前必須先確定我們是否有 Node.js 套件管理工具 npm ( 本文使用 )
我們可以從 Node.js官網 下載安裝,安裝完後至終端機輸入
輸出版本後便表示安裝已完成
這樣我們就可以從這邊修改部落格內容,並且推上 github 專案中。
像我這裡就遇到 command not found: hexo bash
的情形,這裡有個方法提供參考:
載完nvm,還有一個路徑問題(for mac),首先 open ~/.zshrc
,然後在.zshrc檔案新增hexo路徑:
完成後再重新安裝Hexo即可。
這裡有幾個常用指令要記住,之後再進行部落格修改的時候會很常使用到 :
備註:
在 github 下的 branch 我設定成 master/hexofile
在 hexofile 進行操作,利用 git 指令載入到 hexofile
上;如果是利用hexo指令則會自動部署到 master
裡(因為_config.yml裡的branch設定成master)
hexo指令進行部署厚的檔案是經過轉換的,並非原始檔,所以使用 branch 維護是比姣好的。
主要是為了不讓原始檔只保留在本機,如果電腦壞了或者換電腦,你還可以從github找到。
主題可改可不改,看個人喜好囉。
因為主題的版本不同,有些檔案以及程式碼都不太一樣(但大同小異),每行程式註解都看過,大概就能知道他在幹嘛。
version: 5.1.4
接下來要到設定檔中將主題改為 next ( 預設是 landscape )
主要的設定檔案有兩個 :
\_config.yml
\themes\next\_config.yml
網站的基本資訊設置,比較要注意的地方是 language 的部分,之後要配合 Next 的語言統一做設定。
設定文章網址型態,這裡主要是讓某些地方會需要顯示文章網址 (例如版權宣告區塊)的部分可以正確顯示。
將主題改為 next
最後這裡最重要,之後我們要利用 hexo 指令進行部屬,就會調用這部份來進行部屬,如果這部分沒有正確便無法部屬上去。
如果不是利用 master 來進行網站設置,那麼 branch 的部分就要改成你的 <branch_name>。
Next 一共有四種版型可以選擇,大家可以自行選擇版型,將不要用的版型用 # 註釋掉即可。( 我自己使用的是 Gemini 版型 )
可以在 \themes\next\source\lib\canvas-nest.js
做修改
在每一個設定更動後,也有一個標準 SOP :
先在本機上看看是否有什麼問題,持續地進行微調,待最後設定都沒有問題後再進行部屬
Hexo 支援 markdown 編輯。
基本上有在使用hackmd的人都並不陌生,有興趣可以去學習 markdown語法
<!--more-->
是用來縮短首頁每篇文章的長度,會顯示閱讀全文
接下來,我們要在網站中建立第一篇新文章,您可以直接從現有的範例文章「Hello World」改寫,也可以學習 new 指令。
您可以在指令中指定文章的佈局(layout),預設為 post
,您可以透過修改 _config.yml
中的 default_layout
設定來指定預設佈局。
Hexo 有三種預設佈局:post、page 和 draft,它們分別對應不同的路徑,而您所自定的其他佈局和 post 相同,都儲存至 source/_posts 資料夾。
佈局 | 路徑 |
---|---|
post | source/_posts |
page | source |
draft | source/_posts |
一般在首頁會希望每一篇文章只要呈現一小部分內容以及一張代表性圖片即可,藉由 “ 閱讀全文 “ 按鈕來閱讀每一篇文章完整內容,在 hexo 官方的建議作法是在文章中插入 <!-- more -->
便可以在首頁僅呈現此代碼之前的文章內容。
至於閱讀全文的按鈕樣式,我們可以在 \themes\next\source\css\_schemes\<選擇的版型>\index.styl
最後加入以下內容來做調整
現在網路上真的很多教學範例,但是實際操作起來,因為每個主題不同,甚至於主題的版本也不同,在查詢的時候也會遇到一些問題,一開始因為路徑問題以及套件版本問題花了很多時間在建立環境,大家遇到的問題我遇到了,沒遇到的問題我也遇到了,俗話說的好,“頭過身就過”,老天幫你挖了一個坑,就是要你跳下去,期許自己未來在這個地方能夠分享很多自己學習到的新知識與心得。
另外還有一些配置,像是留言板、背景顏色、字體大小、分類標籤的設置我就不一一贅述,有時間會再把東西都補上來的。
記錄一些後續再換電腦後重新部署遇到的問題
npm install hexo-filter-mermaid-diagrams
{repo_folder}/themes/next/layout/_partials/footer.njk
(我的主題是 next){repo_folder}/themes/next/_config.yml
Mermaid tag
中修改成以下內容