以下内容转自BY的博客原文

用作测试网页正常运行

已修改精简部分内容

感谢Huxpro提供的Blog模板

BY的博客

前言

本教程适合不懂技术又想搭建个人博客的小白

快速开始

从注册一个Github账号开始

方式： GitHub Pages + jekyll

首先注册GitHub账号，GitHub 是全球最大的开发者社区

拉取博客模板

注册完成后搜索 qiubaiying.github.io

进入我的仓库

点击右上角的 Fork 将仓库内容数据复制到自己的账号名下

稍等一下，点击刷新，显示Fork成功的页面

修改仓库名

点击settings进入设置

修改仓库名为 任意几位英文字母.github.io，点击 Rename

如果在浏览器中输入 任意几位英文字母.github.io 例如:baiyingqiu.github.io

你将会看到模板页面

另外还需要修改博客的配置才能变成自己的博客

若是出现404页面，则需要检查一下仓库名是否正确

整个网站结构

修改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

其中：

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

如果想继续研究其他的内容，可以点击这里

修改博客配置

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

点击修改，编辑_config.yml的内容

以下是配置文件的主要内容：

基础设置

# Site settings
title:   	#你博客的标题
SEOTitle:   	 #显示在浏览器标签上的标题
header-img:  img/post-bg-rwd.jpg 	#显示在首页的背景图片
email:      	#你的邮箱
description:	"You Blog"   	   #网站介绍
keyword:   "BY Blog, qiubaiying"        #网页关键词
url:   "https://qiubaiying.github.io"          # 你的博客网页地址
baseurl: ""      # 此处不用填写

侧边栏

# Sidebar settings
sidebar: true               # 是否开启侧边栏.
sidebar-about-description: "自己想说的一句话"
sidebar-avatar:/img/avatar-by.JPG      # 你的个人头像

社交账号

展示你的其他社交平台

填写账号的用户名，若没有可不填

# 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 评论系统

在官网注册帐号后，按下面的步骤简单的配置：

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

找到 Username

这个 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替换下面的内容

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

例如：

# 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
>你好，世界

进入你的主页，新的文章将会显示

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

首页标签

在首页可以看到这些特色标签，当你的文章出现相同标签（默认相同的标签数量大于1），才会自动生成

当只有一篇文章的时候，不会出现标签

若想直接在首页生成比较多的标签，可以在 _congfig.yml中找到这段：

# Featured Tags
featured-tags: true                     # 是否使用首页标签
featured-condition-size: 1              # 相同标签数量大于这个数，才会出现在首页

将其修改为featured-condition-size: 0即可

若文章和标签较多时，就需要改回 1 或 2

自定义域名

如果不想直接使用 baiyingqiu.github.io 这么长的域名

也可以换成 qiubaiying.top 这样简短的域名

购买域名

首先必须购买一个自己的域名

例如在阿里云购买

用阿里云 app也可以注册域名，域名的价格根据后缀的不同和域名的长度而分

域名尽量短一点，不能选择中文域名，比如 张三.top

GitHub Pages 无法处理中文域名，会导致你的域名无法在主页上使用

解析域名

注册好域名后，需要将域名解析到你的主页上

管理控制台 → 域名与网站（万网） → 域名

选择你注册好的域名，点击解析

添加解析

分别添加两个A 记录类型,

一个主机记录为 www,代表可以解析 www.qiubaiying.top的域名

另一个为 @, 代表 qiubaiying.top

记录值是 GitHub Pagas 在美国的服务器的地址 151.101.100.133

也可以通过这个网站或者直接在终端输入ping 你的地址，查看博客的IP

ping qiubaiying.github.io

修改CNAME

最后修改github仓库下的 CNAME 文件

选择 CNAME 文件

使用的注册的域名进行替换，然后提交保存

进阶

在Jekyll 的开发文档中

学习 Git 和 GitHub 的工作机制及使用

另外git教程

对git初步的了解后，可以掌握 使用git管理自己的GitHub仓库 的技能

利用GithHub Desktop管理GitHub仓库

GithHub Desktop 是 GithHub 推出的一款管理GitHub仓库的桌面软件，可以将你在Github上的文件同步到本地电脑上，并将修改后的文件同步到Github远程仓库

下载

GithHub Desktop 官网主页

克隆仓库

选择你的仓库克隆到本地

管理仓库

文件夹中打开后，文件结构和Github上相同

头像可以在img文件夹中替换

所有在Github上的的操作都可以进行

保存修改

当你对仓库文件夹的文件下进行修改、添加或删除时，都可以在 GitHub Desktop 中看到

保存修改，选择 Commit to master，填写修改说明

同步

将修改同步到 GitHub 远程仓库上，点击右上角的同步按钮

完成

打开你的GitHub上的仓库，可以看到提交的详情

注意

在 GitHub 网站上进行 Commit 操作后，需要在GitHub Desktop上按一下 同步按键 才能同步网站上的修改

修改个人介绍

修改个人介绍需要修改根目录下的 about.html 文件

常见问题

若配置文件修改后没有效果

可以刷新几遍浏览器，或者清除浏览器缓存

404错误

检查你的仓库名是否有按照要求填写
确定 Fork 的是不是BY的仓库

修改CNAME文件，域名如果不变

清除浏览器缓存

其他问题

其他

修改网站的 icon

要修改如图所示的网站 icon：

在 img 目录下找到并替换 favicon.ico ，图标尺寸为32x32

修改主页的座右铭

在根目录index.html 文件中，修改即可

如何在博客文章中上插入图片

网页的文章用的是 MarkDown 格式，此处可以学习MarkDown

MarkDown 中添加图片的形式是 :![](图片的URL)

将图片上传

上传成功后直接粘贴图片的URL

前言