Jekyll+GitHub Pages部署本身的靜態Blog

混了這麼久，一直想擁有本身的博客，經過jekyll和GitHub Pages搗騰出了本身的博客(https://www.ichochy.com)

1、安裝jekyll

1. 首先有安裝Ruby的開發環境
2. 運行gem install jekyll bundler安裝jekyll和bundler

3. 運行jekyll new myBlog建立默認的blog

   文件目錄：

   -rw-r--r--   1 mleo  staff    35  2 13 15:02 .gitignore
   -rw-r--r--   1 mleo  staff   398  2 13 15:02 404.html
   -rw-r--r--   1 mleo  staff  1039  2 13 15:02 Gemfile
   -rw-r--r--   1 mleo  staff  1686  2 13 15:03 Gemfile.lock
   -rw-r--r--   1 mleo  staff  1652  2 13 15:02 _config.yml
   drwxr-xr-x   3 mleo  staff    96  2 13 15:02 _posts
   -rw-r--r--   1 mleo  staff   539  2 13 15:02 about.md
   -rw-r--r--   1 mleo  staff   175  2 13 15:02 index.md

4. 運行cd myBlog進入blog目錄，運行bundler exec jelly serve啓動

   MacBook-Pro:myBlog mleo$ bundler exec jekyll serve
   Configuration file: /Users/mleo/Develop/Coding/myBlog/_config.yml
           Source: /Users/mleo/Develop/Coding/myBlog
      Destination: /Users/mleo/Develop/Coding/myBlog/_site
    Incremental build: disabled. Enable with --incremental
     Generating... 
      Jekyll Feed: Generating feed for posts
                   done in 0.862 seconds.
    Auto-regeneration: enabled for '/Users/mleo/Develop/Coding/myBlog'
   Server address: http://127.0.0.1:4000/
     Server running... press ctrl-c to stop.

5. 經過http://127.0.0.1:400就能夠訪問blog了

   以下圖：

   

2、瞭解jekyll

1. jekyll目錄結構：

   文件/目錄	描述
   _config.yml	常量配置信息，網站的基礎信息
   _drafts	未發佈的草稿帖子
   _includes	模塊化頁面，使用： include default.html
   _layouts	佈局模板頁面，使用: layout: default
   _posts	發佈的blog，固定格式： YEAR-MONTH-DAY-title.MARKUP。
   _data	文件數據（.yml、 .yaml、.json、.csv或.tsv格式）
   _sass	定義站點使用的樣式
   _site	Jekyll build 後生成的站點靜態文件
   .jekyll-metadata	Jekyll build 日誌信息
   index.html或index.md其餘HTML，Markdown文件	將由Jekyll轉換，生成首頁
   其餘文件/文件夾	例如 css、images和favicon.ico文件等

2. 經過Gemfile文件配置 jekyll 主題

   從Jekyll 3.2開始，jekyll new使用Gemfile文件來定義網站的主題，使默認目錄結構更簡單。默認狀況下_layouts，_includes和_sass存儲在Ruby中。

   minima 是默認主題，運行 bundle show minima 顯示主題文件位置

   MacBook-Pro:myBlog mleo$ bundle show minima
   /Library/Ruby/Gems/2.3.0/gems/minima-2.5.0

3. 自定義站點信息

   經過自定義_config.yml文件，改變 blog 網站信息，

   常量	說明
   title	標題
   email	做者郵箱
   description	網站信息
   baseurl	網站路徑
   url	網站地址，如：https://www.ichochy.com
   twitter_username	媒體帳號，如：iChochy
   github_username	媒體帳號，如：iChochy

   注：修改_config.yml須要重啓服務

3、書寫Blog

• 進入_post目錄，開始你的創做吧，注意文件的格式必須爲YEAR-MONTH-DAY-title.MARKUP，如：2019-02-13-blog.md 。

• 開始寫做吧，直接使用md語法來書寫你的文章

  ---                                                                                                                                          
  layout: post                       --指定模板
  title:  "blog"                     --標題
  date:   2019-02-13 15:02:11 +0800  --時間
  tags: blog                   --分類
                                         
  ---   
  內容

  以下圖：

  

4、建立GitHub Pages項目

• 新建一個項目，項目名必須爲<username>.github.io,如：個人用戶名爲iChochy，項目名爲iChochy.github.io

  以下圖：

  

5、將Blog接交到GitHub

• 將本地寫好的的blog pull到github上，在項目設置中打開GitHub Pages

  以下圖：

  

• 選擇master branch並保存，就完成了部署

6、運行Blog

直接訪問項目名(<username>.github.io)就能夠看你blog了，如：iChochy.github.io

7、自定義域名

• 自定義域名須要有本身的域名，沒有能夠註冊購買個心意的域名：阿里雲

• 進入域名配置中心，配置域名解析

  以下圖：

  

• 進入github項目設置，設置本身的域名並保存，就完成了自定義域名設置

  以下圖：

  

8、開啓HTTPS

• 進入github項目設置，開啓Enforce HTTPS就完成了

  不過，若是是自定義域名，會須要等待幾分鐘， github須要申請證書並部署

• 完成開啓後，以下圖：

  

---

聯繫方式：

郵箱： iChochy@qq.com
網站： https://www.ichochy.com
源文： https://www.ichochy.com/blog/2019/02/13/Jekyll GitHub-Pages部署本身的靜態Blog.html