Github.io個人網站架設

前言

一切的啟發源自看到白噪音的 Blog 架設，雖然她沒有往後更新，不過持續在Twitch開台，是個蠻有趣的人。之後也嘗試在 Medium 寫文章，但是 Medium 推廣 Membership 的制度，讓我很不開心，我寫文章大都是為了筆記或者分享，而不是要盈利，付費文章我很認同，但是 Medium 上很常點閱到標題寫的很好，但是內容乏善可陳，然後還要扣我 free member-only stories。 Medium 上文章仍會持續更新，但兩邊內容不會做同步處理。

使用 Github 建立靜態網頁

Google 就會有很多相關教學，我把我相關的經驗寫下，希望對剛加入的人有幫助。

什麼是 Git/GitHub?

Git 是版本控制系統，假設今天 Google 有個企劃叫做 Google Care，目的是研發軟體可以影像辨識人體健康疾病，而有 10 個人在負責寫程式，而在分工下，必須記錄這檔案被誰編輯，更改了哪些地方，或者做了哪些檔案處理，Git 就是負責記錄的軟體。如果有興趣了解更多，可以參考為你自己學 Git，我並沒有買，不過網站上的內容足以應付日常需求。

GitHub 是全球最大的程式碼倉庫，你可以存放代碼在上面，或者與其他開發者一同開發程式。我們建立個人網站基於 GitHub 所提供的服務上，所以需要 GitHub 的帳號。

GitHub Pages

GitHub Pages官網上已經有提供基本的講解，這一部分只是翻譯成中文，然後一步一步照做而已

建立倉庫(Create your repository)

在建立倉庫的頁面，記得一定要輸入跟你帳戶(Owner)一樣的名稱，例如我的名稱是Tylerastro，那我的倉庫名稱(Repository name)就要是tylerastro.github.io 建立完成後，要改 subdomain name 都是可以的

建立 Pages

在建立完成倉庫後，進到倉庫的設定頁面在左邊選取 Pages，進到裡面的設定，在 Theme chooser 裡面選想要的主題之後，就可以在 https://[username].github.io/ 看到你的網站了。

完成後，頁面應該會像這樣，顯示出你的網址，網址裡面就會是你剛剛所選的主題

使用第三方套件管理 GitHub Pages

要使用的套件包含：Node.js, Git 安裝 Node.js，在終端機上輸入npm install -g hexo-cli 之後建立資料夾，建構要寫部落格的環境。

hexo init [name]  # 初始化Blog資料夾
cd name           # 進入Blog資料架   #cd = change directory
npm install       # 安裝Hexo
npm install hexo-deployer-git --save  # 安裝 git 套件

環境這樣就建立完成了

接下來要建立與 Github Pages 的連結，畢竟現在只有在上面有個倉庫，本機端有個資料夾環境，兩者並沒有關聯。那我們就需要進到_config.yml 這個檔案進行參數的修改，主要要修改兩項，我建議使用 vim 或者 Textedit 等簡單軟體操作即可

在 URL 底下，修改 url: [your url]，把在建立倉庫 pages 的網址貼上去
連動你的 git，在最底下的 deployment

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: [url of your repository]
  branch: master  # 在你的倉庫頁面上會有寫分支名稱，通常是main或是master

之後進行存檔就完成連結囉！

第一次更新

一切準備就緒，我們試著把原本的 GitHub Pages 做一次更新，我們在終端機裡面輸入

hexo g       # g for generate, 你也可以輸入 hexo generate
hexo server

之後可以在瀏覽器貼上http://localhost:4000，看看當前的部落格外觀，若確定沒問題，可以在終端機輸入

hexo d # d for deploy 那檔案就會被輸出至你的 GitHub repository，之後在你的網站上就可以看到更新完後的版本，上傳完後可能會需要等待一些時間才會看到變動。

常用指令

hexo clean     # 清除生成檔案
hexo generate  # 產生Blog檔案
hexo server    # 開啟伺服器預覽
hexo deploy    # 上傳至GitHub
 
hexo new [layout] [Title]      # 新增新文章 layout 可以選post/page/draft
hexo publish [layout] [Title]  # 移動或發布文章

更多指令跟內容可以參照官網

下一篇內容會關於我所使用到的外掛以及喜歡的主題，這篇先到這裡。À bientôt.