博客 / 詳情

返回

在GitHub Pages上搭建jekyll

每個人都應該要有自己的博客,下面介紹下自己使用jekyll在GitHub Pages部署搭建個人博客的內容

目錄

基本介紹

從事互聯網行業日久後,技術漸長,總想着寫寫,把自己回,讓別人更多的看到自己。個人是這樣想的哈哈。
之前曾經自己使用laravel自己寫了個項目,不了了之值。
當時的感覺就會耗時不説,最重要的感覺上班在寫,下班後繼續寫博客代碼。失去了,做這件事情的本意(分享)。

其實現在搭建一個技術博客,非常簡單。

常用的有下面幾種:

  • GitHub Pages + Jekyll
  • GitHub Pages + Hexo
  • wordpress
  • 自行構建依託與java或者PHP,配合前端vue,h5等

什麼是GitHub Pages

Github Pages 是面向用户、組織和項目開放的公共靜態頁面搭建託管服務,站點可以被免費託管在 Github 上,你可以選擇使用 Github Pages 默認提供的域名 github.io 或者自定義域名來發布站點。Github Pages 支持 自動利用 Jekyll 生成站點,也同樣支持純 HTML 文檔,將你的 Jekyll 站點託管在 Github Pages 上是一個不錯的選擇。

什麼是jekyll

jekyll是一個簡單的免費的Blog生成工具,類似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一個生成靜態網頁的工具,不需要數據庫支持。但是可以配合第三方服務,例如Disqus。最關鍵的是jekyll可以免費部署在Github上,而且可以綁定自己的域名。

個人博客搭建

整體流程:

  • 選擇一個jekyll主題,fork到自己的github倉庫內
  • 使用gitHub的GitHub Pages,配置項目
  • 設置 GitHub Pages
  • 刪除原有博客中內容,編寫自由內容

步驟詳解

1. fork項目

以我個人項目為例,打給地址https://github.com/MyStudytime/studytime-Blog,點擊Fork按鈕複製代碼到自己的倉庫。大概1分鐘左右可以完成。

2. 刪除 CNAME 文件

刪除項目中的 CNAME 文件,CNAME 是定製域名的時候使用的內容,如果不使用定製域名會存在衝突。

3. 設置 GitHub Pages

點擊Settings按鈕打開設置頁面,頁面往下拉到GitHub Pages相關設置,在Source下面的複選框中選擇master branch,然後點擊旁邊的Save按鈕保存設置。

4. 重命名項目

點擊Settings按鈕打開設置頁面,重命名項目名稱為:YourGithubUserName.github.io

5. 重命名之後,再次回到 Settings > GitHub Pages 頁面

會發現存在這樣一個地址: https://YourGithubUserName.github.io

特別注意此處完成後,雖然也可以打開頁面,但是跳轉頁面還是我的頁面,需要修改jekyll配置文件。

6. 配置 _config.yml

打開項目目錄下的 _config.yml 文件,修改以下配置:

repository: MyStudytime/studytime-Blog  自己的倉庫地址
github_url: https://github.com/MyStudytime   自己的github地址
url: https://www.studytime.xin  上面設置的https://YourGithubUserName.github.io

完成上述配置後,大概等待一二分鐘後,可訪問https://YourGithubUserName.github.io即可打開網站地址。

7. 配置自定義域名

完成上述配置後,雖然https://YourGithubUserName.github.io也可以打開博客。但是對於崇尚個性的程序員難免會,想着配置自己的域名。
對於怎麼域名以及備案這些,就不再此,再述了。

  • 首頁需要進行域名解析,我的域名是阿里雲域名,我就在阿里雲上進行域名解析了。

  • 然後重新打開項目的Settings > GitHub Pages頁面,Custom domain 下的輸入框輸入剛才設置的域名:blog.studytime.xin,點擊保存即可。
  • 重新配置 _config.yml,打開項目目錄下的 _config.yml 文件,修改配置成url: http://blog.studytime.xin

  • 等待一分鐘之後,瀏覽器訪問地址:blog.studytime.xin 即可訪問博客。

更多精彩內容,請關注作者博客,https://studytime.xin

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.