Requirement

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

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

Demo

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

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

建議使用 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

執行成功長這樣。

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)

文章階層

建議從第二階開始，因為第一階會跟 title 一樣大。

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

## Work Experience

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