Jekyll+GitHub Pages部署自己的静态Blog

混了这么久,一直想拥有自己的博客,通过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

四、创建GitHub Pages项目

五、将Blog接交到GitHub

如下图:

![WX20190218-102109](https://images.ichochy.com/WX20190218-102109.png)

六、运行Blog

直接访问项目名(<username>.github.io)就可以看你blog了,如:iChochy.github.io

七、自定义域名

八、开启HTTPS

联系方式

网站:https://ichochy.com/
源文:https://ichochy.com/posts/20190213/

Comments

comments powered by Disqus