利用docker在mac上安裝hexo

前言

不知是什麼原因，我嘗試了許多次都無法正常地在 mac 上安裝 hexo ，因此就只好使用 docker 安裝 ubuntu 之後再在模擬環境內安裝 hexo ，然而最近換了新(我爸淘汰的舊mac)電腦之後我就忘記當初是怎麼裝的了！！！ ｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡ ，因為當初大部分安裝都是 Gallen 幫我用的我只有在旁邊看戲 (́◉◞౪◟◉‵) ，所以這次也只好找他求救，順便更加深入了解並寫成文章以防以後忘記。

安裝 docker

首先先到 docker 官網 下載 docker 應用程式並安裝，安裝時的設定使用預設即可

安裝完成後登入或註冊一個新帳號即可開始使用

安裝 Ubuntu 並掛載資料夾與 port forwarding

在 docker 上安裝 ubuntu 的第一步就是先從 docker hub 上下載 ubuntu 的 image 再使用 docker run 指令建立 container ,但此指令在本地沒有 image 的情況下會自動下載image後再建立 container ，因此只要在terminal鍵入以下指令即可建立 container 並掛載資料夾與 port forwarding

$ docker run -d -i -t --name my_ubuntu -p 4000:4000 -v /target:/mount

參數說明：

• run : 由 image 建立 container
• -i : -i 或--interactive 會使容器的標準輸入(STDIN)保持開啟狀態，並允許透過標準輸入將指令傳送至容器
• -t : 在容器中建立一個終端機
• --name : 替 container 取一個容易識別的名字，若未指定， docker 將隨機生成名稱
• -p : 通訊阜轉接（port forwarding），格式為 -p 本地port:container內的port，由於 hexo 的預設 server port 為4000因此這裡設為4000
• -v : 綁定掛載（bind mount），格式為 -v /目標路徑（mac內想掛載的資料夾）:/掛載路徑（container內的路徑）
• ubuntu : image 的名稱，一般建議使用官方的 image 但若要使用其他 image 可使用 docker search指令搜尋

鍵入指令後可以在 docker desktop 的 container 欄看見出現了一個新的my_ubuntu

點入my_ubuntu後再進入inspect欄內可見 PortBinding 與 Mount 後有剛輸入的參數就代表綁定成功了ヽ( ° ▽°)ノ

啟動container

在 terminal 輸入以下指令

$ docker start -i my_ubuntu

start 指令與 run 指令不一樣，前者為啟動現有容器;後者為建立容器，別搞混啦！！！（這我´-ω-｀）

cd進入mnt後就可以看見先前掛載的資料夾了

安裝 Hexo

在安裝 hexo 之前必須先利用 ubuntu 內建的 atp 的套件管理器來安裝名為 npm 的套件管理器才可使用apt install指令安裝 hexo
進入container 後在 terminal 輸入以下指令

$ apt update
$ apt install npm

安裝時會需要選擇地區與時區

安裝完後使用npm -v檢查是否安裝成功
有出現版本即代表成功啦！！

在來就進入最精彩的部分啦！！安裝hexo
我好興奮啊啊啊錒啊ᕕ ( ᐛ ) ᕗ

直接輸入以下指令

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

詳細解說可以在官網 上找到

出現Hexo is running時點入後方連結即可進入localhost預覽網頁！！

恭喜你成功安裝 hexo 囉！！ヽ(●´∀`●)ﾉ

使用 GitHub CLI 上傳到 Github Pages 上

雖然 hexo 有內建上傳至 Github Pages 的指令，但不知為何單獨使用的話在 docker 內會一直登入失敗，無法使用，因此才要安裝 GitHub CLI 來代替 hexo 內建登入 github 的方法

使用以下指令來安裝 GitHub CLI

$ apt install gh

安裝完成後鍵入以下指令來登入 github ，輸入後會跳出一些選項，下圖為我的選擇

$ gh auth login

Authenticate Git with your GitHub credentials? 這項要記得選 yes，不然會登入失敗

出現First copy your one-time code:xxxx-xxxx時，使用瀏覽器開啟以下網址 https://github.com/login/device 登入你的 github 帳號，並貼上前面的八位驗證碼

按下綠色的授權鈕

成功在 docker 內登入 github 了！！(ﾉ>ω<)ﾉ

正常來說應該就能順利 deploy 上 Github Pages 了 如果失敗的話可以試著再次重新登入

把網站加入 Google 索引內

如果想要讓自己的網站增加曝光度的話，可以試著利用 google search console 把網站加入到 Google 索引內，這樣他人在使用 google 搜尋引擎時，就能直接找到你的網站 d(`･∀･)b
首先進入 google search console 並按下”立即開始”

接著在”網址前置字元”的欄位裡填入自己的網站網址

接著使用”將HTML檔案上傳到你的網站”驗證方法把上圖的html檔下載下來

把下載下來的 html 檔丟到 blog/source 裡
然後下一步非常重要

必須在剛剛下載的 html 內加上一行layout: false防止 hexo 主題因自動排版而加入其他元素

好耶！驗證成功( ͡° ͜ʖ ͡ °)

在來到 google search console 內，按下側邊欄的”網站審查”，並按下”要求建立索引”，過一段時間後google就會幫你的網站建立索引

網址在 Google 服務中｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡

後記

我又朝向我的網站建置之路邁向了一小步呢，在安裝時確實遇到了許多困難，但在我跟Gallen 的不斷討論與除錯下還是成功的把這個網站的基礎建立起來了，而我寫這篇文章的目的不只是在幫助我不要忘記，也希望可以幫助到有相同問題的人能較快速的解決困難，當然如果是內容有錯誤又或是有遇到安裝上的問題，都歡迎在留言區裡提出來互相交流。

特別感謝

Gallen技術指導
歐對了！這超酷大麻css也是他寫的(́◉◞౪◟◉‵)