在github pages上,搭建jekyll博客

本教程针对的是不懂技术又想搭建个人博客的小白,操作简单暴力且快速。当然懂技术那就更好了。

快速开始
从注册一个Github账号开始

我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。

要使用 GitHub Pages,首先你要注册一个GitHub账号,GitHub 是全球最大的同性交友网站(吐槽下程序员~),你值得拥有。

拉取我的博客模板

注册完成后搜索 qiubaiying.github.io 进入我的仓库

点击右上角的 Fork 将我的仓库拉倒你的账号下

稍等一下,点击刷新,你会看到Fork了成功的页面

修改仓库名

点击settings进入设置

修改仓库名为 `你的Github账号名.github.io`,然后 Rename

这时你在在浏览器中输入 你的Github账号名.github.io 例如:baiyingqiu.github.io

你将会看到如下界面

说明已经成功一半了😀。。。当然,还需要修改博客的配置才能变成你的博客。

若是出现

则需要 检查一下你的仓库名是否正确
整个网站结构

修改Blog前我们来看看Jekyll 网站的基础结构,当然我们的网站比这个复杂。

├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
├── img
└── index.html

很复杂看不懂是不是,不要紧,你只要记住其中几个OK了

    _config.yml 全局配置文件
    _posts 放置博客文章的文件夹
    img 存放图片的文件夹

其他的想继续深究可以看这里
修改博客配置

来到你的仓库,找到_config.yml文件,这是网站的全局配置文件。

点击修改

然后编辑_config.yml的内容

接下来我们来详细说说以下配置文件的内容:
基础设置

# Site settings
title: You Blog                          #你博客的标题
SEOTitle: 你的博客 | You Blog         #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg-rwd.jpg      #显示在首页的背景图片
email: You@gmail.com    
description: "You Blog"               #网站介绍
keyword: "BY, BY Blog, 柏荧的博客, qiubaiying, 邱柏荧, iOS, Apple, iPhone" #关键词
url: "https://qiubaiying.github.io"          # 这个就是填写你的博客地址
baseurl: ""      # 这个我们不用填写

侧边栏

# Sidebar settings
sidebar: true                           # 是否开启侧边栏.
sidebar-about-description: "说点装逼的话。。。"
sidebar-avatar:/img/avatar-by.JPG      # 你的个人头像 这里你可以改成我在img文件夹中的两张备用照片 img/avatar-m 或 avatar-g

社交账号

展示你的其他社交平台

在下面你的社交账号的用户名就可以了,若没有可不用填

# SNS settings
RSS: false
weibo_username:     username
zhihu_username:     username
github_username:    username
facebook_username:  username
jianshu_username:    jianshu_id

新加入了简书,jianshu_id 在你打开你的简书主页后的地址如:http://www.jianshu.com/u/e71990ada2fd中,后面这一串数字:e71990ada2fd 
评论系统

博客中使用的是 Disqus 评论系统,在 官网 注册帐号后,按下面的步骤简单的配置即可:

进入 设置页面 配置个人信息

配置 Disqus 个人信息

找到 Username

Disqus Account

这个 Username 就是我们 _config.yml 中 disqus_username

# Disqus settings(https://disqus.com/
disqus_username: qiubaiying

    很对人反映 Disqus 评论插件加载不出来,因为 Disqus 在国内加载缓慢,所以我新集成了 Gitalk 评论插件(感谢@FeDemo的推荐),喜欢折腾的朋友可以看这篇:《为博客添加 Gitalk 评论插件》。 我已经在_config.yml 配置就好了,只需要填写参数可以了。

网站统计

集成了 Baidu Analytics 和 Google Analytics,到各个网站注册拿到track_id替换下面的就可以了

这是我的 Google Analytics

不要使用我的track_id😂。。。

若不想启用统计,直接删除或注释掉就可以了

# Analytics settings
# Baidu Analytics
ba_track_id: 83e259f69b37d02a4633a2b7d960139c

# Google Analytics
ga_track_id: 'UA-90855596-1'            # Format: UA-xxxxxx-xx
ga_domain: auto

好友

friends: [
    {
        title: "简书·BY",
        href: "http://www.jianshu.com/u/e71990ada2fd"
    },{
        title: "Apple",
        href: "https://apple.com"
    },{
        title: "Apple Developer",
        href: "https://developer.apple.com/"
    }
]

保存

讲网页拉倒底部,点击 Commit changes 提交保存

再次进入你的主页,

恭喜你,你的个人博客搭建完成了😀。
写文章

利用 Github网站 ,我们可以不用学习git,就可以轻松管理自己的博客

对于轻车熟路的程序猿来说,使用git管理会更加方便。。。
创建

文章统一放在网站根目录下的 _posts 的文件夹中。

创建一个文件

在下面写文章,和标题,还能实时预览,最后提交保存就能看到自己的新文章了。

格式

每一篇文章文件命名采用的是2017-02-04-Hello-2017.md时间+标题的形式,空格用-替换连接。

文件的格式是 .md 的 MarkDown 文件。

我们的博客文章格式采用是 MarkDown+ YAML 的方式。

YAML 就是我们配置 _config文件用的语言。

MarkDown 是一种轻量级的「标记语言」,很简单。花半个小时看一下就能熟练使用了

大概就是这么一个结构。

---
layout:     post                       # 使用的布局(不需要改)
title:      My First Post                 # 标题 
subtitle:   Hello World, Hello Blog #副标题
date:       2017-02-06                 # 时间
author:     BY                         # 作者
header-img: img/post-bg-2015.jpg     #这篇文章标题背景图片
catalog: true                         # 是否归档
tags:                                #标签
    - 生活
---

## Hey
>这是我的第一篇博客。

进入你的博客主页,新的文章将会出现在你的主页上.

按格式创建文章后,提交保存。进入你的博客主页,新的文章将会出现在你的主页上.

到这里,恭喜你!

你已经成功搭建了自己的个人博客以及学会在博客上撰写文字的技能了。

演示博客:ymbrite.github.io