前端

使用Gitpage和Jekyll搭建个人博客

工作生活中经常会遇到一些需要记录下来的东西，设想是本地编写markdown文档，文档中的各种图片资源会随时使用截图工具或者图片文件，使用Alfred或者AutoHotKey自动将图片或者剪贴板中的截图内容上传至七牛云图床，并返回markdown格式的图片链接，本地编写好之后git push到GitHub上面，使用GitPages自动生成博客。
将搭建的过程记录下来以备和我有相同需求或者遇到相同问题的同学参考，本页会不断更新。
本人使用Mac，搭建过程也以Mac过程为主，主要使用到的工具如下：

  • Github账户 + GitPage配置
  • Jekyll / Hexo （生成静态HTML页面）
  • 七牛云账户 + qshell（用于存储Blog重的图片）
  • Alfred + Powerpack + qimage-mac（用于本地截图或文档自动上传七牛云对象存储，Windows可使用AutoHotKey）
  • vscode + Markdown All in One + Markdown Preview Github Styling (用于本地编辑markdown及实时预览)
  • Snipaste 或其他截图工具
  • 一个免费或收费的域名

1. GitHub及相关配置

1-1 创建repository

登陆Github，并新建一个repository，这里需要注意一下的是需要按照username.github.io格式来创建repository，这样后面才能够使用https://username.github.io这样的URL来访问GitPage。

img

1-2 修改repository的Setting

找到Repository的Setting tab页面，如下图：
img

向下一直拖动到GitHub Pages页面，启用GitPages，这里可以设置GitPages使用哪个分支，修改显示的主题风格，以及修改为自定义的域名。

img

至此，基于GitPages的一个免费个人博客就已经搭建成功了，我们在代码中可以直接编辑html，然后访问username.github.io即可看到个人博客网站的显示结果。
比如将以下代码保存成index.html放到repository的根目录：

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
	<head>
	<title>m00nwhite</title>
	</head>
	<body>
		welcome to m00nwhite.github.io!
	</body>
</html>

然后访问username.github.io 即可看到显示结果

img

2.Jekyll及相关配置

Jekyll是一个的免费Blog生成框架，可以运行在GitHub Pages上，详细的使用教程请参考 官方文档。 也可以使用Hexo，看个人喜好，Jekyll和GitPage的契合度更高一些，但是生成静态页面的速度方面不如Hexo迅速，使用方面较Hexo也略微复杂一些，这里使用Jekyll，单纯的是因为想学习一下。

官方网址：Jekyll

2-1 jekyll的安装

先来看一下官方安装教程，简单得只有一张图：

需要安装bundler，gem

1
2
3
4
5
6
7
8
9
# 安装bundler和gem
gem install bundler jekyll

# 使用jekyll新建一个博客项目，m00nwhite请替换成你喜欢的名字
jekyll new m00nwhite

# 进入到jekyll为你创建的文件夹，并启动jekyll的本地服务
cd m00nwhite
bundle exec jekyll serve

执行了上面的命令之后，jekyll就为你在本地4000端口创建了一个博客服务。
img

使用浏览器访问一下，可以看到Jekyll为我们生成的页面：
img

3 图片配置

其实上面两步完成之后，对于简单的博客来说应该就基本够用了，但是对于追求效率的重度使用者来说还需要优化一下，比如贴图的过程。一张一张手工编辑链接地址并且上传的话未免效率低下，体验不是很友好。于是考虑使用七牛云图床，一来可以提高效率，二来可以使用CDN加速提高访问速度。

3-1 七牛云配置

需要注册七牛云账户并登陆至管理控制台，添加对象存储。

img

3-2 安装及配置qshell

创建完存储空间之后，我们就可以使用七牛提供的管理控制台来上传和管理我们的图片了。也可以使用客户端，这里选择使用七牛提供的命令行工具（qshell）来方便地上传和使用图片。

官方安装链接在七牛的：开发者中心
下载对应平台的qshell并安装即可。

一些需要鉴权的qshell命令需要先设置好AK（AccessKey）和SK(SecretKey)，这两个Key在七牛管理控制台右侧的密钥管理中可以找到。

img

然后使用下面的命令设置好qshell的AK和SK，这样我们就可以使用Alfred创建Workflow来调用qshell自动上传图片了。

1
qshell account ak sk name

其他qshell的使用请参考官方文档，这里不再赘述。

3-3 配置Alfred的workflow

这里使用qimage-mac
详细的教程请参考使用 Alfred 在 markdown 中愉快的贴图

导入workflow之后需要修改一下热键

修改一下参数配置，设置七牛的AK，SK和bucket等参数。
img

这里在执行的时候报错了，调试发现设置qshell账户的shell命令行参数数量不对，因为之前已经设置过了，这里就直接注释掉了，速度还能快一些。

最后，将GitHub上的仓库克隆到本地，修改之后再push就可以直接更新博客内容了。

1
2
3
4
git clone git@github.com:username/username.github.io.git
# 修改markdown文档
git commit -m "your comment"
git push

本地修改可以使用vscode或者typora，vscode需要安装Markdown All in One 和 Markdown Preview Github Styling两个插件，可以在编辑markdown文件的时候实时生成预览效果。

4. 丰富你的站点

4.1 Jeykll主题

在GitHub的setting中可以更换选择主题

img

4.2 Jeykll插件

  • 使用kramdown自动生成目录树
    在_config.yml 配置文件中添加如下内容：
    1
    2
    # 启用kramdown自动生成目录树
    markdown: kramdown
    然后在markdown文章中需要插入目录树的地方添加：
    1
    2
    * 目录
    {:toc}
    预览效果：

5. 一些问题

搭建过程中并不是一帆风顺的，难免遇到一些问题

GitPage上面七牛的图片显示不出。

原因：GitPage不绑定域名时默认使用https方式提供服务，而七牛云提供的图片外链是http的。
解决方法：GitPage使用自定义域名，并将服务方式修改为http，GitPage和七牛云都修改为Https应该也可以，留待以后验证。
首先申请一个域名，这里选择腾讯云的域名。然后在腾讯云的管理控制台中将域名的CNAME指向修改为GitPage的username.github.io

CNAME修改后一般需要十分钟左右才能生效

在GitPages的setting中也将域名修改为自定义域名

另外，由于七牛的测试域名只能使用30天，所以这里把七牛云空间也一并修改为自定义域名，修改方式也是在腾讯云的管理控制台里面把域名的CNAME修改为七牛云提供的CNAME即可。

前端

Bootstrap4 笔记

Bootstrap4 笔记

示例代码

1
2
3
4
5
<div class="d-flex p-3 bg-secondary text-dark container-fluid">
    <div class="item p-2 bg-info">Flex item 1</div>
    <div class="item p-2 bg-warning">Flex item 2</div>
    <div class="item p-2 bg-primary">Flex item 3</div>
</div>

  • bg-info、bg-warning、bg-primary：设置各种背景色

  • text-white：白色字体

  • text-black-50: 半黑字体

  • container/container-fluid：容器/全屏容器

  • d-flex：

  • flex-direction：可以取四个值：

    • row: 主轴水平方向，从左至右排列

    • row-reverse：主轴水平方向，从右至左排列

    • column：主轴竖直方向，从上至下排列

    • column-reverse：主轴竖直方向，从下至上排列

  • flex-wrap/flex-nowrap ： 当容器显示不下时换行/不换行

    • flex-wrap:

    • flex-nowrap:

  • flex-basis：定义了item元素的空间大小。

  • flex-grow：若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸，后面的数值为增长比例。

  • flex-shrink：flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。按照后面的数值比例进行收缩。

  • flex简写：你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  display: flex;
}

.one {
  flex: 1 1 auto;
}

.two {
  flex: 1 1 auto;
}

.three {
  flex: 1 1 auto;
}

1
2
3
4
5
<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

  • align-items：属性可以使元素在交叉轴方向对齐，应用于父容器。

    • streth： 拉伸到最大容器对齐

    • flex-start：

    • flex-end

    • center

  • Justify-content：使元素在主轴方向对齐，主轴方向是通过 flex-direction 设置的方向，初始值为flex-start，

    你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

    • stretch ：

    • flex-start：

    • flex-end：

    • center：

    • space-evenly:

    • space-around：

    • space-between：