混了这么久,一直想拥有自己的博客,通过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. Spring Native 项目,把 Spring 项目编译成原生程序!

    Spring Native 是什么 优点 缺点 原生镜像(native image)和常规 JVM 程序的区别 前置条件:GraalVM 支持的语言 关键特性 GraalVM 下的 Java 微服务 ...

  2. du和df的统计结果为什么会不一样?

    du和df的统计结果为什么会不一样? 今天有个人问我du和df的统计结果为什么会不同,接下来我们分析一下. 我们常常使用du和df来获取目录或文件系统已占用空间的情况.但它们的统计结果是不一致的,大多 ...

  3. 【Azure 微服务】Service Fabric中微服务在升级时,遇见Warning - System.Collections.Generic.KeyNotFoundException 服务无法正常运行

    问题描述 使用.Net Framework 4.5.2为架构的Service Fabric微服务应用,在升级后发布到Azure Fabric中,服务无法运行.通过Service Fabric Expl ...

  4. 【Android】修改Android Studio的SDK位置

    解决SDK占用C盘空间问题 由于Android Studio默认会将环境下载到C盘,会导致C盘空间被大量占用. 对于C盘窘迫的童鞋非常不友好. 可以通过修改SDK位置的方式缓解C盘空间焦虑. 打开&q ...

  5. OO第四单元总结暨期末总结

    OO第四单元总结暨期末总结 目录 OO第四单元总结暨期末总结 第四单元三次作业架构与迭代 整体感受 HW1 HW2 HW3 四个单元架构设计与方法演进 Unit1 Unit2 Unit3 Unit4 ...

  6. 消息中间件-RabbitMQ基本使用

    RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而集群和故障转移是构建在开放电信平台框架上的.所有主要 ...

  7. 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14

    自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14 欢迎加QQ群:1026880196 进行交流学习 制作OpenSta ...

  8. C语言头文件到底是什么?

    C语言头文件到底是什么? 在C语言学习的时候总是会引入这样的语句#include <stdio.h>,书上解释说把stdio.h这个文件的全部内容直接插入到这个位置,然后再经过C语言的编译 ...

  9. Day09_47_Map

    Map 集合 Map集合** 继承关系** <interface>: Map(接口)<---HashMap(class)/HashTable(class)/SortedMap(子接口 ...

  10. P2P技术(一):NAT

    1.NAT由来 NAT是一项神奇的技术,说它神奇在于它的出现几乎使IPv4起死回生.在IPv4已经被认为行将结束历史使命之后近20年时间里,人们几乎忘了IPv4的地址空间即将耗尽这样一个事实--在新技 ...