博客 / 詳情

返回

Jekyll+GitHub Pages部署自己的靜態Blog

混了這麼久,一直想擁有自己的博客,通過jekyll和GitHub Pages搗騰出了自己的博客(https://www.ichochy.com)

一、安裝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

    如下圖:

    WX20190213-152850

二、瞭解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.htmlindex.md其他HTML,Markdown文件 將由Jekyll轉換,生成首頁
    其他文件/文件夾 例如 cssimagesfavicon.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需要重啓服務

三、書寫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                   --分類
                                           
    ---   
    內容
                                                                                                                            
    如下圖:

    WX20190215-171119

四、創建GitHub Pages項目

  • 新建一個項目,項目名必須為<username>.github.io,如:我的用户名為iChochy,項目名為iChochy.github.io

    如下圖:

    WX20190215-172254

五、將Blog接交到GitHub

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

    如下圖:

    WX20190218-102109

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

六、運行Blog

直接訪問項目名(<username>.github.io)就可以看你blog了,如:iChochy.github.io

七、自定義域名

  • 自定義域名需要有自己的域名,沒有可以註冊購買個心意的域名:阿里雲
  • 進入域名配置中心,配置域名解析

    如下圖:

    WX20190218-095303

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

    如下圖:

    WX20190218-095906

八、開啓HTTPS

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

    不過,如果是自定義域名,會需要等待幾分鐘,github需要申請證書並部署
  • 完成開啓後,如下圖:

    WX20190218-104830


聯繫方式:

郵箱:iChochy@qq.com
網站:https://www.ichochy.com
源文:https://www.ichochy.com/posts/20190213/
user avatar solomonxie 頭像 qianduanmeizi_5b62dc5d1ac4d 頭像 snowdreams1006 頭像
3 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.