Jekyll+GitHub Pages部署自己的静态Blog
混了这么久,一直想拥有自己的博客,通过jekyll和GitHub Pages捣腾出了自己的博客(https://www.ichochy.com)
一、安装jekyll
首先有安装
Ruby
的开发环境运行
gem install jekyll bundler
安装jekyll
和bundler运行
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
运行
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.
通过
http://127.0.0.1:400
就可以访问blog
了如下图:
二、了解jekyll
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.html
或index.md
其他HTML,Markdown文件将由Jekyll转换,生成首页 其他文件/文件夹 例如 css
、images
和favicon.ico
文件等通过
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
自定义站点信息
通过自定义
_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
如下图:

- 选择
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的更多相关文章
- 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- github pages部署静态网页
如果你的项目只是一个静态网站,就没有必要再去整什么服务器,github pages 提供了搭建静态网站的功能: 为什么使用Github Pages 1. 搭建简单而且免费: 2. 支持静态脚本: 3. ...
- 使用Jekyll + GitHub Pages免费搭建个人博客
使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...
- Github Pages和Hexo创建静态博客网站
Github Pages和Hexo创建静态博客网站 安装Node.js 本人是window环境,所以下载window版. 下载地址:https://nodejs.org/en/download/ 下载 ...
- 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享. ...
- 用GitHub Pages搭了个静态博客
经过周末两天折腾,终于在GitHub Pages上用Hugo搭了个静态博客. 链接:https://xusiwei.github.io/ @ruanyf 曾经在博客里提到过"喜欢写Blog的 ...
- 使用 jekyll + github pages 搭建个人博客
1. 新建 github.io 项目 其实 github pages 有两个用途,大家可以在官方网页看到.其中一个是作为个人/组织的主页(每个账号只能有一个),另一个是作为 github 项目的项目主 ...
- GitHub Pages建立第一个静态页面
1.创建仓库 创建仓库点击右上角的加号,选择newrepository.然后对仓库信息进行设置.注意箭头标识的几个地方.仓库名必须是http://username.github.io的形式.必须勾选p ...
- 用github pages展示你的静态网页,多项目支持
我看到有分享用github pages来做博客的,不过我并不想挂博客在上面,我只是想将我的一些作品挂上去,然后链接到我的简历里,这样HR可以直接看到. 首先是最基本的操作,在github上创建一个新的 ...
随机推荐
- Spring Native 项目,把 Spring 项目编译成原生程序!
Spring Native 是什么 优点 缺点 原生镜像(native image)和常规 JVM 程序的区别 前置条件:GraalVM 支持的语言 关键特性 GraalVM 下的 Java 微服务 ...
- du和df的统计结果为什么会不一样?
du和df的统计结果为什么会不一样? 今天有个人问我du和df的统计结果为什么会不同,接下来我们分析一下. 我们常常使用du和df来获取目录或文件系统已占用空间的情况.但它们的统计结果是不一致的,大多 ...
- 【Azure 微服务】Service Fabric中微服务在升级时,遇见Warning - System.Collections.Generic.KeyNotFoundException 服务无法正常运行
问题描述 使用.Net Framework 4.5.2为架构的Service Fabric微服务应用,在升级后发布到Azure Fabric中,服务无法运行.通过Service Fabric Expl ...
- 【Android】修改Android Studio的SDK位置
解决SDK占用C盘空间问题 由于Android Studio默认会将环境下载到C盘,会导致C盘空间被大量占用. 对于C盘窘迫的童鞋非常不友好. 可以通过修改SDK位置的方式缓解C盘空间焦虑. 打开&q ...
- OO第四单元总结暨期末总结
OO第四单元总结暨期末总结 目录 OO第四单元总结暨期末总结 第四单元三次作业架构与迭代 整体感受 HW1 HW2 HW3 四个单元架构设计与方法演进 Unit1 Unit2 Unit3 Unit4 ...
- 消息中间件-RabbitMQ基本使用
RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而集群和故障转移是构建在开放电信平台框架上的.所有主要 ...
- 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14
自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14 欢迎加QQ群:1026880196 进行交流学习 制作OpenSta ...
- C语言头文件到底是什么?
C语言头文件到底是什么? 在C语言学习的时候总是会引入这样的语句#include <stdio.h>,书上解释说把stdio.h这个文件的全部内容直接插入到这个位置,然后再经过C语言的编译 ...
- Day09_47_Map
Map 集合 Map集合** 继承关系** <interface>: Map(接口)<---HashMap(class)/HashTable(class)/SortedMap(子接口 ...
- P2P技术(一):NAT
1.NAT由来 NAT是一项神奇的技术,说它神奇在于它的出现几乎使IPv4起死回生.在IPv4已经被认为行将结束历史使命之后近20年时间里,人们几乎忘了IPv4的地址空间即将耗尽这样一个事实--在新技 ...