摘要
手把手教你如何从模板创建博客并进行简单的修饰操作。
相关系列文章
相关链接
Learn GitHub Desktop(正在搭建) Learn Markdown(正在搭建)
一、在Github上新建一个Repository
1.如果没有github账户，请创建一个github账户，如有则跳过这一步。假设你创建的账户名为yourname。
2.为了方便起见，你将转到一个博客的模板，然后点击右上角的Fork。
3.依次点击你的账户，Repositories，blog.io，Settings。然后修改Repository name为yourname.github.io。
4.打开Github Desktop，克隆这个项目(Clone Repository)，然后进行配置自己的账户的操作。
若要学习Github Desktop的相关操作，请转至Learn GitHub Desktop系列(正在搭建)
二、文件概述
依赖部分
_includes: # 博客框架部分
footer.html: html # 页脚信息，其中有版权信息和相关友情链接。
head.html: html # 整个网页的<head>部分的信息。
nav.html: html # 整个网页导航栏的信息。
_layouts: # 博客布局
default.html: html
page.html: html # 包含主页面系列的布局部分。
post.html: html # 包含_post文件夹里内容的布局部分。
_css: # html的样式文件
fonts: # 网页的字体文件
img: # 网页依赖的媒体文件
js: # 网页以来的javascript脚本
less: # css预处理语言
feed.xml: xml # 显示网页元数据
Gruntifile.js: javascript # js脚本
LICENSE: file # 用于github的许可证
package.json # 管理包的文件
内容部分
_posts: # 网页的内容，以后写的博客都会再这儿。
index.html: html # 这个网页的主页
Interview.html: html # 未知
about.md: md # About页面
archive.md: md # Archive(归档)页面
milestone.md: md # 代表作页面
tags.md: md # 标签页面
设置部分
_config.yml: yml # 包含整个博客重要的配置信息。
其他部分
README.md: md # 用于Github该repository显示的信息。
若要学习md文档编辑，请转至Learn Markdown系列文章(正在搭建)
三、配置自己的账户
将[]包围的信息按照提示修改。
1.从根文件夹打开_config.yml，会看到下列信息。
# Site settings
title: [Title] # 你的博客的标题
header-img: "img/green.jpg"
tagline: "cn"
description: [Description] # 用一句话描述你的博客
baseurl: ""
url: [Url] # 此处填写你的博客地址
# About/contact
owner:
name: [Author Name] # 填写作者信息：名字
email: [Email Address] # 填写作者信息：邮箱
bio: [Author Description] # 填写作者信息：博客描述
# Data
gavatar: img/favicon.png # 浏览器地址栏小图标，可自定义更改
favicon: img/favicon.png # 浏览器地址栏小图标，可自定义更改
# Links
# douban_username:
# twitter_username:
github_username:
# facebook_username:
# weibo_username:
# zhihu_username:
# Build settings
# use Github Flavored Markdown !important
# document: http://jekyllrb.com/docs/configuration/#kramdown
markdown: kramdown
highlighter: rouge
permalink: pretty
paginate: 8
exclude: ["less","node_modules","Gruntfile.js","package.json","README.md"]
# http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: Asia/Shanghai
# Defaults for posts
defaults:
-
scope:
path: ""
type: "posts"
values:
layout: "post"
author: [Anthor Name] # 你的名字
header-img: "img/green.jpg" # We don't want posts without a header image, that whould mean white on white
# Comments
# comments :
# provider : disqus # 使用 disqus 评论模块，读者翻墙才能看见
# duoshuo :
# short_name : # 填写你的 disqus id
# disqus :
# short_name : # 填写你的 disqus id
# Analytics and webmaster tools stuff goes here
google_analytics: # 填写你 google_analytics id
google_verify:
# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
bing_verify:
# Links to include in footer navigation
2.从根文件夹打开index.html，会看到前四行内容如下：
---
layout: page
description: [Description]
---
3.从根文件夹打开about.html，会看到前五行内容如下：
---
layout: page
title: "About"
description: [Anthor Description]
header-img: "img/green.jpg"
---
提示
注意事项：所有字段最好加”“包围，以说明其为字符串。
[Title]: 你的博客的标题，将会显示在地址栏，navbar的左端以及home页。
[Description]: 你的博客的描述，将会显示在home页最大的字的下方。
[Url]: 这个属性很重要，你要填你博客主页的网址，一般为yourname.github.io。
[Author Name]: 作者的名称，一般显示在页脚（写版权声明的地方）。
[Email Address]: 作者的邮箱，一般并没有什么用，可以忽略。
[Author Description]: 作者的描述，将会显示在about页最大的字的下方。
到此，你的账户配置已经基本完成，下面将会教你如何修饰这个博客。
四、修饰博客以及继续完善你的博客
修改顶栏的颜色
1.修改home页以及每个文档的颜色。
修改home页：打开_content.yml，前7行如下。
# Site settings
title: [Title] #在这里写入标题
header-img: "img/green.jpg"
tagline: "cn"
description: [Description] #用一句话描述博客
baseurl: ""
url: [Url] #此处填写你的博客地址
修改每个文档：第38~47行如下：
# Defaults for posts
defaults:
-
scope:
path: ""
type: "posts"
values:
layout: "post"
author: "peppermint2018" # 你的名字
header-img: "img/zhihu.jpg" # We don't want posts without a header image, that whould mean white on white
修改header-img的值为你想要的图片，图片都存储在img文件夹内，若要显示其他颜色，你可以复制图片并修改。
修改defaults:header-img以更改每页文档的顶栏颜色。
2.修改about页的颜色。
打开about.md，前5行如下。
---
layout: page
title: "About"
description: [Author Description]
header-img: "img/green.jpg"
---
修改方法与前面相似。
3.修改archive、milestone、tags页面的颜色与前面相似，故在此不再详细叙述。
在footer添加友情链接
1.打开_includes\footer.html，你将看到以下信息。
<!-- -->是html、xml、xaml等文件的注释语法，如要添加相关信息，只要取消注释(把<!-- -->删除)即可。
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<!-- kill the Facebook and Weibo -->
<!--
<li>
<a href="/feed.xml">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
-->
<!--
<li>
<a href="https://github.com/h1542462994">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
-->
<!--
-->
<!--
-->
<!--
-->
<!--
-->
</ul>
<p class="copyright text-muted">
© 2019 ht c ❖ Powered by Jekyll.
</p>
</div>
</div>
</div>
</footer>
2.取消注释相关内容，并再_content.yml第19~24行中修改相应的内容。
#是yml文件的注释方法。
# douban_username: # 你的豆瓣id
# twitter_username:
github_username:
# facebook_username:
# weibo_username:
# zhihu_username:
继续完善About和MileStone的页面
打开about.md和miltstone.md文件，修改除元数据以外的文本，可以是纯文本，也可以是md形式的文本。
五、正式编写文档
在此，你需要知道，博客写的文章都在文件夹_post内，这是很重要的。
如果要是你的文章更加丰富，你需要学习md文档的相关知识，你可以转至Learn Markdown系列文章(正在搭建)
一般来说，一开始学习此部分不需要什么额外知识，在此我推荐你要编写新的md文档时，最好复制最初的例子(_posts\2015-03-02-how-to-write.md)并加以修改，否则可能会出现非常奇怪的问题(本人就出现类似状况，而且难以解释)，所以最好把例子留下来。
打开_posts\2015-03-02-how-to-write.md你会看到以下内容。
---
layout: post
title: 这是一篇博客文章模板
date: 2015-03-02
categories: blog
tags: [例子]
description: 文章金句。
---
这里是博客正文。
--- ---包围的是文档的元数据部分。
1.需要修改文档发布的时间时，请修改文件名相关部分，和date的属性值，按照YYYY-MM-DD的格式书写。
2.文件名后面的部分主要用于方面找到文件，只在地址栏中显示，而与文档内容无关。推荐取一个有意义的名字。
3.title 属性值是文档的标题，这个属性很重要，关系到很多页面显示。
4.tags 属性很重要，他是一个数组，格式为[tag1,tag2,tag3]，这里的tag即文档的标签，这在整理文档（特别是后面写的非常多文章的时候）时特别有用。
5.博客正文:可以是纯文本，也可以是md形式的文本(看后缀就知道)。
参考文献
cnfeat(博客链接)提供了初始模板，我是在此基础上加以修改才有这篇博客。
更新周期
2018年12月7日 编写一~五章节。 2018年12月8日 添加感谢部分内容，添加摘要。