如何有效建立網頁(Hexo, Github)

第一次接觸hexo建議先把相關的package安裝好,也可以參考官網有完整的docs https://hexo.io/docs/

安裝Git

- Windows: Download & install git.
- Mac: Install it with *Homebrew* , MacPorts or installer. 
- Linux (Ubuntu, Debian): sudo apt-get install git-core
- Linux (Fedora, Red Hat, CentOS): sudo yum install git-core

__Note: Homebrew 開放原始碼的軟體套件管理系統,用以簡化 macOS 系統上的軟體安裝過程(from Wiki)

安裝Hexo with npm

  • Tool: 開啟 CLI 介面(例如 cmd、git-bash 等終端機),並輸入下列指令安裝 Hexo:

    npm install -g hexo-cli

  • 安裝完可以輸入版本確認,douuble confirm 是否已經安裝完成

    hexo version (or hexo -v)

初始化 Hexo

可以直接在終端機(terminal)下指令也可以先建立好資料夾

  • (Under terminal) hexo init 資料夾名稱

如果已經建立好資料夾,請切換路徑到指定資料夾底下

  • cd 資料夾名稱

接下來打開資料夾後就可以開始編輯內容

在指定資料夾內會有

  • _config.yml
  • scaffolds 模板
  • themes
  • source:
    • _drafts
    • _posts: 資料夾內的每個md記錄每篇更新(包含Markdown…)

source那邊集完後會解析放置public, 再藉由deploy(hexo d)將內容部署至deploy_git

source -> public -> .deploy_git

部署流程

完成網頁的建立後,將內容部署到Github

在Github新創一個Repository並設置為Public

npm install hexo-deployer-git –save
修改 _config.yml 檔案的 Deployment 設定

完成修改後,更新 clean -> generate -> deploy 三行指令,避免更新不完全

hexo clean (hexo cl)
hexo generate (hexo g)
hexo deploy (hexo d)

也可以在localhost確認

hexo server (hexo s)

以上就是整個利用Hexo建立網站並部署到Github的流程,大家可以試著實做看看

Commands:
  >> clean     Remove generated files and cache.
  >> config    Get or set configurations.
  >> deploy    Deploy your website.
  >> generate  Generate static files.
  >> help      Get help on a command.
  >> init      Create a new Hexo folder.
  >> list      List the information of the site
  >> migrate   Migrate your site from other system to Hexo.
  >> new       Create a new post. (ex: hexo new post 文章名稱)
  >> publish   Moves a draft post from _drafts to _posts folder.
  >> render    Render files with renderer plugins.
  >> server    Start the server.
  >> version   Display version information.

© 2022 Tiffany's Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero