用 Bootstrap、Github.io 輕鬆搞定架站（靜態網頁）

常常看到新創公司有美美的 presentation，尤其 landing page 更是令人印象深刻，趁暑假自己做一個前端來試試~

架起來長這樣：
https://dragonkiss81.github.io/NTUballoon/

一、Github架靜態網站

github 提供方法在 github 上的 repository 建立靜態網頁，可以用來作為前端展示或個人部落格之用。以下是簡單的步驟敘述：

在github上開新的repository : 點選Setting -> GitHub Pages，如下圖

然後就會生成簡單的 index.html 範例網頁，並新增了一個 branch [gh-pages]，github會自動抓這個branch裡的資料顯示在

https://[username].github.io/[repo_name]]/

其他資訊（像是架部落格）可以參考官網：https://pages.github.com/

二、套用 Bootstrap

Bootstrap 為 Web app 的 UI 提供了一致的框架，支援響應式 Web 設計，套上去看起來就像現代化的網頁。

網路上有許多免費的 bootstrap template 資源，我是用這個：
https://almsaeedstudio.com/blog/10-Free-Responsive-Bootstrap-Templates-For-2016

下載後拿到的資料架構如下，大致知道東西在哪改就好，不用重新發明輪子XD

三、FB轉貼連結設定

張貼連結到FB或其他網站時會有關於連結的快取，這部分是可以設定的，使用以下html語法：

<html xmlns:og='http://ogp.me/ns#'>
<head>
 <meta property="og:title" content="NTUBDC 台大氣球社"></meta>
 <meta property="og:image" content="https://dragonkiss81.github.io/NTUballoon/img/slide/fb.png"></meta>
 <meta property="og:description" content="Redefine Happiness In Your Life"></meta>
 ...

寫完之後可以使用 facebook debug 看看預覽有沒有問題，也有提供刷新快取的功能，如果更新完貼到FB沒換過來可以試試。

Facebook Sharing Debugger
https://developers.facebook.com/tools/debug/sharing/

結果就變以下這樣，圖不在整個網頁出現也可以設定在預覽圖喔！

四、網址列小圖示

網址列左邊的小圖可以藉由以下方式顯示：

<link rel="Shortcut Icon" type="image/x-icon" href="img/icon/top_icon.png"/>

出來長這樣~

五、Web Loader

記得把 web loader 放上去使用者體驗會比較好！

六、修改字體

bootstrap 修改默認字體，更換為微軟正黑體，其實其他系統（如mac, Android）上顯示預設字體就滿體面的，就是微軟的新細明體.......

CSS Code

body,input,button,select,textarea{
font-family: "微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕","Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:108%;
}

七、Demo

前端就是邊邊角角的事情特別多，不過做完特別有成就感！

https://dragonkiss81.github.io/NTUballoon/

看起來還滿像一回事的，搭配 Django 或其他後端框架做出動態網頁應該滿好玩的，不過web app 難還是難在找尋使用者的需求是什麼吧~

References

Facebook Sharing Debugger
https://developers.facebook.com/tools/debug/sharing/

WFU blog - 分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
http://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html

[架站]為你的網站加上網址列小圖示ICON，打造專屬品牌
https://twweeb.org/shortcut-icon/

利用 Bootstrap 进行快速 Web 开发
http://www.igooda.cn/jzjl/20131227428.html

Pages

2016年7月2日星期六