# Requirement
* 免費。
* 使用 Markdown 編寫。
* 可以作為長期個人技術 wiki。
* 工具知名度越高越好。

因此最終選擇 https://pages.github.com/

# Demo
可以參考這支影片，他展示的相當清楚。

<iframe width="560" height="315" src="https://www.youtube.com/embed/g6AJ9qPPoyc?si=LaVthAjvWIQGivUP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# Jekyll Installation

https://jekyllrb.com/docs/installation/macos/

brew install chruby ruby-install
ruby-install ruby 3.4.1
echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.4.1" >> ~/.zshrc # run 'chruby' to see actual version
gem install jekyll

安裝舊版本的 Jekyll。

gem uninstall jekyll
gem install jekyll -v 3.10.0

# Check Environment

gem -v
ruby -v
jekyll -v

>[!Warning] 建議使用 Jekyll 3.x 版本，因為很多 Theme 不支援 Jekyll 4.x


# Pick up the Theme

https://jekyll-themes.com/

我是選擇一個簡單乾淨的主題，也有其他主題可以選擇，可以自行挑選。
https://jekyll-themes.com/poole/hyde

# Test the Theme
建議先下載測試好不好使用，有沒有符合自己的需求。

git clone https://github.com/poole/hyde.git


Local 端執行測試，通常會要處理很多奇怪的錯誤。
主要改了這三個東西：
* 新增 `plugins: [jekyll-paginate]`。
* 註解掉 `Permalinks`。
* 修改 markdown and highlighter。

    markdown:         kramdown
    highlighter:      rouge


開始 Local 執行。

jekyll serve

執行成功長這樣。

>[!Tip] http://localhost:4000


就可以開始玩這個 Theme了。

# Fork the Repo

如果有確定要使用這個 Theme，可以先下載修改，最後上傳變成自己的部落格。


記得稍微修改一下 Setting。

# Hydeout Theme Adjustment

https://github.com/fongandrew/hydeout

## 檔案架構


## Sidebar

### 網站名稱
> _config.yml

# Setup
title:            "SR Huang"
tagline:          'srhuang'
description:      '學徒筆記'


### sidebar elements
* 單純的 markdown file
> ./about.md, ./Projects.md
* Category
> ./category/Blog.md
* 外部連結
> ./_includes/custom-nav-links.html

    <a href="https://hackmd.io/@srhuang" target="_blank">Hackmd</a>

### sidebar icon links
> _includes/custom-icon-links.html

<!-- Optional additional links to insert for icons links -->
<a id="github-link"
       class="icon" title="Github Project" aria-label="Github Project"
       href="https://github.com/srhuang" target="_blank">
      {% include svg/github.svg %}
</a>
<a id="linkedin-link"
       class="icon" title="linkedin" aria-label="LinkedIn"
       href="https://www.linkedin.com/in/shin-rong-huang-30319616b/" target="_blank">
      {% include svg/linkedin.svg %}
</a>

### sidebar 寬度
> _sass/hydeout/_variables.scss

$sidebar-width: 20rem !default;

### sidebar 順序
> _includes/sidebar-nav-links.html

  {% include category-links.html %}
  {% include custom-nav-links.html %}
  {% include page-links.html %}

### sidebar sticky
> _sass/hydeout/_variables.scss

$sidebar-sticky: false !default;


$sidebar-sticky: true !default;


### sidebar reverse
> _sass/hydeout/_variables.scss

$layout-reverse: false !default;


$layout-reverse: true !default;


## Article

未完成的文章可以放在
> _drafts/

完成並發布的文章可以放在
> _posts/

命名規則
> YYYY-MM-DD-N
> e.g. _posts/2025-06-06-001.md

---
layout: post
comments: true
mathjax: true
title: "First Test Blog"
categories:
  - Blog
tags:
---

### 新增圖片

圖片位置
> assets/img/
> e.g. assets/img/tst.png

文章內新增圖片

![image](/assets/img/tst.png)

### 文章階層

>[!Tip] 建議從第二階開始，因為第一階會跟 title 一樣大。

---
layout: page
title: About Me
sidebar_link: true
---

## Work Experience

### Mediatek Inc. Taipei,Taiwan (Jan 2020 - March 2024)