Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

打造個人化網站 - Build Personal Website via Hugo

1,869 views

Published on

最有說服力的求職履歷 - 我的個人化網站
銘傳大學 - 資通訊軟體創新人才推升推廣計畫短期課程
Hugo 手把手教學
workshop 練習檔案 https://goo.gl/rsQ52N

Published in: Software

打造個人化網站 - Build Personal Website via Hugo

  1. 1. 最 有 說 服 ⼒力力 的 求 職 履 歷 我 的 個 ⼈人 化 網 站 銘 傳 ⼤大 學 - 資 通 訊 軟 體 創 新 ⼈人 才 推 升 推 廣 計 畫 短 期 課 程 痞客邦 PIXNET - W i n Yu Platform Software Engineer
  2. 2. 余 晟 麟 Win Yu 關 於 我 Platform Software Engineer kylinyu.win ♘ 經 歷 痞客邦 PIXNET IBM Taiwan Engineer Intern ♘ 學 歷 國立臺灣師範⼤大學 國立⾼高雄科技應⽤用⼤大學 M.S. in Computer Science. B.S. in Computer Science.
  3. 3. What’s Hugo?
  4. 4. • 靜態網站產⽣生器 • 利利⽤用 markdown 語法規範 以及 Hugo 產⽣生器規則, 搭配 主題樣板 來來⽣生成 HTML 靜態網⾴頁 • 靜態網⾴頁 (靜態與動態是相對的) • 只要把 HTML 網⾴頁放上網⾴頁伺服器就可以瀏覽了了 • ⽣生成速度快,瀏覽速度也快 • 不⽀支援資料庫
  5. 5. • 核⼼心價值 • 內容 跟 主題樣板 分離。可以專注於內容的撰寫,若若要調整 網站樣式也能輕鬆做到 • ⽤用 Go 語⾔言實踐 • 從 markdown ⽣生成 HTML 速度很快 • 部署容易易 • 不⽤用處理理資料庫,也是靜態網⾴頁的優點。只要有網⾴頁伺服 器就可以上線
  6. 6. • Hugo 可以做什什麼? • 個⼈人履歷網站 • Blog 網站 • 簡單的公司形象網站 • 還有其他相同的⼯工具嗎? • Jekyll (ruby) • Hexo (node.js)
  7. 7. L e t ’s I n s t a l l H u g o
  8. 8. • 1. 安裝 Homebrew • 2. 檢查 Homebrew 的安裝結果 • 3. 利利⽤用 Homebrew 來來裝 Hugo • 4. 檢查 Hugo 的安裝結果 - 安裝 CLI ⼯工具 (macOS) r u b y - e " $ ( c u r l - f s S L h t t p s : / / r a w. g i t h u b u s e rc o n t e n t . c o m / H o m e b re w / i n s t a l l / m a s t e r / i n s t a l l ) " b re w i n s t a l l h u g o w h i c h b re w / u s r / l o c a l / b i n / b re w w h i c h h u g o / u s r / l o c a l / b i n / h u g o
  9. 9. - 安裝 (windows) 教學: https://www.youtube.com/watch?v=G7umPCU-8xc • 1. 在瀏覽器中打開 https://github.com/spf13/hugo/releases • 2. 查詢最新的 windows 版本 hugo_0.13.1_windows_64bit.zip • 3. 下載 ZIP ⽂文件,解壓縮存到 D:Hugobin ⽂文件夾中 • 4. 新增 Hugo 到你的環境變數中 D:Hugobin
  10. 10. • 使⽤用 Hugo 的 CLI (command line interface) 來來幫助我 們做網⾴頁的建立以及配置,都在終端機 Terminal 裡執 ⾏行行。 • 先來來熱⾝身⼀一下,檢查⾃自⼰己安裝的 hugo 版本 ... - 使⽤用⽅方法 $ h u g o v e r s i o n
  11. 11. S t a r t t h e j o u r n e y
  12. 12. • 建立⼀一個叫做 demo 的專案 • 進入 demo ⽬目錄 並 檢查⽣生成檔案 建立專案 $ h u g o n e w s i t e d e m o $ c d d e m o & & l s
  13. 13. 建立專案 - ⽬目錄結構
  14. 14. 建立專案 • archetypes: 設定⾃自動產⽣生⽂文章的範本設定 • config.toml⭑: 整個 hugo 網站的設定檔 • content⭑: 內容⽂文章 • data: 放置參參數的位置 • layouts: 放置網⾴頁排版的檔案 • static⭑: 放置 css/js/img/media 等多媒體檔案。最後 ⽣生成網站時,會直接複製到 public 資料夾下 • themes: 網站外觀主題的擺放位置 - ⽬目錄結構
  15. 15. 下載主題 h t t p s : / / g o o . g l / L x r C 7 j本 ⽇日 練 習 樣 板 主 題
  16. 16. $ git clone https://github.com/g1eny0ung/hugo-theme-dream.git themes/hugo-theme-dream 下載主題 • 下載 dream 主題到 themes ⽬目錄底下
  17. 17. 利利⽤用主題的範例例快速建站 • 複製主題內的範例例檔案到你的專案⽬目錄內 • config.toml 使⽤用範例例的設定檔做後續修改 • archetypes 提供我們新增⽂文章的範本可以進⾏行行主題套⽤用 • content 先把主題作者的範例例⽂文章拿來來預覽看成果 $ c p - r t h e m e s / h u g o - t h e m e - d re a m / a rc h e t y p e s / * a rc h e t y p e s $ c p - r t h e m e s / h u g o - t h e m e - d re a m / e x a m p l e S i t e / * . /
  18. 18. 透過虛擬網⾴頁伺服器預覽 $ h u g o s e r v e r - D • hugo server 會把專案下的設定透過你的本機 電腦跑起虛擬網⾴頁伺服器進⾏行行預覽 • -D : 代表在內容⽂文章內標⽰示 draft = true 的草 稿⽂文章,也要進⾏行行建置 • 同時具有 LiveReload 的功能,修改內容就會 ⾃自動重新整理理網⾴頁⾴頁⾯面 http://localhost:1313
  19. 19. 現 在 你 擁 有 ⼀一 個 漂 亮 的 網 站 了了 🎉 🎉 🎉
  20. 20. 修改 config.toml 對應參參數 • config.toml 是每個 Hugo 網站的主要設定檔案 • 通常會搭配主題的參參數設定有所不同 • 填寫資料後可以把 # 註解拿掉就會⽣生效 • 記得看著說明⽂文件做對應調整 • https://themes.gohugo.io/hugo-theme-dream
  21. 21. 修改 i18n 調整中⽂文為繁體 • config.toml 中的 defaultContentLanguage 設 定改成 zh • 其中該主題有⽀支援不同語系的顯⽰示 • 我們先來來將簡體改為繁體吧 修 改 這 個 檔 案 t h e m e s / h u g o - t h e m e - d re a m / i 1 8 n / z h . t o m l
  22. 22. Static 靜態資源檔案處理理 上⼀一階段的 config 中有⼀一個 avatar 的參參數設定 接著我們要來來更更新頭像,透過 靜態資源 檔案⽬目錄處理理 demo/static/* 網站⽣生成時 copy demo/public/* 1. 在 static 底下新增⽬目錄 img 並把圖片放入 $ m k d i r s t a t i c / i m g $ c p ~ / D e s k t o p / a v a t a r. j p g . / s t a t i c / i m g 2. 在 config.toml 裡的 avatar 填上圖片位置 a v a t a r = " / i m g / a v a t a r. j p g "
  23. 23. Static 靜態資源檔案處理理 $ h u g o 在最後執⾏行行 hugo 指令⽣生成網站的時候,會做這件事 (這裏可以先不⽤用執⾏行行該指令)
  24. 24. Static 靜態資源檔案處理理 換完⼤大頭照了了
  25. 25. 建立個⼈人資料⾴頁⾯面 主題左上⾓角有個⼈人資訊⾴頁⾯面,接下來來我們要來來設定⾃自我資料 以及聯聯絡圖⽰示
  26. 26. 建立個⼈人資料⾴頁⾯面 - 1. 圖⽰示設定 將 config.toml 中的帳號 填寫⼀一番,就會出現了了 就跟⼀一塊蛋糕⼀一樣 🍰 感謝主題作者都幫我們做好了了 如果你想要新增其他連結,就要進 去看 themes 他寫在哪裡⾃自⾏行行添加 (( 今天還有時間再補充
  27. 27. 建立個⼈人資料⾴頁⾯面 - 2. 簡介描述 h t t p s : / / t h e m e s . g o h u g o . i o / h u g o - t h e m e - d re a m 根據主題設定的說明,調整在 data ⽬目錄底下的 about.toml 設定檔 這裡使⽤用 string 陣列列的⽅方式設 定參參數,搭配 <p> 標籤呈現
  28. 28. 建立個⼈人資料⾴頁⾯面 - 2. 簡介描述
  29. 29. RECAP 使⽤用 Hugo ⼯工具建立專案 套⽤用佈景主題建立網站 了了解靜態資源關係 利利⽤用本機虛擬 Server 預覽修改 了了解如何修改基本設定檔案 https://goo.gl/rsQ52N
  30. 30. Write something with Markdown
  31. 31. 建立⽂文章⾴頁⾯面 $ h u g o n e w p o s t / m a r k d o w n . m d • 在 content/post 資料夾底下,根據 archetypes 裡⾯面的範例例檔案, 建立⼀一個空殼⽂文章檔案,名字叫做 markdown.md 修改該篇⽂文章基本設定參參數 draft 狀狀態若若要發佈了了就改成 false <!—more—> 在這之前的段落落,就是⽂文章列列表⾴頁 會顯⽰示的 Summary 區塊
  32. 32. • 核⼼心精神 • 實現 『易易讀易易寫』 • 作⽤用說明 • ⽤用簡單的⽂文字標記,轉換成有效的 HTML ⽂文件 • 副檔名 • .md • .markdown • ⼩小試⾝身⼿手 • https://hackmd.io
  33. 33. • 標題 # this is a huge header # ## this is a smaller header ## ### this is even smaller ### #### more small #### ##### even smaller ##### ###### smallest still: `<h6>` header 語法轉換
  34. 34. • 有序/無序清單 語法轉換 * an asterisk starts an unordered list * and this is another item in the list + or you can also use the + character - or the - character To start an ordered list, write this: 1. this starts a list *with* numbers + this will show as number "2" * this will show as number "3." 9. any number, +, -, or * will keep the list going. * just indent by 4 spaces (or tab) to make a sub-list 1. keep indenting for more sub lists * here i'm back to the second level 無序清單 可以⽤用 * or + or - 依序表⽰示 有序清單 開頭使⽤用數字即可,錯誤則⾃自⾏行行校正
  35. 35. • 圖片 語法轉換 ![alternate text](https://sourceforge.net/images/icon_linux.gif) ![PIXNET LOGO](https://upload.wikimedia.org/wikipedia/zh/5/57/ Pixnet_logo.png)
  36. 36. • 超連結 語法轉換 <http://someurl> <somebbob@example.com> [連結名稱](http://someurl) You can also put the [link URL][1] below the current paragraph like [this][2]. [1]: http://url [2]: http://another.url "A funky title"
  37. 37. RECAP 使⽤用 Hugo 建立新⽂文章 了了解如何修改⽂文章狀狀態 使⽤用 Markdown 撰寫⽂文章 看更更多 Markdown 設定 https://sourceforge.net/p/hugo-generator/wiki/markdown_syntax/
  38. 38. Try to add custom module - highlight.js
  39. 39. ⾝身為 CS 的⼀一員,難免要放些程式碼在⽂文章中 利利⽤用 highlight.js 來來做語法⾼高亮吧!
  40. 40. • 利利⽤用 markdown 撰寫程式碼範本放在⽂文章內 • ⽤用 ``` 符號來來裝納程式碼。 • 第⼀一個 ``` 後⾯面接程式語⾔言 (宣告的意思) ⽂文章內容 網⾴頁呈現
  41. 41. • 挑選⾃自⼰己喜歡的 css 樣式 • • 以 dracula 樣式為例例 • 載入 highlight.js 函式庫 • • 設定 js trigger 程式碼 https://highlightjs.org/download/ https://github.com/isagalaev/highlight.js/tree/master/src/styles highlight.js <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> 直接把這段加入到⽂文章內試試看 ❝ Markdown 除了了會被解譯成 HTML 之外,直接在內撰寫 HTML 語法也是可以的喔!
  42. 42. After highlight.js
  43. 43. 雖 然 效 果 符 合 預 期 , 但 是 如 果 多 篇 ⽂文 章 都 要 使 ⽤用 h i g h l i g h t . j s 那 顯 然 這 樣 的 做 法 並 不 適 合
  44. 44. 接 著 , 試 著 把 h i g h l i g h t . j s 模 組 化 , 改 成 設 定 的 ⽅方 式 進 ⾏行行
  45. 45. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> ⽬目標 我們的⽬目標是,把上述這段程式碼根據⽂文章內的參參數設定,決定 要不要載入 然⽽而在網⾴頁中的良好實踐, CSS 資源必須在 <head> 標籤內載 入, JS 資源於最後載入。故我們準備將程式碼放到對應的位置去
  46. 46. 查看主題內的程式架構 找到設定 css 的位置: hugo-theme-dream/layouts/partials/head.html 找到設定 js 的位置:hugo-theme-dream/layouts/partials/footer.html Hint: css: 在網⾴頁的開頭,也就是 <head> 標籤的位置 js: 通常都在網⾴頁的末端,找最後⼀一個載入的 partial
  47. 47. 使⽤用 Hugo 語法增添判斷式 在 HTML 中撰寫 Hugo 語法,使⽤用兩兩個花括弧來來描述 https://gohugo.io/templates/introduction/ {{ if isset .Params "title" }} <h4>{{ .Params "title" }}</h4> {{ end }} https://gohugo.io/functions/param/ If 判斷式透過 Isset 檢查是否含有 title 這個變數,有就印出 h4 tag 的 內容 .Params 可以取得⾴頁⾯面內或者整個網 站 Site 的變數內容 拋磚引⽟玉,學更更多請看⽂文件
  48. 48. 把 highlight.js 函式庫放到對應的位置 {{ if isset .Params "highlight" }} <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/ libs/highlight.js/9.12.0/styles/dracula.min.css"> {{ end }} hugo-theme-dream/layouts/partials/head.html hugo-theme-dream/layouts/partials/footer.html {{ if isset .Params "highlight" }} <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/ highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> {{ end }} CSS JS 檢查⾴頁⾯面內是否含有 highlight 的參參數設定, 有的話就會輸出 highlight.js 到⾴頁⾯面上了了
  49. 49. 在你需要的⽂文章設定 highlight 參參數 欲顯⽰示的⽂文章設定中加入 highlight 參參數 設定,該篇⽂文章就會⽀支援 highlight.js 了了
  50. 50. 了了解如何添加⾃自訂義的修改到主題中 使⽤用基礎的 Hugo Template 語法 RECAP
  51. 51. Shortcodes -
  52. 52. • Markdown 還是有不⾜足的地⽅方,通常還是常常有需要⾃自 ⾏行行撰寫 HTML 到⽂文章中的情境 • Hugo 提供 Shortcodes 讓我們可以對於特殊情境可以 快速編寫內容 • 以下我們介紹官⽅方 Hugo 提供的 Shortcodes。當然你 也可以⾃自定義 Shortcodes 在你的主題中喔 Shortcodes https://gohugo.io/content-management/shortcodes/
  53. 53. • Gist • Instagram • Speakerdeck • Tweet • Youtube Shortcodes $ h u g o n e w p o s t / s h o r t c o d e s . m d 再 練 習 ⼀一 下 產 ⽣生 ⽂文 章 的 指 令 吧 , 我 們 把 s h o r t c o d e s 的 練 習 寫 在 這 篇 ⽂文 章 內 • {{< gist spf13 7896402 >}} • {{< instagram BWNjjyYFxVx >}} • {{< speakerdeck 4e8126e72d853c0060001f97 >}} • {{< tweet 877500564405444608 >}} • {{< youtube -gou12pMmt4 >}}
  54. 54. 適時的使⽤用 shortcodes 達到 markdown 的易易讀易易寫的精神 RECAP
  55. 55. • 檢查要發布的⽂文章狀狀態的 draft 是否設 定為 false • 在專案⽬目錄底下執⾏行行 hugo 指令⽣生成所 有網⾴頁 • ⽣生成後會產⽣生⼀一個 public ⽬目錄,底下就 是準備要部署到網⾴頁伺服器的內容了了 發佈 Publish
  56. 56. 把履歷寄過來來吧! 📧 techjob@pixnet.tw
  57. 57. Thank You. See you next week. kylinyu.win
  58. 58. https://disqus.com/ https://github.com/ I Love Homework.😈 來來開個帳號吧 ! https://themes.gohugo.io/ 選⼀一個⾃自⼰己喜歡的佈景主題改看看

×