介紹
Hugo是目前產生靜態網頁速度最快的,Hugo在中文資料上真的很少,剛好也搬到Hugo上筆記一下使用方法。
安裝Hugo
下載
以Windwos 10作業系統示範
下載hugo:https://github.com/gohugoio/hugo/releases
選擇版本,依最新版本為主,例如: hugo_0.72.0_Windows-64bit.zip
下載解壓縮,建立資料夾 路徑 C:\hugo\bin
將hugo.exe放入bin資料夾
環境變數
啟動環境變數
快捷鍵:win
+ R
輸入:rundll32.exe sysdm.cpl,EditEnvironmentVariables
對PATH編輯,新增 > 輸入 C:\hugo\bin > 確定
安裝確認
開啟命列提示CMD
快捷鍵:win
+ R
輸入 cmd
輸入 hugo version
有顯示版本代表安裝正常
建立hugo網站
開啟命列提示CMD
快捷鍵:win
+ R
輸入 cmd
切換到要儲存的資料夾
cd c:\hugo
建立指令
hugo new site 網站資料夾名稱
hugo new site my_website
這樣就完成建立一個hugo啦。
安裝主題
clone需安裝git:git-scm.com
安裝一直點next就好了,安裝完成後請重新開啟命令列CMD
Hugo 沒有默認主題必須選一個主題安裝
選擇一個主題:themes.gohugo.io
選zzo當作例子:github.com/zzossig/hugo-theme-zzo
切換到建立好的網站資料夾
cd my_website
下載指令
git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
到themes\zzo
,刪除.git
隱藏資料夾
開啟隱藏項目
,打勾 隱藏的項目
將zzo/exampleSite
內的資料複製到根目錄資料夾
根目錄資料夾的config.toml
刪除掉
每個主題都會有exampleSite
設計者對每個結構設計都不同所以必須一照exampleSite
內的資料為主
注意:config資料夾為設定檔
啟動Hugo讓你的網站動起來
需再根目錄執行
執行 hugo server
網頁上輸入:http://localhost:1313/
你的網站已經動起來啦
資料夾結構
- content 文章、頁面
- static 圖片、影片之類的
- themes 主題
- data 讓頁面讀取資料,如json檔
- layouts 修改主題的地方
想要更深入了解可以到官方文檔: gohugo.io/content-management/organization/
內容修改
安裝主題完成後還需要改成自己的東西才是一個完整的網站。
config\_default
config.toml
功能設定languages.toml
多語言設定menus.en.toml
EN英文選單menus.ko.toml
KO韓文選單params.toml
主題功能參數
了解更多看看zzo主題文檔:zzodocs.netlify.app/docs/configuration/configfiles/
config.toml
多語言設定,如果只使用單一語言可將多語言設為false,下面會有新增中文語言方法。
|
|
params.toml
介紹一些設定
|
|
languages.toml
多語言網站標題、新增語言設定
|
|
新增中文語言
about
指令:hugo new zh/about/index.zh.md
編輯 zh/about/index.zh.md
|
|
archive
指令: hugo new zh/archive/index.zh.md
編輯 zh/archive/index.zh.md
|
|
gallery cartoon
指令:hugo new zh/gallery/cartoon/index.zh.md
編輯 zh/gallery/cartoon/index.zh.md
|
|
gallery photo
指令:hugo new zh/gallery/photo/index.zh.md
編輯 zh/gallery/photo/index.zh.md
|
|
posts
指令:hugo new zh/posts/index.zh.md
編輯 zh/posts/index.zh.md
|
|
i18n zh.toml
編輯 themes\zzo\i18n\zh.toml
改成想要的詞彙
|
|
content zh
將 \content\ko\_index.md
複製_index.md到\content\zh\_index.md
編輯\config\_default\config.toml
|
|
languages
編輯\config\_default\languages.toml
新增 繁體中文選項
|
|
建立文章
寫點文章
建立文章指令hugo new zh/posts/第一篇文章.md
|
|
執行Hugo
Hugo server
建立文章
建立文章指令:hugo new content\zh\文章名稱.md
設定文章默認選項
編輯
archetypes\default.md
例子
draft: true
是使用草稿如果不想使用草稿設定成false,
image: /圖片
|
|
這樣之後只要產生文章都會使用這些設定,不必在複製貼上,也可以加上自己想要的內容
圖片位置結構
素材需放在static資料夾內
static/images
圖片網址會是http://localhost:1313/images/abc.jpg
簡碼 shortcodes
Hugo本身有提供很多簡碼,像是很常用的youtube、instagram、twitter都有已經做好了
youtube
https://www.youtube.com/watch?v=w7Ft2ymGmfc
{{< youtube w7Ft2ymGmfc >}}
自動播放
{{< youtube id="w7Ft2ymGmfc” autoplay="true">}}
instagram使用方法
https://www.instagram.com/p/BWNjjyYFxVx/
{{< instagram BWNjjyYFxVx >}}
隱藏標題
{{< instagram BWNjjyYFxVx hidecaption>}}
超多簡碼使用方法
官方文檔:gohugo.io/content-management/shortcodes/
twitter使用方法
https://twitter.com/spf13/status/877500564405444608
{{< tweet 877500564405444608 >}}
加入google ad
任何主題都適用
以自動廣告
為主做為加入
在partials
建立google資料夾
路徑:themes\zzo\layouts\partials\google
goolge內建立一個 adsense.html
在adsense.html
放入廣告代碼
|
|
編輯themes\zzo\layouts\_default\baseof.html
插入代碼,找到有{{ partial }}
的代碼放在一起
{{ partial "google/adsense" . }}
ads.txt
將ads.txt
放置static
資料夾內,只要產生頁面後會自動放在根目錄
Google Analytics
使用靜態網站,Analytics是必備的工具,Hugo已經有寫好只需要設定。
編輯 config\_default\config.toml
zzo 主題直接搜尋 googleAnalytics
加入
googleAnalytics = "UA-XXX-XX"
相關文檔:gohugo.io/templates/internal/
相關文章設定
zzo主題已經有做相關文章的html,現在只需要設定一下就可以使用
編輯 config\_default\config.toml
最下方加入以下
|
|
使用任何主題可以看一下作者有沒有加入相關文章設定
搜尋 Site.RegularPages.Related
有找到代表有設定
- Related Content
上傳github及netlify使用
到這裡就代表完成你的網站啦,最後就是上傳,我使用github加netlify,netlify會從你的github repository clone到netlify伺服器部署。
兩種方法
- giuhub page
- netlify
HAPPY8
github
只想上傳到github需要這樣做
指令 輸入 Hugo
根目錄會看到一個public資料夾
將裡面資料上傳到github。
github建立資料庫
新增一個repository github.com/new
要使用網站必須輸入名稱.github.io
必須與名稱相同
例如:網址結構是 moki.github.io
一定要設定Public
設定網址
編輯 config\_default\config.toml
我的網址是https://moki.github.io,請設定成你的網址
baseURL = "https://moki.github.io"
上傳
.gitignore可選擇使用或不使用
禁止上傳到gitgub的檔案或資料夾
建立.gitignore
檔案,不用輸入任何副檔名,.gitignore
裡面輸入.gitignore
,可以輸入不想上傳的資料夾或文件。
切換到public資料夾 cd public
執行以下
資料庫網址改成你的
git init
git add .
git commit -m "first hugo commit"
git remote add origin https://github.com/moki-tw/hugo.github.io.git
git push -u origin master
你的網站就完成啦
使用script(腳本)
方便之後寫完文章只要點一下就會產生網頁並自動上傳
放在根目錄,建立檔案deploy.sh
|
|
以後寫完文章或其他設定只需點一下deploy.sh
就會自動上傳
netlify
使用netlify服務
不需要產生頁面,如果有產生過的public資料夾先刪除。
建立設定檔 netlify.toml
建立設定檔,根目錄建立一個netlify.toml
設定如下
|
|
上傳到github
.gitignore可選擇使用或不使用
根目錄建立.gitignore
檔案,不用輸入任何副檔名,.gitignore
裡面輸入.gitignore
,可以輸入不想上傳的資料夾或文件。
cd到根目錄,資料庫網址改成你的
git init
git add .
git commit -m "first hugo commit"
git remote add origin https://github.com/moki-tw/hugo.github.io.git
git push -u origin master
netlify 使用方法
點選New site from Git
選擇Github
點選Authorize netlify by Netlify,會讀取得你的repository
點選Install
選擇repository,當你有很多repository 記得使用搜尋功能
會自動讀取設定,直接選擇Deploy site
點選Delpoying your site可以看到部署狀態。
取得網址
到設定檔修改網址在重新Push到github
https://distracted-hodgkin-432277.netlify.app
設定網址
編輯 config\_default\config.toml
baseURL = "https://distracted-hodgkin-432277.netlify.app"
git push
git add .
git commit -m "first hugo commit"
git push -u origin master
只要你的github repository有更新,netlify會自動部署,超級方便的服務,免費方案有提供每個月100GB流量。
netflify也可以對private(私人)部署,不想讓網站資料被google到可以設定成(private)。
也可以設定網域,點選 domain,照著說明步驟走就可以了,可以搭配Cloudflare
不只兩種方法還有很多種方法可以部署你的網站看看文檔
官方文檔:gohugo.io/hosting-and-deployment/
使用script(腳本)
方便之後寫完文章只要點一下就會產生網頁並自動上傳
放在根目錄,建立檔案deploy.sh
|
|
SEO必備 sitemap.xml
主題大部分都會做好sitemap.xml設定,輸出Hugo看public資料夾
有沒有sitemap.xml,
路徑:http://localhost:1313/sitemap.xml
到search.google.com設定你的sitemap讓google可以爬取你的網站
新增sitemap.xml方法
gohugo.io/templates/sitemap-template
yaml轉換toml
官方文檔有的只有yaml,很多主題都使用toml做設定,需要將yaml轉toml才可以設定成功。
撰寫文章工具
選擇什麼軟體來寫文章,推薦使用vs code並搭配Markdown Preview Enhanced外掛
使用指令hugo server
檢查文章
線上撰寫netlifycms是很強大的一款系統,是完全開源,能將你的Hugo有個後台寫文章、上傳圖片。
可以去看看官方www.netlifycms.org
分類的使用
靜態沒有後台可以查詢已經有哪些分類,所以必須要看一下全部分類的網址來決定要放到哪個分類上。
網址:https://你的網址/categories/
例如:https://aishuafei.com/categories/
把所有超連結新增另開新視窗 blank
建立資料夾結構jquery
及jquery_add_blank.html
檔案
themes\zzo\layouts\partials\jquery\jquery_add_blank.html
#container div.wrapper main div article p a
需要依你的主題為主去針對元素選取 Chrome按下F12可以查看
輸入
|
|
編輯 themes\zzo\layouts\_default\single.html
輸入
{{ partial "jquery/jquery_add_blank" . }}
Hugo 常用指令
喧染:hugo server -D
-D參數是連草稿也會一起喧染,不管已設定true的草稿。
輸出頁面:hugo
結論
Hugo本身做很多功能已經很足夠,缺點是沒有外掛可以使用,產生頁面快是Hugo的優點。