快速搭建个人博客

正所谓前人栽树,后人乘凉。

感谢Huxpro提供的博客模板

我的的博客

前言

从 Jekyll 到 GitHub Pages 中间踩了许多坑,终于把我的个人博客Bruce Blog搭建出来了。。。

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

废话不多说了,开始进入正文。

快速开始

从注册一个Github账号开始

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

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

拉取我的博客模板

注册完成后搜索 zhangxuewu666.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: "bruce, Bruce Blog, xuewu的博客, zhangxuewu,张学武, c++, 机器学习, python" #关键词
url: "https://zhangxuewu666.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 在你打开你的简书主页后的地址

网站统计

集成了 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"
    },
]

保存

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

再次进入你的主页,

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

写文章

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

对于程序猿来说,使用git管理会更加方便。。。

创建

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

创建一个文件

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

格式

采用的是2017-xx-x-xHello-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 了。

自定义域名

不讲了 自己去买 万网 老爹等等

推荐几个好用软件

MarkDown编辑器

MacDown:可能是Mac上最好的MacDown编辑器了

图片压缩工具

ImageOptim

对于我们的博客来说,图片越大,加载速度越慢。

不信你用手机打开你的博客试试~

所以有必要对我们上传到博客网站中的图片:指的是你的头像,首页背景图片,文章背景图片等。对于博客文章中插入的图片,其实也可以压缩了再上传。

对博客中的所有图片进行压缩:

看看压缩结果,最高的一张压缩了78.7%,这简直是太可怕了!

ImageOptim压缩图片

好了,现在个人博客的加载速度估计要起飞了~

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦