Featured image of post [Web] Hugo+Github server
Web

[Web] Hugo+Github server

利用Hugo建置靜態網頁放置在Github server上

利用Hugo建置靜態網頁放置在Github server上

結果圖

Image 1

事前軟體安裝

  • Git
  • Hugo

開始

在Github上創立兩個Repositories 兩個Repositories分別代表

  • [YourwebName] : 放置Hugo code
  • [GithubUserName].github.io: 放置Hugo產生出來的靜態網頁 Image 1

將兩個Repositories clone 下來並初始化hugo folder

1
2
3
4
5


    git clone https://github.com/skysora/myweb.git
    cd myweb
    hugo new site [yourNeedName]
    git clone https://github.com/skysora/skysora.github.io.git

將想要的模板git clone 到 /themes目錄下

可以去官方網站挑模板

1
2
3
4


    cd themes
    git clone https://github.com/CaiJimmy/hugo-theme-stack-starter
  • 注意，若要載hugo-theme-stack-starter模組要另外載mod
1
2
3
4


    hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v3
    hugo mod tidy

將hugo.toml 設定檔案做修正

  • 修正baseURL 為你的github網址(baseURL)
  • 將theme修正為你clone模板名稱(theme)
  • import 模組

Image 1

產生靜態網頁

  • 先將[GithubUserName].github.io Repositories clone 進[yourNeedName] 資料夾
  • 將hugo code 轉成靜態網頁
1
2
3
4


    git submodule add -b main https://github.com/skysora/skysora.github.io.git public
    hugo -t hugo-theme-stack

將靜態網頁部署上去

1
2
3
4
5


    cd public
    git add -A
    git commit -m "first commit"

— Creating a Blog with Hugo and Github in 10 minutes1

  1. https://www.youtube.com/watch?v=LIFvgrRxdt4 ↩︎

comments powered by Disqus
© 2023 Sora的部落格
Built with Sora