Github Pages Note
在使用 jekyll 做 Github Pages 的過程中用到的各種東西 / 遇到的問題。
Outline
挑 jekyll themes
可以到這裡找主題，蠻多免費又好看的主題可以挑：JEKYLL THEMES
接著就照網路上大部分的 tutorial，fork 它、把 repository name 改成 username.github.io 就可以了，把 username 換成自己的 Github username。
_config.yml 的 url 也要改成 https://username.github.io
在網頁中使用 $LaTeX$
在要使用 $LaTeX$ 的 html 的 <head></head> 中加入下列程式碼。在大部分 jekyll theme 中，可以找到一個叫做 header.html 的檔案，即為所有頁面 head 中的內容。因此我們在 header.html 裡面加上：
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
接著就可以用一般的方式使用了，例如寫 $x^2 + y^2 = z^2$ 會變成 $x^2 + y^2 = z^2$；寫 $$f(x) = x^2$$ 會變成：
$$f(x) = x^2$$
值得注意的是，如果在 markdown 中使用的話，$x$ 與 $$x$$ 皆會被視為單行，且如果內容包括含有其他意義的字元（例如 |something|+|another thing| 可能會被視為表格），輸出可能會跟預期不同。這時候可以用 <p></p> 之類的 html tag 把它包起來就不會出問題了，像是：
<p>$$f(x) = x^2$$</p>
Code syntax highlighter
這邊是使用 rouge 作為 Markdown 的 Code syntax highlighter，首先在 _config.yml 中加入下列設定：
markdown: kramdown
highlighter: rouge
接著在終端機輸入：
rougify style theme > assets/css/syntax.css
將上述的 theme 替換成喜歡的主題名稱，主題在這個網頁可以預覽。
最後在 <head></head>（header.html）中加入：
<link href="/assets/css/syntax.css" rel="stylesheet" >
至此就設定完成了。在使用的時候，下列兩種用法都可以：
```cpp
#include <iostream>
using namespace std;
int main(){
return 0;
}
```
{% highlight cpp %}
#include <iostream>
using namespace std;
int main(){
return 0;
}
{% endhighlight %}
使用 disqus 做留言區
首先到 disqus 註冊並登入，接著點擊 “Get started” 並選擇 “I want to install Disqus on my site”。照著它要求的步驟做就好了，這邊只提及要注意的地方：
1. 使用 jekyll 的話，要注意設定中要將評論開啟，並對 disqus 做設定。即 disqus 中提到的：
---
layout: default
comments: true
# other options
---
可能不一定長這樣。像我這邊是這樣設定的：
comments:
engine: "disqus"
總之根據原本的檔案設定好就好。如果是 fork 下來的 theme，應該都有清楚的指示。
2. Disqus 給的 Universal Embed Code 中有兩行需要自己更改的部分：
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
將這兩行更改為如下即可：
this.page.url = '<%= page.permalink %>';
this.page.identifier = '<%= page.path %>';
3. 如果希望可以 display comment count，依照指示將
<script id="dsq-count-scr" src="//shortname.disqus.com/count.js" async></script>
加到 body 中（footer.html）。接著將 #disqus_thread 加到你希望它顯示的地方。
要注意部分是在 localhost 看的時候似乎不能正常顯示，以及放上去的時候要等好一陣子才會跑出來。
如果一直沒跑出來，先不要跟我一樣以為自己寫錯，很可能只要
就會成功了。