混了这么久,一直想拥有自己的博客,通过jekyllGitHub 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                   --分类
    
    ---
                                       --内容
    1. 开始
    
       内空
    2. 写作
    
       内容
    3. 完成
    
       内容
    

    如下图:

    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