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

    如下图:

二、了解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. 完成 内容

    如下图:

四、创建GitHub Pages项目

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

    如下图:

五、将Blog接交到GitHub

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

如下图:

![WX20190218-102109](http://images.ichochy.com/WX20190218-102109.png)
  • 选择master branch并保存,就完成了部署

六、运行Blog

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

七、自定义域名

  • 自定义域名需要有自己的域名,没有可以注册购买个心意的域名:阿里云

  • 进入域名配置中心,配置域名解析

    如下图:

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

    如下图:

八、开启HTTPS

  • 进入github项目设置,开启Enforce HTTPS就完成了

    不过,如果是自定义域名,会需要等待几分钟,github需要申请证书并部署

  • 完成开启后,如下图:


联系方式:

邮箱:iChochy@qq.com

网站:https://www.ichochy.com

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

Jekyll+GitHub Pages部署自己的静态Blog的更多相关文章

  1. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  2. github pages部署静态网页

    如果你的项目只是一个静态网站,就没有必要再去整什么服务器,github pages 提供了搭建静态网站的功能: 为什么使用Github Pages 1. 搭建简单而且免费: 2. 支持静态脚本: 3. ...

  3. 使用Jekyll + GitHub Pages免费搭建个人博客

    使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...

  4. Github Pages和Hexo创建静态博客网站

    Github Pages和Hexo创建静态博客网站 安装Node.js 本人是window环境,所以下载window版. 下载地址:https://nodejs.org/en/download/ 下载 ...

  5. 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

    之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享. ...

  6. 用GitHub Pages搭了个静态博客

    经过周末两天折腾,终于在GitHub Pages上用Hugo搭了个静态博客. 链接:https://xusiwei.github.io/ @ruanyf 曾经在博客里提到过"喜欢写Blog的 ...

  7. 使用 jekyll + github pages 搭建个人博客

    1. 新建 github.io 项目 其实 github pages 有两个用途,大家可以在官方网页看到.其中一个是作为个人/组织的主页(每个账号只能有一个),另一个是作为 github 项目的项目主 ...

  8. GitHub Pages建立第一个静态页面

    1.创建仓库 创建仓库点击右上角的加号,选择newrepository.然后对仓库信息进行设置.注意箭头标识的几个地方.仓库名必须是http://username.github.io的形式.必须勾选p ...

  9. 用github pages展示你的静态网页,多项目支持

    我看到有分享用github pages来做博客的,不过我并不想挂博客在上面,我只是想将我的一些作品挂上去,然后链接到我的简历里,这样HR可以直接看到. 首先是最基本的操作,在github上创建一个新的 ...

随机推荐

  1. IdentityServer4是什么

    1 什么是IdentityServer4? IdentityServer4是用于ASP.NET Core的OpenID Connect和OAuth 2.0框架. 2 什么是OAuth 2.0? OAu ...

  2. Apache Hudi:CDC的黄金搭档

    1. 介绍 Apache Hudi是一个开源的数据湖框架,旨在简化增量数据处理和数据管道开发.借助Hudi可以在Amazon S3.Aliyun OSS数据湖中进行记录级别管理插入/更新/删除.AWS ...

  3. [^ ] 跟 [! ] 差在哪?-- Shell十三问<第十四问>

    [^ ] 跟 [! ] 差在哪?-- Shell十三问<第十四问> 这道题目说穿了, 就是要探讨 Wildcard(通配符)与 Regular Expression(正则表达式)的差别的. ...

  4. 各种OJ网站,刷题必备

    各种OJ网站 落谷 vijos JoyOI CodeVS Comet OJ 北京大学 浙江大学 杭州电子科技大学 信息学奥赛一本通 以上就是本蒟蒻所知的OJ网站 收集和打字应该值一个赞吧

  5. Toolkit 大更新:UI 更美观,用起来更方便!

    前言 前段时间有小伙伴在群里聊天,说到 Toolkit 下载量到 4.9k 了.就突然想起来,很久没有更新这个插件. PS:我是用它申请了 License,一般时候使用 Json 格式化功能. 趁着周 ...

  6. Horovod in Docker

    https://horovod.readthedocs.io/en/stable/docker.html Step1 构建镜像 GPU $ mkdir horovod-docker-gpu $ wge ...

  7. GO-04-变量

    GO变量 Go 语言的变量名由字母.数字.下画线组成,首个字符不能为数字: Go 语法规定,定义的局部变量若没有被调用会发生编译错误. 变量的声明 var 变量名 变量类型 批量声明变量 var ( ...

  8. day10.闭包函数与装饰器

    一.闭包函数 1.闭函数:被封闭起来的函数==>定义在函数内部的函数,特点是只能在函数内调用 2.包函数:该函数引用了一个名字,该名字来自于E这一层 总结:闭包函数指的是定义在函数内部的函数引用 ...

  9. python 利用opencv去除图片水印

    python 去除水印"人工"智能去除水印 这两天公司来了一个新的需求--去除水印,对于我一个从未接触过的这种事情的人来说,当时我是蒙的.不过首先我就去搜索了一下是否有该种合适的功 ...

  10. DexClassLoader动态加载分析

    转载自:http://www.blogfshare.com/dexclassloader.html 看到原来有把原始的dex文件加密保存,然后解密后使用DexClassLoader加载文件的方法,就来 ...