# 跟同學合作網頁架設
本來預計考完APCS跟期末考就能把自己的個人網站收掉，但半路突然殺出一個委託，來自曾經陪我征戰NPSC(雖然我們大燒雞)的好友Potato，請我來協助他個人網站的架設，畢竟他好像不是很會寫前端，所以找我幫忙

## Git遠端操控 - pull
合作企劃的第一步就是要拿到他的code，所以我就去他的Github把網頁的repo給pull下來

git remote add origin https://github.com/killin0415/killin0415.github.io.git
git pull origin gh-pages

最好笑的是我一開始把origin打成orgin，所以怎麼樣都pull不下來，是後來用git remote -v才發現的，浪費了快一個小時

## Ruby on rails環境架設
後來pull下來才發現他的打法跟我也有很大的出入，他是用有點像HTML + MarkDown + 一堆其他東西的打法，似乎是一個叫Skinny Bones的模板，所以不能用熟悉的Flask或Live Server執行，要用Ruby on rails，所以我只好轉向研究Ruby...
幸好不算太難，主要就幾個步驟
1. 去Ruby官網下載
2. 打開Command Prompt with Ruby並cd到該專案的資料夾
3. 因為資料夾裡已經有.jekyll-cache了，所以不用mkdir可直接執行

gem install bundler
bundle exec jekyll build
bundle exec jekyll serve

這樣就能順利打開網頁，好欸

## 解決Sass問題
Potato他的網站主要問題在側邊navbar，有時候圖片太扁

視窗寬度變小又是另一個方向的扁


我就是來幫他解決這個問題的，幸好navbar甚麼的我最熟了(o゜▽゜)o☆

nav:not(#masthead + nav) { 
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
}
  
#masthead + nav ul li {
    height: clamp(80px, 14vw, 150px);
    min-height: 80px;
    padding: 0;
    margin: 0;

    img {
        height: clamp(80px, 14vw, 150px);
        width: clamp(80px, 14vw, 150px);
        margin: 0;
    }
  
    .title {
        margin-left: clamp(90px, 14.5vw, 170px);
        font-size: clamp(1.5rem, 2.2vw,2rem);
    }
  
    p {
        margin-left: clamp(90px, 14.5vw, 170px);
      	font-size: clamp(0.8rem, 1.8vw ,1.5rem);
  	}
}
  
  
#masthead + nav ul {
  padding-inline-start: 0;
} 

稍微解釋一下上面那坨sass(跟css打法差不多)，他模板有個問題，就是有兩個nav，而且class也一樣，所以selector會寫複雜一點，#masthead是header的id，側邊nav剛好是header的最近同輩，所以用 "+" selector，並用:not排除掉nav初始設定，然後側邊nav各元素的大小用clamp控制，使其變得responsive。clamp的語法是clamp(最小值, 變動值, 最大值)，當變動值小於最小值，則取最小值，當變動值大於最大值，取最大值，在中間就能隨意跑，也可寫成max(最小值, min(變動值, 最大值))
最後成果
手機safari上


筆電edge上


## Git遠端操控 - push
理論上最後再push上去就好

git add _sass/_base.scss
git commit -m "Responsive navbar update"
git push origin gh-pages

然後就出事了


後來我左試右試，甚至辦SSH key重用，都還是遭拒，結果最後發現403就是potato沒開權限的意思(╯‵□′)╯︵┻━┻
最後他開了權限，我同時用了新方法(下圖)，最後終於push成功，其實有點難分辨最後哪個是成功的關鍵，應該還是collaborator權限


## Conclusion
雖然寫Git的時候一直撞牆，但真的很好玩，而且這樣合作一個repository很有專業工程師的fu，感謝potato找我合作，是很有趣的經驗，下禮拜就寫自己的網站 + 過年吧，也歡迎各位去拜訪[Potato的網站](https://happypotato.ga/)喔~