Github Page製作
使用github提供的github page，結合jekyll簡單製作出具個人風格的網頁。在這個專案中，主要熟悉jekyll的工作模式，可以設定好固定的版型後，直接套用在多個頁面上，也能有類似物件導向的class功能，能夠直接繼承版型，在該版型基礎上增減東西，除此之外，也讓我練習到版面設計及配色，以及網頁動畫等功能
專案目的
一直以來，都很希望能做一個屬於自己的網站，把自己的生活點滴記錄下來，每天發生了那麼多有趣的事情，沒有記錄下來的話，就會默默的消退在腦海中 曾經看過一篇文章，指出了很多寫部落格的好處，我自己也覺得寫部落格一定是有益無害的，但困難的就是，寫文章是需要耗費心力跟時間的，就我自己來說，我想把我研究資工領域的東西都寫成文章，確實曾經寫成文章的概念在我之後忘記時，可以很快的把想法撿回來，寫成文章時，也是再次檢驗自己有沒有真的了解整個概念，因為要用自己的想法解釋比單純的理解還要難更多，所以真的需要很大的動力去做。
另外一個目的是，也能藉這個機會完成一個網站作品，我一直以來都對寫網站蠻有興趣，大學時期也斷斷續續的學了好幾次，對我而言，我覺得寫網站會牽扯到很多不同的技術，包括前端、後端、資料庫等等，每個部分又有很多不同的語言或工具包來實現，所以我認為邊做邊學才是最適合的
github Page與Jekyll
如果你有一個github帳號，你就能擁有一個github提供的個人網頁，你只要在github上創一個你自己帳號名稱的repository，這個就是屬於你自己的github網頁了!其實整個過程大約十分鐘以內可以完成，也有很多現成的模板可以使用，Jekyll網頁上有詳細過程
使用Jekyll的好處是，我們能利用markdown的語法來撰寫部落格文章，還有能讓整個架構更有組織，接下來會稍微簡單介紹，這些東西在Jekyll網站中都有完整的tutorial能學習！
/_include/
在這個資料夾中，我們能寫一些會重複使用的架構，或者說你想分離出來的部分，例如：我們網站的導覽列(navbar)，如果把它看作一個元件比較直觀，而且當我們到時候想直接在某個頁面插入時，也能直接套用，另外一個例子是，每當我在網頁中插入圖片時，我希望都能套用相同的格式設定，而這件事情沒辦法只靠class標籤完成，所以設定在/_include/中，到時候只要傳入該圖片的URL即可。
/_layout/
這個資料夾顧名思義，是用來設定各個版面的配置，例如：我的每篇文章都想要套用一樣的配置，唯一的差別只有文章的內容，這時候我只需要在/_layout/中設定好配置，接下來Jekyll就會自動幫我們將每篇文章套用到設定好的配置中了
/_posts/
這個資料夾是Jekyll一開始內建的，也就是我們把用markdown語法寫的文章放在這裡，到時候Jekyll會自動幫我們轉換成HTML的格式，除了文章以外，假設今天我們也想要用markdown來寫某個東西，以我的部落格為例，我想要一個資料夾是放我的作品集的，並且希望能跟posts分開來放，這個時候只需要在_config中設定好自己的collection也能做到
/_data/
我們如果有一些資料，通常是細碎的資料，像是圖片的說明、URL等等，如果覺得摻雜在文章中太亂，想統一起來整理的話可以放在/_data/資料夾中，在其他的地方也能直接取用，並能用迴圈的方式取得，所以很適合用在list型態的資料
大概比較重要的是這些，詳細的用法在網站中都有舉例說明，相當清楚。所以使用Jekyll，我們能用簡潔、有組織的方法建構部落格
插入數學式
在學術的文章中，常常需要用到一些數學表達式，一直以來都是頭痛的問題
一開始我是使用LaTeX語法產生出SVG檔案後再插入到文章的小工具
但這樣做實在太麻煩
最近在stackoverflow發現到可以使用JavaScript的插件MathJAX來幫忙
能夠直接在Markdown文件中插入LaTeX語法
需要用\$\${equation}\$\$兩個金錢符號包圍著LaTeX語法
ps: 你可以能會遇到在一些瀏覽器上會說這是不安全的內容，無法執行MathJAX插件，你需要檢查你的mathJAX是不是最新版本的，還有CDN是否還在服役中，我當初的問題就是使用的CDN已經退役了，可以參考這裡
RWD網頁
RWD是Responsitive Website Design的簡稱，顧名思義就是能在不同的裝置上都能夠顯示正常的網頁
在這之前，我對RWD的了解停留在使用Bootstrap上，我以為只要用Bootstrap的grid就能讓網頁能夠自適在各裝置
但現實遇到的狀況，例如我的profile頁面分為兩個部分，左邊和右邊，左邊放一張圖片，右邊放一段說明文字
問題是留白的部分，在電腦螢幕上，留白的空間要大，但在手機螢幕本身就小的情況下，留白的空間要很小
這樣的情況是光用Bootstrap無法解決的，而我們在CSS設定檔中，可以設定在不同的解析度下，套用不同的CSS語法，便能解決這樣的問題
還有，在CSS中有一個每次都會遇到的問題，就是如何把div水平垂直置中，這個網站中建議了很多方法
我最後採用了transform: translateY(-50%)這個方法，詳細可以參考網站