使用Jekyll打造個人筆記

安裝本次使用的筆記套件

• 安裝時輸入 $ gem install jekyll bunlder
• 檢查是否正確安裝 $ jekyll -v

Warning: $ bundle add webrick( 缺少部分gem，webrick 不再是 Ruby 3.0 中的捆綁 gem，要額外裝)

• 接下來按照步驟建立Jekyll專案

開始第一頁筆記

• 在_posts新增.md檔(‘YYYY-MM-DD-title.md’)，或是選擇jekyll-compose來快速新增。
• 要把專案run起來，直接輸入$ bundle exec jekyll s

在GitHub Pages部屬網站。

• 到Settings → 左邊的Code and automation點選Pages → Build and deployment (改成GitHub Actions)，這樣每次提交時，才會根據指定的workflow進行部屬。

• 等待CICD完成後，就可以進行瀏覽

更改為自訂網域

• 在Custom domain輸入自己的domain name

• 這邊使用Cloundflare來管理網站，到DNS紀錄新增，因為我們要指向一個名稱而不是IP address，這邊類型設定為CNAME

• 接著輸入domain到bowser，查看是否正確導向

補充

markdown VS Code套件

• Preview功能，專寫時隨時確認版面。

在markdown上引用html

• 在轉換之前要先認識一下Kramdown，他是Jekyll預設的Markdown轉換器，有了他你可以客製化一些template。

• 這邊有個小需求，平常打markdown或hackMD時都會需要一些alert block來描述重點，先在root的_includes資料夾底下新增example.html。

<div markdown="span" class="alert alert-info" role="alert"><!-- markdown="span" 將內容解析成span tag -->
<i class="fa fa-info-circle"></i> 
<b>Note:</b> 
</div>

在markdown上測試

{% include example.html content="訊息1" %}

Note: 訊息1