2014年7月31日

GitHub - 在GitHub Page使用Markdowm格式編寫網站

前面我們使用了GitHub Page for User來建立個人網站,但基本上還是只能使用HTML來撰寫,沒辦法用Markdown格式;但前面明明說GitHub Page支援Makedown阿!,而且不是還說GitHub背後有Jekyll引擎會將Makedown轉成HTML,那為啥還是不行呢??

那是因為要設定Jekll的設定檔,並且放在特定的目錄下,才會有效果;但是,該怎麼設定呢??其實是有很多規則的,所以網路上就有好心的神人,將這些東西準備好,我們只要下載後就能使用,所以,這篇文章,就會來提一下由神人plusjade提供的。

首先我們可以從GitHub找到神人提供的jekyll-bootstrap,來當作網站的範本。他的網址在這邊,從他的網址可以進入到GitHub後下載。

如下圖,其實我們也可以用指令或是GitHub for Windows進行下載,但這邊小弟就直接用Download ZIP檔吧,比較快。

image

下載完後,解開,把所有的東西丟到我們Local的專案下。

image

然後用GitHub for Windows工具Commit後,並且Sync到GitHub。

image

之後登入網頁,就可以看到,已經變成jekll-bootstrap的樣板了!!

image

這時候,我們回到Local的目錄下,並進入_posts目錄,就可以新增一個MD的檔案;這邊,_posts是Jekll預設發佈的目錄,所以我們實際上也可以在裡面建立目錄結構,例如底下的core-samples,就會建立出study4.github.io/core-samples的結構;而底下建立的檔名則是固定的,也就是必須搭配日期和Title的格式;所以下面的2014-07-31-hello-world.md到時候會產生成study4.github.io/2014/07/31/hello-world/ ( 當然,有興趣的朋友,可以自行去修改config,來調整url格式 )

image

另外,或許大家有人會注意到,那為什麼預設的範本,網址會是study4.github.io/core-samples/lessons/2011/12/29/jekyll-introduction/,多了一個lessons??那是因為那個md檔有多設定了一個類別如下,才會多了一層目錄。

image

當GitHub for Windows Sync完後,我們就可以去GitHub上面看到我們上傳的md檔了。

image

之後,我們就可以連進去看看了!!

image

這樣就完成嚕!!

後記

其實這些文章,網路已經有很多很多,但因為天資愚笨,有很多盲點不懂=v=,所以小弟還是實作了一次,並且順便紀錄一下嚕!,所以也請各位前輩多多包涵嚕!~

參考資料

GitHub - GitHub Page for Project

接下來的這篇,我們會談到,給Project用的GitHub Page!!

如要給Project用,會有兩種設定方式,一個是直接開一個分支,一個則是讓GitHub網站自動幫我們建立,如果想手動開分支,自己設定樣板的朋友們,就請參考參考連結的地方吧;小弟這邊是直接使用官網來設定 ( 因為小弟比較懶= =+ )

首先,我們要先開一個Repository,如下圖,已經開好了一個Lottery ( 傳說中的亂數抽獎系統!! ),假設這個亂數抽獎系統很偉大,你想幫他建立一個專門的Project頁面,讓使用者了解他很偉大,那就可以做下面這些步驟…

首先選擇Settings。

image

然後往下來,就可以看到如下圖的選項。

image

在這邊,會使用Makedown的撰寫方式來撰寫Project的首頁,基本上Makedown很容易了解,大家可以去Google查一下就知道了喔!!

image

接下來選擇樣板。

image

然後就完成了;你會發現,如下圖,基本上它就是幫忙產生一個gh-pages的分支,所以我們自己建立這個分支,並且把檔案傳上去,也是可以達到目的的。

image

同樣的,要等待一段時間後,網站就會開始運作,而他的網址格式會是username.github.io/repository的格式,所以如下圖,我的格式就會是study4.github.io/Lottery。

image

就是這樣的簡單!!

參考資料

GitHub - GitHub Page for User

今天要來撰寫的筆記是GitHub Page,其實GitHub Page以前就稍微有看過,但畢竟在實務面上,小弟我也沒甚麼地方可以用的到,所以就沒真的開起來玩玩看,而最近,因為有些需求,所以就想說,邊設定,邊做一個簡單的筆記~

那GitHub Page是啥??,其實Google一下,應該就可以找到超多的文章;小弟這邊就不詳細的說明了;簡單的說,就是GitHub使用Ruby所撰寫的引擎,來提供靜態網頁服務;簡單的說,就是可以來當作Blog、介紹自己、或是介紹放在上面的Project!!在MS的圈子裡大家可能比較少聽到,因為MS的圈子哩,國內有鼎鼎大名的點部落,其次的一般人可能會選擇使用Wordpress或是Blogger,但其實GitHub Page在Open Source的朋友圈裏面,超多人用!!更號稱是Developer ( Hacker ) 專用的Blog系統。

或許會有人想問說,那有甚麼差??

首先,他是靜態的,所以速度非常快,基本上我們撰寫技術文章,也用不到啥動態產生HTML的Server端語言…,此外,透過底層的Jekyll引擎,更可以將Markdown格式的文章轉成HTML ( MD格式撰寫起來真的會很快樂… ),其次也支援版控、隨便一個編輯器就可以撰寫… ( 你可以使用Visual Studio寫Blog = =|| )…等等等的眾多優點,所以目前GitHub Page非常的夯!!

( 不過小弟暫時也不會搬Blog…因為太累了= =|| )

所以講到這,心動了嗎??…不管心不心動,至少身為愛好技術的人,反正就先體驗看看吧!!

首先GitHub Page 基本上有分成兩大類,一個是for User,簡單的說,你申請的這個帳號,就只會有一個GitHub Page for User的網站;而另一塊是GitHub Page for Project,也就是說,你的這個帳號,有幾個Repository,就可以有幾個Project用的網站;換言之,User通常是企業的品牌網站,而Project則像是企業底下的產品頁面;所以小弟我這邊會分兩篇來敘述,這篇是講User篇。

當然,在開始前,我們要先有GitHub帳號;登入之後,如下圖,我們要建立一個新的Repository。

image

而這個Repository Name是這個GitHub的UserName 加上 github.io,所以如下圖,小弟使用的帳號是study4,所以Repository Name就必須為study4.github.io。

image

完成之後,我們要把檔案發佈上去,但這之前,我們要先在Local建立一個Repository;然後寫完之後在publish上去;而小弟這邊選用的是GitHub的Windows UI圖形工具來處理;如果你想直接下Git指令也是可以啦…那可以直接參考最後的參考連結。

( 這邊是基本的Git原理,如果真的不懂,又有興趣,可以參考小弟之前的文章,這邊就不重複敘述了 )

image

按下上圖的按鈕後,就會打開工具,下圖是已經處理完,並且在Local已經建立完成了。

image

接下來,我們在下載的路徑下,加入html。

image

並且簽入,簽入後,透過工具發佈出去。

image

通常發佈出去後,需要等一段時間,才可以在username.github.io這個網址看結果,如下圖,我們就可以到study4.github.io看到結果,基本上這樣就完成了!!

image

下一篇,會講到關於Project的GitHub Page喔!!

參考資料

2014年7月25日

VSO - 使用Azure AD管理Visual Studio Online

記得前一段時間,聽到Visual Studio Online可以整合AD了!!真的是一大新聞,但是後來仔細一看,原來要將VSO整合AD,必須用Azure AD帳號去申請VSO,而已經有VSO的朋友則還沒辦法支援… (抖抖)。

但畢竟雲端變化很快,在這次的更新,MS已經提供支援了!!

所以,除了前面一篇講到了在Azure上付費外,我們還可以利用Azure AD來進行Visual Studio Online的控管!! 另外,如果是Local的AD,那也有同步機制可以同步到Azure AD喔!!

注意! 根據官方文件,繫結的時間需要2HR,所以請利用無人的時間,執行下列動作!

首先,我們要有Azure的最高權限管理者,才能進行這個動作;要怎樣看有無最高權限管理者,可以從Azure的設定畫面,訂用帳戶這邊看到…如果是最高權限管理者,那應該會顯示白色的字,如果不是,則是灰色的… ( 可以使用Azure的所有服務之人,並不代表是有最高權限的管理者,但最高權限管理者,一定可以使用Azure全部服務;基本上最高權限帳號,就是當初註冊的那個帳號。 )

image

另外,Azure AD的部分,這個帳號也必須為全域管理員…

image

如下圖,就不是全域管理員;如果不是全域管理員,那要使用全域管理員的帳號,登入Azure 並去AD裡面去修改…另外,如果當初申請Azure,用的是Microsoft Account,那也別忘記把Microsoft Account加進去Azure AD裡面。

image

接下來,進入VSO的管理頁面。

image

然後我們按下設定。

image

這邊我們就可以利用連接的方式,將現有AD與現有VSO進行連接…

image

這邊我們要選擇我們的Azure AD目錄;另外這邊的提示是告訴我們,如果現有的VSO使用者,要繼續使用,那必須要加入到Azure AD目錄下,不然會無法存取!!

而這邊,按下勾勾後,就可以完成連線了~~

image

如下圖,假設我們設定完成後,在VSO新增一個使用者,VSO也會提醒我們…

image

基本上這樣就可以了,但有個小細節提供給大家參考。

首先,因為當時申請VSO的時候,大家幾乎都是用Microsoft Account,但現在整合的時候,如果希望完全使用組織AD,那大家可以先去VSO,把VSO的擁有者換成組織的AD帳號,然後再進行上面那些步驟,這樣就可以了!!

參考資料

VSO - 使用Azure進行Visual Studio Online的付費

最近朋友問的我一個問題…"當Visual Studio Online上的壓力測試和Build使用超過額度了,不能用了怎麼辦!!?為什麼我都找不到付費的地方??"

其實在Visual Studio Online上找不到是很正常的…因為Visual Studio Online的付費是綁定Azure帳號的阿!!!!! ( 可見兩者的關係很好…阿…畢竟之前ScottGu是管整個ASP.NET Team的!! )

所以我們要進行Visual Studio Online的付費,就要有一個Azure帳號,並且進行繫結~

如下圖,就等同我們平常使用Azure一樣,我們新增一個Visual Studio Online服務就可以;但這邊要注意,如果是要連結現有的VSO帳號,那你的Azure帳號要和VSO帳號一樣,也就是說,這個帳號必須是VSO的擁有者,並且也是Azure的Administrator、co-Administrator,不然會找不到喔!!

image

新增完之後,就可以從這個畫面進行調整,而且隨時可以進行使用者人數、組建、附載測試的設定;另外,目前也沒辦法只提供管理VSO資源(如下圖)的管理者,畢竟是針對Azure權限開啟,所以一開後,整個Azure的權限都會開= =…

image

另外,官方有這點特別條文,MSDN每月的可用額度,是不適用於VSO計費的(反正就是要額外收費,而且還要關閉付費限制)

image

最後補充上關於各等級的網址,有需要的朋友可以去網址看看;另外,如果加入進來的帳號,有MSDN的權限,那就不會占掉五人名額喔!

基本上就是這樣,有興趣的也可以去看網站說明。

參考資料