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上创建一个新的 ...
随机推荐
- IdentityServer4是什么
1 什么是IdentityServer4? IdentityServer4是用于ASP.NET Core的OpenID Connect和OAuth 2.0框架. 2 什么是OAuth 2.0? OAu ...
- Apache Hudi:CDC的黄金搭档
1. 介绍 Apache Hudi是一个开源的数据湖框架,旨在简化增量数据处理和数据管道开发.借助Hudi可以在Amazon S3.Aliyun OSS数据湖中进行记录级别管理插入/更新/删除.AWS ...
- [^ ] 跟 [! ] 差在哪?-- Shell十三问<第十四问>
[^ ] 跟 [! ] 差在哪?-- Shell十三问<第十四问> 这道题目说穿了, 就是要探讨 Wildcard(通配符)与 Regular Expression(正则表达式)的差别的. ...
- 各种OJ网站,刷题必备
各种OJ网站 落谷 vijos JoyOI CodeVS Comet OJ 北京大学 浙江大学 杭州电子科技大学 信息学奥赛一本通 以上就是本蒟蒻所知的OJ网站 收集和打字应该值一个赞吧
- Toolkit 大更新:UI 更美观,用起来更方便!
前言 前段时间有小伙伴在群里聊天,说到 Toolkit 下载量到 4.9k 了.就突然想起来,很久没有更新这个插件. PS:我是用它申请了 License,一般时候使用 Json 格式化功能. 趁着周 ...
- Horovod in Docker
https://horovod.readthedocs.io/en/stable/docker.html Step1 构建镜像 GPU $ mkdir horovod-docker-gpu $ wge ...
- GO-04-变量
GO变量 Go 语言的变量名由字母.数字.下画线组成,首个字符不能为数字: Go 语法规定,定义的局部变量若没有被调用会发生编译错误. 变量的声明 var 变量名 变量类型 批量声明变量 var ( ...
- day10.闭包函数与装饰器
一.闭包函数 1.闭函数:被封闭起来的函数==>定义在函数内部的函数,特点是只能在函数内调用 2.包函数:该函数引用了一个名字,该名字来自于E这一层 总结:闭包函数指的是定义在函数内部的函数引用 ...
- python 利用opencv去除图片水印
python 去除水印"人工"智能去除水印 这两天公司来了一个新的需求--去除水印,对于我一个从未接触过的这种事情的人来说,当时我是蒙的.不过首先我就去搜索了一下是否有该种合适的功 ...
- DexClassLoader动态加载分析
转载自:http://www.blogfshare.com/dexclassloader.html 看到原来有把原始的dex文件加密保存,然后解密后使用DexClassLoader加载文件的方法,就来 ...