快速搭建个人博客

搭建github.io个人博客

Posted by qiubaiying(http://qiubaiying.top) on June 16, 2018
转载自http://qiubaiying.top 学习总结用 侵删

从注册一个Github账号开始

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

要使用 GitHub Pages,首先你要注册一个GitHub账号,

拉取我的博客模板

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

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

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

修改仓库名

点击settings进入设置

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

这时你在在浏览器中输入 你的Github账号名.github.io 例如:forgeekscn.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:  Blog    				  	#你博客的标题
SEOTitle: 你的博客    	 #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg-rwd.jpg  	#显示在首页的背景图片
email: You@gmail.com	
description: "You Blog"  			 #网站介绍
keyword: "" #关键词
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

评论系统

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

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

配置 Disqus 个人信息

找到 Username

Disqus Account

这个 Username 就是我们 _config.ymldisqus_username

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

![](http://upload-images.jianshu.io/upload_images/2178672-0781006b5d15d149.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

再次进入你的主页,

![](http://upload-images.jianshu.io/upload_images/2178672-a49ee2975d524c93.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

# 写文章

利用 Github网站 ,我们可以不用学习[git](https://git-scm.com/),就可以轻松管理自己的博客

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

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

![](http://upload-images.jianshu.io/upload_images/2178672-fb74cdc11a950bd4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

创建一个文件

![](http://upload-images.jianshu.io/upload_images/2178672-9a47b2074362e570.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

![](http://upload-images.jianshu.io/upload_images/2178672-88acd9e29fa3ae8a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


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

文件的格式是 `.md` 的 [**MarkDown**](http://sspai.com/25137/) 文件。

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

[**YAML**](http://www.ruanyifeng.com/blog/2016/07/yaml.html?f=tt) 就是我们配置 `_config`文件用的语言。

[**MarkDown**](http://sspai.com/25137/) 是一种轻量级的「标记语言」,很简单。[花半个小时看一下](http://sspai.com/25137)就能熟练使用了

大概就是这么一个结构。


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

这是我的第一篇博客。

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


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

![](http://upload-images.jianshu.io/upload_images/2178672-f4d5bb65ae3abd00.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

到这里,恭喜你!

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


#### 首页标签

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

所以当你只放一篇文章的时候是不会出现标签的。



![](http://upload-images.jianshu.io/upload_images/2178672-9281b7176c456f92.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


建站的初期,博客比较少,若你想直接在首页生成比较多的标签。你可以在 `_congfig.yml`中找到这段:

Featured Tags

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


将其修改为`featured-condition-size: 0`, 这样只有一个标签时也会出现在首页了。

相反,当你博客比较多,标签也很多时,这时你就需要改回 `1` 甚至是 `2` 了。


# 自定义域名

搭建好博客之后 你可能不想直接使用 [baiyingqiu.github.io](http://baiyingqiu.github.io) 这么长的博客域名吧, 想换成 简短的域名。那我们开始吧!

#### 购买域名
首先,你必须购买一个自己的域名。

我是在[阿里云](https://wanwang.aliyun.com/domain/?spm=5176.8006371.1007.dnetcndomain.q1ys4x)购买的域名

![](http://upload-images.jianshu.io/upload_images/2178672-ef3844cab15e35ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

用**阿里云** app也可以注册域名,域名的价格根据后缀的不同和域名的长度而分,比如我这个 `forgeeks.cn` 的域名 

域名尽量选择短一点比较好记住,注意,不能选择中文域名,比如 `张三.top` ,GitHub Pages **无法处理中文域名**,会导致你的域名在你的主页上使用。

注册的步骤就不在介绍了

#### 解析域名

注册好域名后,需要将域名解析到你的博客上

管理控制台 → 域名与网站(万网) → 域名

![](http://upload-images.jianshu.io/upload_images/2178672-9a75bba50d1b14d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

![](http://upload-images.jianshu.io/upload_images/2178672-0968a8dd2045f4fd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

添加解析

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

一个主机记录为 `www`,代表可以解析 `www.forgeeks.cn`的域名

另一个为 `@`, 代表 `forgeeks.cn`

~~记录值就是我们博客的IP地址,是 GitHub Pagas 在美国的服务器的地址 `151.101.100.133`~~
新的ip为下列地址
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

![](http://upload-images.jianshu.io/upload_images/2178672-0769a93bc487e9d8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


可以通过 [这个网站](http://ip.chinaz.com/)  或者直接在终端输入`ping 你的地址`,查看博客的IP

	ping forgeeks.cn

细心地你会发现所有人的博客都解析到 `151.101.100.133` 这个IP。

然后 GitHub Pages 再通过 CNAME记录 跳转到你的主页上。


#### 修改CNAME

最后一步,只需要修改 我们github仓库下的 **CNAME** 文件。

选择 **CNAME** 文件

![](http://upload-images.jianshu.io/upload_images/2178672-a422f3dab436dfb7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

![](http://upload-images.jianshu.io/upload_images/2178672-6e613004fb410b44.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


这时,输入你自己的域名,就可以解析到你的主页了。

大功告成!

# 进阶

若你对博客模板进行修改,你就要看看 Jekyll 的[开发文档](http://jekyll.com.cn),是中文文档哦,对英语一般的朋友简直是福利啊(比如说我😀)。

还要学习 **Git** 和 **GitHub** 的工作机制了及使用。

你可以先看看这个[git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/),对git有个初步的了解后,那么相信你就能将自己图片传到GitHub仓库上,或者可以说掌握了 **使用git管理自己的GitHub仓库** 的技能呢。

对于轻车熟路的程序猿来说,这篇教程就算就结束了,因为下面的内容对于你们来说 so eazy~

但相信很多小白都一脸懵逼,那我们继续👇。
 

# 修改个人介绍


![](https://ws4.sinaimg.cn/large/006tNc79gy1fme0poz7gqj30vq0l8whh.jpg)

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

![](https://ws2.sinaimg.cn/large/006tNc79gy1fme0rna33tj30bw0bntah.jpg)

看不懂 HTML 标签?没关系,对照着修改就好了~ 还有注意这个有中英介绍

![](https://ws1.sinaimg.cn/large/006tNc79gy1fme0sbvmmcj30zp0os7ap.jpg)
 
  

#### 修改网站的 **icon**

![](https://ws2.sinaimg.cn/large/006tNc79gy1flgh6k23ppj30ad00uq2t.jpg)

要修改如图所示的网站 **icon**:

在博客 `img` 目录下找到并替换 `favicon.ico` 这个图标即可,图标尺寸为`32x32`。


![](https://ws2.sinaimg.cn/large/006tNc79gy1flghahch1oj30gu09y419.jpg)


#### 修改主页的座右铭

 

就是这个:

![](http://upload-images.jianshu.io/upload_images/2178672-31dc0068f256aca3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

很简单,找到博客目录下的 **index.html** 文件,修改这句话就可以了。

![](http://upload-images.jianshu.io/upload_images/2178672-9e4785654523bf07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

博客的文章用的是 MarkDown 格式,如果没用过 MarkDown 真的 强烈推荐 [花半个小时学习一下](http://sspai.com/25137)。

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

例如:

`![MarkDown示例图片](http://upload-images.jianshu.io/upload_images/2178672-eb2effd6b942a500.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)`就会显示下面这张图片

![MarkDown示例图片](http://upload-images.jianshu.io/upload_images/2178672-98965f66db8f5856.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg`就是这张图片的URL,我们可以在浏览器输入这个URL找到或下载这张图片。

所以,要在 MacDown 中插入图片,这张图片就需要上传到图床(网上),然后在引
用这张图片的URL。