使用Hugo架設個人Blog
前言 升上大學之後，開始覺得想要紀錄一下自己學習的軌跡，另一方面也可以將習得的知識寫成文章，日後便可以自己回頭複習檢視， 甚至讓其他和我一樣遇到相同瓶頸的人得到解決方法。再者，撰寫自己的Blog大概也算是某種品牌經營吧？ 諸如此類，現在這個網站才會誕生啦！ Framework選擇 到2024年3月為止，比較主流的靜態網頁生成框架有： Jekyll Hexo Hugo Pelican 我最後選擇使用Hugo來架設這個Blog，主要是它在Github上面的Stars蠻多的，而且很多人都因它在速度上的優勢推薦它。 Logo of Hugo Theme選擇 我選擇使用PaperMod這個Theme，我個人偏好這種簡潔的版面設計， 而且調整起來相當簡單，不需要花費太多心力就能了解它提供的Features。 設定Markup Parser Hugo預設使用Goldmark這個Parser來將以Markdown寫成的文章在生成網頁時轉換為適當的html。 其中我想修改的是這一項： # config/_default/markup.yaml goldmark: renderer: unsafe: true 當unsafe選項改為true時，markdown中的html標記會直接被保留，才能使用像是<mark>之類的html tag。 $\LaTeX$ 作為一個devblog，需要用到數學式子的日子肯定不會少，就算沒有用到也沒關係，我仍然會加入$\LaTeX$的功能。 這邊我使用$\KaTeX$這個Library來達成，將一些script放在我們的html head中，它會自動尋找內文中所有使用delimiter的部分，並將其替換成適當的元素。 KaTeX使用的js function可以自行傳入想要使用的delimiter，這樣我們就可以根據自己的偏好進行設定了。 <!-- layouts/partials/entend_head.html --> {{ if or .Params.math .Site.Params.math }} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script> <script> document.addEventListener("DOMContentLoaded", function() { renderMathInElement(document.body, { // customised options // • auto-render specific keys, e....