乐趣区

JekyllGitHub-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

    如下图:

二、了解 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                   -- 分类
                                           
    ---   
    内容
                                                                                                                            

    如下图:

四、创建 GitHub Pages 项目

  • 新建一个项目,项目名必须为<username>.github.io, 如:我的用户名为iChochy,项目名为iChochy.github.io

    如下图:

五、将 Blog 接交到 GitHub

  • 将本地写好的的 blog pull 到github 上,在项目设置中打开GitHub Pages

    如下图:

  • 选择 master branch 并保存,就完成了部署

六、运行 Blog

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

七、自定义域名

  • 自定义域名需要有自己的域名,没有可以注册购买个心意的域名:阿里云
  • 进入域名配置中心,配置域名解析

    如下图:

  • 进入 github 项目设置,设置自己的域名并保存,就完成了自定义域名设置

    如下图:

八、开启 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

退出移动版