使用 jekyll + github pages 搭建个人博客
1. 新建 github.io 项目
其实 github pages 有两个用途,大家可以在官方网页看到。其中一个是作为个人/组织的主页(每个账号只能有一个),另一个是作为 github 项目的项目主页(每个项目可以有一个)。
而 github pages 本身就支持 jekyll ,所以二者的结合使用非常方便。
这两种静态页面怎么生成在 https://pages.github.com/ 这里都有详细步骤。
所以现在既然我们要建的是个人博客,就是第一种用途了。
- 在
github上新建一个 repo,命名为username.github.io,其中username就是你的github用户名。 - 把该项目 clone 到本地。
- 进入项目目录,在根目录下创建
index.html,这个会自动作为博客的主页。 - 把所有的修改通过
git push到刚刚创建的 repo。 - 好了,现在我们可以通过
https://username.github.io来浏览我们的个人网站了。
2. 安装、使用 jekyll
网站跑起来了,但是里面没内容。当然我们可以自己写各个页面去丰富她。但是这样比较麻烦,弄个人博客我们主要关注的当然是写博文,而不想每次写一篇文章都要自己去排版一个页面。jekyll 就是可以帮助我们实现只要关注写文章本身,她会帮我们自动转化成静态页面。
可以看一下官网的描述
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Pages 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。
支持 markdown ,非常方便。
下面我们开始安装 jekyll 并且新建一个项目看一下。
# 安装jekyll
gem install jekyll
# 新建项目
jekyll new myblog # myblog 是项目名
# 进入项目目录
cd myblog
创建成功后的项目目录是这样的

因为现在最新版(3.8.3)的 jekyll new 命令创建的项目默认已经用了主题了(可以在 _config.yml 配置文件下看到 theme: minima 这一行),因此我们要安装相应的依赖。
# 安装依赖包
gem install jekyll bundler
bundle install # 这个命令会自动安装项目所需的依赖
# 启动一个本地服务器,而且启动后还会自动监听文件,如果本地修改了某个文件,会重新生成静态页面,我们只需要在浏览器刷新一下就好
jekyll serve
启动后应该能看到以下的输出

这时候我们就能在本地通过 http://127.0.0.1:4000/ 来预览效果了。

PS:有一些预设的设置可以在 _config.yml 配置文件里面修改。
3. 怎么写一篇文章
大家可以先看看 jekyll 项目的目录结构
所以新增文章应该在 _posts 目录下操作,而且注意命名要按照 年-月-日-标题.后缀名 的格式。
现在我们来新建文章。
cd _post
touch 2018-08-14-my-first-article.md
2018-08-14-my-first-article.md 文件输入以下内容
---
layout: post # 使用post模版
title: "我的第一篇文章"
date: 2018-08-14
categories: life
---
这是我的第一篇文章
再启动一下 jekyll serve 就能看到效果了。

4. 使用 jekyll 主题美化网站
内容知道怎么创建了,但是现在网站太简陋了。那怎么办?不用担心,jekyll 本身已经提供了挺多主题供我们选择使用。大家浏览 Jekyll Themes 这个网页慢慢选吧~~
至于每个主题怎么用最好还是看这个主题项目的说明,具体可能不太一样,我就不细说了。
记得最后修改完在本地预览没问题后要 git push 到 github 上哦~~
参考链接:
GitHub Pages
Jekyll文档
快速在 Windows 上搭建 Jekyll 开发环境
本文首发于我的个人网站【https://dandelion-drq.github.io】,转载请注明出处。
使用 jekyll + github pages 搭建个人博客的更多相关文章
- 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- 使用github pages搭建个人博客
一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...
- 基于 Hexo + GitHub Pages 搭建个人博客(二)
在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...
- 基于 Hexo + GitHub Pages 搭建个人博客(三)
一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...
- 使用Hexo + GitHub Pages 搭建个人博客
一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...
- 基于 Hexo + GitHub Pages 搭建个人博客(一)
前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...
- Hexo + Github Pages 搭建个人博客
之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...
- Hugo + Github Pages 搭建个人博客
尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...
- 基于Hexo+Github Pages搭建的博客
概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...
随机推荐
- k8s一点
1.kubectl get secret -n kube-system|grep admin-token kubernetes-dashboard-admin-token-9q757 2.kubec ...
- 版本管理(一)之Git和GitHub的区别(优点和缺点)
Git 简介 https://www.yiibai.com/git/getting-started-git-basics.html Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或 ...
- 并发编程 —— ConcurrentHashMap size 方法原理分析
前言 ConcurrentHashMap 博大精深,从他的 50 多个内部类就能看出来,似乎 JDK 的并发精髓都在里面了.但他依然拥有体验良好的 API 给我们使用,程序员根本感觉不到他内部的复杂. ...
- 浅析Java源码之HashMap
写这篇文章还是下了一定决心的,因为这个源码看的头疼得很. 老规矩,源码来源于JRE1.8,java.util.HashMap,不讨论I/O及序列化相关内容. 该数据结构简介:使用了散列码来进行快速搜索 ...
- WCF 学习总结1 -- 简单实例
从VS2005推出WCF以来,WCF逐步取代了Remoting, WebService成为.NET上分布式程序的主要技术.WCF统一的模型整合了以往的 WebService.Remoting.MSMQ ...
- AOP 应用 性能
AOP 我的感觉是做些日志什么的比较好,比如在每个controller的api前后搞一下,或者做些metric.今天在spring里用了下AOP并简单的测了一下性能. 使用 业务类 public cl ...
- 排序算法(1)--Insert Sorting--插入排序[1]--straight insertion sort--直接插入排序
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.基本思想 将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表.即:先将序列的第1个记录看成 ...
- CentOS7安装maven3.6.1
1.下载maven的tar.gz安装包 2.移到centos7中并解压 tar -xzvf maven.tar.gz 3.开始配置maven环境变量,通过命令 vim /etc/profile 4.配 ...
- Vue.js $nextTick
最近在学习vue.js.了解1.x的基础上再学习2.x的vue.两个版本的确是不会像angular这样1.x和2.x相差甚远.所以学习起来其实还是有很大的关联.但是,终归来说.两者还是有语法上的细微差 ...
- SD从零开始47-50, 装运成本基础、控制、结算, 信用/风险管理概述
[原创] SD从零开始47 装运成本基础 详细的装运成本处理Shipment Cost Processing in Detail 装运成本计算和装运成本结算可用于内向和外向交货: 装运成本记录在一张新 ...