心得

部落格緣起

部落格緣起

Photo by Anete Lūsiņa on Unsplash

Github 免費架站術!輕鬆打造個人品牌

同場加映: 職場寫作課:從個人品牌到自媒體

部落格緣起:

身為一個工程師,當然要用工程師的方式來展示自己啦

一開始只是看到這句話,加上可以用Github從頭打造自己專屬的網站,讓我在募資時就加入書籤,直接腦波很弱的刷卡付款了~

當時只是想說身為一個(廣義的,非軟體專業)工程師,有個Github 的個人網站,聽起來就很潮。

實作心得:

影片總時長約四小時多一點,依照過往習慣,我先兩倍速看完影片好有個大步驟與大方向的整體概念。第一次看完的心得是老師講解的蠻詳細的,如果依照影片只是一步一步完成,要用Github建立起專屬個人網站對有點程式基礎的人不會太困難。

過程中老師也有提到對Google Analytics 以及 Google Search的教學。讓建立好的網站不會是一座孤島,可以真正連上網路(Google)世界,並藉以分析自己網站的流量資料。整體跟著影片步驟建立網站到可以外連的時間大約花個五到六小時即可完成。比我預期所需要花的時間少了很多。

我個人在很久以前就有建立自己部落格的想法,但因為種種因素(絕對不是因為懶),所以除了去年參加鋒哥ETF學習營建立了edublogs用以交作業/任務外,始終沒有建立專屬於自己的網站,學習營結束後也就晾在那邊。

雖然常見的使用Blogger, Medium之類的服務建立起基本部落格難度不高,如果單純只是想要寫文章,這些免費服務也是相當好的選擇。不太需要注意額外的設定或修改html/css。那上這門課用Github架站的好處是什麼呢?主要我認為有以下幾個:

  • 最大的優勢是建立起基本的網站設計概念。加上老師上課時很詳細清楚的說明每個檔案的用途,讓原本對網站設計沒什麼概念的我也可以有初步了解。
  • 第二是我可以藉此機會學習Markdown 語法。之前常常聽到Markdown的介紹,剛好藉由建立自己網站的過程學習Markdown 語法。
  • 第三大好處對我個人而言是因為Github的特性,所有文章我自己的每台電腦都有原始檔,這對原始檔案收集控的我很有掌控感與安全感。也趕上了最近去中心化的熱潮。另外因為使用Github,也可以藉此記錄每篇文章的修改過程,留下自己思考的歷程。
  • 因為預購了職場寫作課需要先準備好自己的網站,所以上完課建立好的網站直接在職場寫作課派上用場。

同場加映:

非常推薦鋒哥的職場寫作課:從個人品牌到自媒體,鋒哥的課程都有一定水準,相信上完課後都會有很多收穫。在完成自己的專屬網站後,進一步藉此發展出個人品牌/自媒體,讓自己有機會在工作上有更好的能見度。

實作筆記:

網站設定過程中,在Hugo的主題裡面,設定散落在各個 index或config檔裡面,以下是針對Liva Hugo這個主題內,建立網站的過程中重要設定檔案的用途記下,以供之後修改時的快速索引。

config.toml

這是整個Hugo 主題的基本設定檔,關於網站名稱、作者、social media 連結、評論功能、程式碼的Markdown效果…等的設定基本上都在這邊

content/about/_index.md

About Me的設定檔

data/gallery.yml

決定About Me 內Gallery要放那些圖片以及次序

themes/liva-hugo/layout/index.html

決定首頁layout/側邊欄 (About Me 位置、近期文章、文章是否顯示圖片、時間格式…等)

themes/liva-hugo/_default/list.html

決定分類頁面側邊欄位置(因為Liva Hugo 主題把首頁與分類頁面分寫在兩個html檔案內)

themes/liva-hugo/_default/post.html

決定分類頁面的文章顯示方式

themes/liva-hugo/layout/partials/sidebar.html

決定側邊欄(廣告業面)的顯示

themes/liva-hugo/layout/about/list.html

About Me以及時間軸經歷的設定頁面

themes/liva-hugo/assets/scss/timeline.scss

決定時間軸顯示樣式的檔案

themes/liva-hugo/assets/scss/style.scss

需要將timeline.scss檔案import 進去

themes/liva-hugo/assets/scss/_variables.scss

主題的預設顏色、字型設定檔案

themes/liva-hugo/layout/_default/single.html

呈現文章頁面的設定檔案

themes/liva-hugo/assets/scss/templates/main.scss

控制文章Markdown渲染效果的css,如字型、無序序列符號

comments powered by Disqus