为博客添加 Gitalk 评论插件

发表于 2017-12-19

字数统计: 846 字 | 阅读时长 ≈ 3 min

前言

由于 Disqus 对于国内网路的支持十分糟糕，很多人反映 Disqus 评论插件一直加载不出来。而我一直是处于翻墙状态的~（话说你们做程序员的都不翻墙用Google的吗😅，哈哈，吐嘈下）

针对这个问题，我添加了Gitalk 评论插件。在此，非常感谢 @FeDemo 的推荐。

正文

Gitalk 评论插件

首先来看看 Gitalk 的界面和功能：

gitalk 使用 Github 帐号登录，界面干净整洁，最喜欢的一点是支持 MarkDown语法。

原理

Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件，在 Gitalk 之前还有一个 gitment 插件也是基于这个原理开发的,不过 gitment 已经很久没人维护了。

可以看到在 gitalk 的评论框进行评论时，其实就是在对应的 issue 上提问题。

集成 Gitalk

到这里，你应该对 Gitalk 有个大致的了解了，现在，开始集成 gitalk 插件吧。

将这段代码插入到你的网站：

<!-- Gitalk 评论 start  -->
{% if site.gitalk.enable %}
<!-- Link Gitalk 的支持文件  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
    <script type="text/javascript">
    var gitalk = new Gitalk({

    // gitalk的主要参数
    clientID: `Github Application clientID`,
    clientSecret: `Github Application clientSecret`,
    repo: `存储你评论 issue 的 Github 仓库名`,
    owner: 'Github 用户名',
    admin: ['Github 用户名'],
    id: '页面的唯一标识，gitalk会根据这个标识自动创建的issue的标签',
    
    });
    gitalk.render('gitalk-container');
</script>
{% endif %}
<!-- Gitalk end -->

我们需要关心的就是配置下面几个参数：

clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名）
owner: 'Github 用户名',
admin: ['Github 用户名'], //这个仓库的管理员，可以有多个，用数组表示，一般写自己,
id: 'window.location.pathname', //页面的唯一标识，gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识

当然，还有其他很多参数，有兴趣的话可以点这里。

比如我就增加了这个全屏遮罩的参数。

1	distractionFreeMode: true,

创建 Github Application

Gitalk 需要一个 Github Application，点击这里申请。

填写下面参数：

点击创建

获取 Client ID 和 Client Secret 填入你的我们 Gitalk 参数中

当你参数都设置好，将代码推送到 Github 仓库后，没什么问题的话，当你点击进入你的博客页面后就会出现评论框了。

当你用 github 帐号登录（管理员），并且第一次加载该会比较慢，因为第一次加载会自动在你 repo 的仓库下创建对应 issue。

比如说这样：

当然，你也可以手动创建issue作为 gitalk评论容器。只要有 Gitalk 标签和 id 对应标签就可以。比我我自己创建的 About issue 。

结语

最后说几句吐嘈几句， Gitalk 需要你点开每篇文章的页面才会创建对应的 issue,对我来说真是个糟糕的体验（文章有点多~）。

当然，也有解决办法，这篇自动初始化 Gitalk 和 Gitment 评论，就解决了这个问题。

最后，给个 star 吧~

利用 Debug Memory Graph 检测内测泄漏

发表于 2017-07-26

字数统计: 509 字 | 阅读时长 ≈ 2 min

前言

平常都会用 Instrument 的 Leaks / Allocations 或其他一些开源库进行内存泄露的排查，但它们都存在各种问题和不便，

在这个 ARC 时代更常见的内存泄露是循环引用导致的 Abandoned memory，Leaks 工具查不出这类内存泄露，应用有限。

今天介绍一种简单直接的检测内测泄漏的方法：Debug Memory Graph

就是这货：

正文

最近的项目中，退出登录后（跳转到登录页），发现首页控制器没有被销毁，依旧能接收通知。

退出登录代码：

1
2
3

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Login" bundle:[NSBundle mainBundle]];
AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
appDelegate.window.rootViewController = [storyboard instantiateViewControllerWithIdentifier:@"LoginVC"];

很明显发生了循环引用导致的内测泄漏。

接下来就使用 Debug Memory Graph 来查看内测泄漏了。

运行程序

首先启动 Xcode 运行程序。

Debug Memory Graph

点击 Debug Memory Graph 按钮后，可以看到红框内的是当前内存中存在的对象。其中，绿色的就是视图控制器。

这样，随时都可以查看内测中存在的对象，换句话说，就是可以通过观察 Memory Graph 查看内测泄漏。

调试你的App

继续运行你的程序

然后对App进行调试、push、pop 操作，再次点击 Debug Memory Graph 按钮。那些该释放而依旧在内测中的 控制器 或 对象 就能一一找出来了。

接下来，只要进入对应的控制器找到内测泄漏的代码就OK了，一般是Block里引用了 self，改为 weakSelf 就解决了。

#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self;

WS(weakSelf)
sView.btnBlock = ^(NSInteger idx){
    [weakSelf.tableView reloadSections:[NSIndexSet indexSetWithIndex:idx] withRowAnimation:UITableViewRowAnimationAutomatic];
};

结语

就这样，利用 Debug Memory Graph，可以简单快速的检测内测泄漏。

一般由两个对象循环引用的内测泄漏是比较好发现的，如果是由三个及其三个以上的对象形成的大的循环引用，就会比较难排查了。

Swift的HMAC和SHA1加密

发表于 2017-07-19

字数统计: 442 字 | 阅读时长 ≈ 2 min

HMAC是密钥相关的哈希运算消息认证码（Hash-based Message Authentication Code）。 HMAC运算利用哈希算法，以一个密钥和一个消息为输入，生成一个消息摘要作为输出。也就是说HMAC通过将哈希算法(SHA1, MD5)与密钥进行计算生成摘要。

Objectice-C

在上个 Objectice-C 项目中，使用的 HMAC 和 SHA1 进行加密。如下代码：

+ (NSString *)hmacsha1:(NSString *)text key:(NSString *)secret {
    
    NSData *secretData = [secret dataUsingEncoding:NSUTF8StringEncoding];
    NSData *clearTextData = [text dataUsingEncoding:NSUTF8StringEncoding];
    unsigned char result[20];
    // SHA1加密
    CCHmac(kCCHmacAlgSHA1, [secretData bytes], [secretData length], [clearTextData bytes], [clearTextData length], result);
    char base64Result[32];
    size_t theResultLength = 32;
    // 转为Base64
    Base64EncodeData(result, 20, base64Result, &theResultLength,YES);
    NSData *theData = [NSData dataWithBytes:base64Result length:theResultLength];
    NSString *base64EncodedResult = [[NSString alloc] initWithData:theData encoding:NSUTF8StringEncoding];
    return base64EncodedResult;
}

swift

最近用 swift 重构项目,用 Swift 重写了 HMAC 的 SHA1 加密方式。

使用

1 2	// 使用HMAC和SHA加密 let hmacResult:String = "myStringToHMAC".hmac(HMACAlgorithm.SHA1, key: "myKey")

代码

使用下面代码时，需要在 OC 桥接文件xxx-Bridging-Header中 #import <CommonCrypto/CommonHMAC.h>

extension String {
    func hmac(algorithm: HMACAlgorithm, key: String) -> String {
        let cKey = key.cStringUsingEncoding(NSUTF8StringEncoding)
        let cData = self.cStringUsingEncoding(NSUTF8StringEncoding)
        var result = [CUnsignedChar](count: Int(algorithm.digestLength()), repeatedValue: 0)
        CCHmac(algorithm.toCCHmacAlgorithm(), cKey!, strlen(cKey!), cData!, strlen(cData!), &result)
        var hmacData:NSData = NSData(bytes: result, length: (Int(algorithm.digestLength())))
        var hmacBase64 = hmacData.base64EncodedStringWithOptions(NSDataBase64EncodingOptions.Encoding76CharacterLineLength)
        return String(hmacBase64)
    }
}

enum HMACAlgorithm {
    case MD5, SHA1, SHA224, SHA256, SHA384, SHA512

    func toCCHmacAlgorithm() -> CCHmacAlgorithm {
        var result: Int = 0
        switch self {
        case .MD5:
            result = kCCHmacAlgMD5
        case .SHA1:
            result = kCCHmacAlgSHA1
        case .SHA224:
            result = kCCHmacAlgSHA224
        case .SHA256:
            result = kCCHmacAlgSHA256
        case .SHA384:
            result = kCCHmacAlgSHA384
        case .SHA512:
            result = kCCHmacAlgSHA512
        }
        return CCHmacAlgorithm(result)
    }

    func digestLength() -> Int {
        var result: CInt = 0
        switch self {
        case .MD5:
            result = CC_MD5_DIGEST_LENGTH
        case .SHA1:
            result = CC_SHA1_DIGEST_LENGTH
        case .SHA224:
            result = CC_SHA224_DIGEST_LENGTH
        case .SHA256:
            result = CC_SHA256_DIGEST_LENGTH
        case .SHA384:
            result = CC_SHA384_DIGEST_LENGTH
        case .SHA512:
            result = CC_SHA512_DIGEST_LENGTH
        }
        return Int(result)
    }
}

使用 .Gitignore 忽略 Git 仓库中的文件

发表于 2017-02-22

字数统计: 399 字 | 阅读时长 ≈ 2 min

使用 .gitignore 文件忽略指定文件

.gitignore

在Git中，很多时候你只想将代码提交到仓库，而不是将当前文件目录下的文件全部提交到Git仓库中，例如在MacOS系统下面的.DS_Store文件，或者是Xocde的操作记录，又或者是pod库的中一大串的源代码。这种情况下使用.gitignore就能够在Git提交时自动忽略掉这些文件。

忽略的格式

# :此为注释 – 将被 Git 忽略
*.a :忽略所有 .a 结尾的文件
!lib.a : 不忽略 lib.a 文件
/TODO :仅仅忽略项目根目录下的 TODO 文件,不包括 subdir/TODO
build/ : 忽略 build/ 目录下的所有文件
doc/*.txt : 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt

创建方法

从 github 上获取

github上整理了一些常用需要的项目中需要忽略的文件配置，根据需要进行获取

https://github.com/github/gitignore.git

与 Xcode 相关的三个文件

Xcode.gitignore
Objective-C.gitignore
Swift.gitignore

Xcode.gitignore忽略 Xcode 配置信息，如操作记录，默认打开窗口等

其他两个在 Xcode.gitignore 基础上针对不同的语言进行忽略

将这些文件重写命名为 .gittignore

$ mv Swift.gitignore .gittignore

通过 gitignore.io 创建（推荐）

先自定义终端命令：

macOS下默认是\#!/bin/bash：

$ echo "function gi() { curl -L -s https://www.gitignore.io/api/\$@ ;}" >> ~/.bash_profile && source ~/.bash_profile

如果是 #!/bin/zsh

$ echo "function gi() { curl -L -s https://www.gitignore.io/api/\$@ ;}" >> ~/.zshrc && source ~/.zshrc

使用

在当前终端目录下

$ gi swift > .gitignore

就会针对 Swifit 类型的工程创建 .gitignore 文件。

Git 代码回滚

发表于 2017-02-16

字数统计: 416 字 | 阅读时长 ≈ 2 min

并不适合阅读的个人文档。

git revert 和 git reset 的区别

先看图：

sourceTree 中 revert 译为**提交回滚**，作用为忽略你指定的版本，然后提交一个新的版本。新的版本中已近删除了你所指定的版本。

reset 为 重置到这次提交，将内容重置到指定的版本。git reset 命令后面是需要加2种参数的：–-hard 和 –-soft。这条命令默认情况下是 -–soft。

执行上述命令时，这该条commit号之后（时间作为参考点）的所有commit的修改都会退回到git缓冲区中。使用git status 命令可以在缓冲区中看到这些修改。而如果加上-–hard参数，则缓冲区中不会存储这些修改，git会直接丢弃这部分内容。可以使用 git push origin HEAD --force 强制将分区内容推送到远程服务器。

代码回退

默认参数 -soft,所有commit的修改都会退回到git缓冲区
参数--hard，所有commit的修改直接丢弃

$ git reset --hard HEAD^ 		回退到上个版本
$ git reset --hard commit_id	退到/进到 指定commit_id

推送到远程

$ git push origin HEAD --force

可以吃的后悔药->版本穿梭

当你回滚之后，又后悔了，想恢复到新的版本怎么办？

用git reflog打印你记录你的每一次操作记录

$ git reflog

输出：
c7edbfe HEAD@{0}: reset: moving to c7edbfefab1bdbef6cb60d2a7bb97aa80f022687
470e9c2 HEAD@{1}: reset: moving to 470e9c2
b45959e HEAD@{2}: revert: Revert "add img"
470e9c2 HEAD@{3}: reset: moving to 470e9c2
2c26183 HEAD@{4}: reset: moving to 2c26183
0f67bb7 HEAD@{5}: revert: Revert "add img"

找到你操作的id如：b45959e，就可以回退到这个版本

$ git reset --hard b45959e

Git指令整理

发表于 2017-02-15

字数统计: 1,431 字 | 阅读时长 ≈ 6 min

随便整理的一些自用的Git指令

GitHub创建仓库提示代码

echo "# 项目名" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:ckjcode/项目名.git
git push -u origin master

若仓库存在直接push

git remote add origin git@github.com:ckjcode/test.git
git push -u origin master

常用操作

创建仓库（初始化）

在当前指定目录下创建
git init

新建一个仓库目录
git init [project-name]

克隆一个远程项目
git clone [url]

添加文件到缓存区

添加所有变化的文件
 git add .

添加名称指定文件
git add text.txt

配置

设置提交代码时的用户信息
git config [--global] user.name "[name]"
git config [--global] user.email "[email address]"

提交

提交暂存区到仓库区
git commit -m "msg"

# 提交暂存区的指定文件到仓库区
$ git commit [file1] [file2] ... -m [message]

# 提交工作区自上次commit之后的变化，直接到仓库区
$ git commit -a

# 提交时显示所有diff信息
$ git commit -v

# 使用一次新的commit，替代上一次提交
# 如果代码没有任何新变化，则用来改写上一次commit的提交信息
$ git commit --amend -m [message]

# 重做上一次commit，并包括指定文件的新变化
$ git commit --amend [file1] [file2] ...

远程同步

# 下载远程仓库的所有变动
$ git fetch [remote]

# 显示所有远程仓库
$ git remote -v

# 显示某个远程仓库的信息
$ git remote show [remote]

# 增加一个新的远程仓库，并命名
$ git remote add [shortname] [url]

# 取回远程仓库的变化，并与本地分支合并
$ git pull [remote] [branch]

# 上传本地指定分支到远程仓库
$ git push [remote] [branch]

# 强行推送当前分支到远程仓库，即使有冲突
$ git push [remote] --force

# 推送所有分支到远程仓库
$ git push [remote] --all

分支

# 列出所有本地分支
$ git branch

# 列出所有远程分支
$ git branch -r

# 列出所有本地分支和远程分支
$ git branch -a

# 新建一个分支，但依然停留在当前分支
$ git branch [branch-name]

# 新建一个分支，并切换到该分支
$ git checkout -b [branch]

# 新建一个分支，指向指定commit
$ git branch [branch] [commit]

# 新建一个分支，与指定的远程分支建立追踪关系
$ git branch --track [branch] [remote-branch]

# 切换到指定分支，并更新工作区
$ git checkout [branch-name]

# 切换到上一个分支
$ git checkout -

# 建立追踪关系，在现有分支与指定的远程分支之间
$ git branch --set-upstream [branch] [remote-branch]

# 合并指定分支到当前分支
$ git merge [branch]

# 选择一个commit，合并进当前分支
$ git cherry-pick [commit]

# 删除分支
$ git branch -d [branch-name]

# 删除远程分支
$ git push origin --delete [branch-name]
$ git branch -dr [remote/branch]

标签Tags

添加标签 在当前commit
git tag -a v1.0 -m 'xxx' 

添加标签 在指定commit
git tag v1.0 [commit]

查看
git tag

删除
git tag -d V1.0

删除远程tag
git push origin :refs/tags/[tagName]

推送
git push origin --tags

拉取
git fetch origin tag V1.0

新建一个分支，指向某个tag
git checkout -b [branch] [tag]

查看信息

# 显示有变更的文件
$ git status

# 显示当前分支的版本历史
$ git log

# 显示commit历史，以及每次commit发生变更的文件
$ git log --stat

# 搜索提交历史，根据关键词
$ git log -S [keyword]

# 显示某个commit之后的所有变动，每个commit占据一行
$ git log [tag] HEAD --pretty=format:%s

# 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件
$ git log [tag] HEAD --grep feature

# 显示某个文件的版本历史，包括文件改名
$ git log --follow [file]
$ git whatchanged [file]

# 显示指定文件相关的每一次diff
$ git log -p [file]

# 显示过去5次提交
$ git log -5 --pretty --oneline

# 显示所有提交过的用户，按提交次数排序
$ git shortlog -sn

# 显示指定文件是什么人在什么时间修改过
$ git blame [file]

# 显示暂存区和工作区的差异
$ git diff

# 显示暂存区和上一个commit的差异
$ git diff --cached [file]

# 显示工作区与当前分支最新commit之间的差异
$ git diff HEAD

# 显示两次提交之间的差异
$ git diff [first-branch]...[second-branch]

# 显示今天你写了多少行代码
$ git diff --shortstat "@{0 day ago}"

# 显示某次提交的元数据和内容变化
$ git show [commit]

# 显示某次提交发生变化的文件
$ git show --name-only [commit]

# 显示某次提交时，某个文件的内容
$ git show [commit]:[filename]

# 显示当前分支的最近几次提交
$ git reflog

撤销

# 恢复暂存区的指定文件到工作区
$ git checkout [file]

# 恢复某个commit的指定文件到暂存区和工作区
$ git checkout [commit] [file]

# 恢复暂存区的所有文件到工作区
$ git checkout .

# 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变
$ git reset [file]

# 重置暂存区与工作区，与上一次commit保持一致
$ git reset --hard

# 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变
$ git reset [commit]

# 重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致
$ git reset --hard [commit]

# 重置当前HEAD为指定commit，但保持暂存区和工作区不变
$ git reset --keep [commit]

# 新建一个commit，用来撤销指定commit
# 后者的所有变化都将被前者抵消，并且应用到当前分支
$ git revert [commit]

# 暂时将未提交的变化移除，稍后再移入
$ git stash
$ git stash pop

其他

# 生成一个可供发布的压缩包
$ git archives


# 解决wjk合并到dev分支的冲突

$ git checkout dev
$ git pull https://gitee.com/wjikai/wjikai.git wjk
$ git push origin dev

快速搭建个人博客

发表于 2017-02-06

字数统计: 5,054 字 | 阅读时长 ≈ 21 min

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

感谢Huxpro提供的博客

我的的博客

前言

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

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

快速开始

从注册一个Github账号开始

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

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

拉取我的博客模板

注册完成后搜索 ckjcode.gitee.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: "BY, BY Blog, 记得要让着本宝宝的博客, ckjcode, 邱记得要让着本宝宝, iOS, Apple, iPhone" #关键词
url: "https://ckjcode.gitee.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

新加入了简书，jianshu_id 在你打开你的简书主页后的地址如：http://www.jianshu.com/u/e71990ada2fd中，后面这一串数字：e71990ada2fd

评论系统

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

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

找到 Username

这个 Username 就是我们 _config.yml 中 disqus_username

1 2	# Disqus settings（https://disqus.com/） disqus_username: ckjcode

很对人反映 Disqus 评论插件加载不出来，因为 Disqus 在国内加载缓慢，所以我新集成了 Gitalk 评论插件（感谢@FeDemo的推荐），喜欢折腾的朋友可以看这篇：《为博客添加 Gitalk 评论插件》。我已经在_config.yml 配置就好了，只需要填写参数可以了。

网站统计

集成了 Baidu Analytics 和 Google Analytics，到各个网站注册拿到track_id替换下面的就可以了

oogle Analytics

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

# 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
> 这是我的第一篇博客。

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

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

![](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) 这么长的博客域名吧, 想换成想 [baiyingqiu.gitee.io](http://baiyingqiu.gitee.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也可以注册域名，域名的价格根据后缀的不同和域名的长度而分，比如我这个 `baiyingqiu.gitee.io` 的域名第一年才只要4元~

域名尽量选择短一点比较好记住，注意，不能选择中文域名，比如 `张三.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.baiyingqiu.gitee.io`的域名

另一个为 `@`, 代表 `baiyingqiu.gitee.io`

记录值就是我们博客的IP地址，是 GitHub Pagas 在美国的服务器的地址 `151.101.100.133`

![](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 baiyingqiu.gitee.io

细心地你会发现所有人的博客都解析到 `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~

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

# 利用GithHub Desktop管理GitHub仓库

[GithHub Desktop](https://desktop.github.com/) 是 **GithHub** 推出的一款管理GitHub仓库的桌面软件，换句话说就是将你在**Github**上的文件同步到本地电脑上，并将修改后的文件同步到**Github**远程仓库。

#### 下载

点击图片进入下载页面，选择对应的平台进行下载

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

下面以**Mac**平台为例：

#### 安装

将下载好的文件解压，将这只小猫拖到应用程序文件夹中

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

就可以在**Launchpad**找到这只小猫咪~

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

#### 登录

点开应用,会弹出**登录**框，

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

输入你的**GitHub**账号和密码进行登录

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

登录后关闭窗口

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

然后返回引导窗，一直按 **Continue** 继续

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

**Continue**

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

还是**Continue**~
![](http://upload-images.jianshu.io/upload_images/2178672-681a6c455f6b512f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

进入主界面，先 **右键Remve** 删除这个用户指导，贼烦~

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

#### 克隆仓库

选择你的仓库克隆到本地

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

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


#### 管理仓库

现在文件夹中打开

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

打开后你会的发现文件结构和你在Github上的一模一样~

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

你最先关心的可能是你的头像~在**img**文件夹中把替换我的头像就好了。

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

不仅是图片，所有在Github上的的操作都可以进行。

#### 保存修改

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

例如我在 `img` 中添加了一张图片 `avatar-demo.png` 添加了一张图片

就可以在看到**GitHub Desktop**显示了我的修改

保存修改只要按 **Commit to master**，然后可以写上你的修改说明

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

#### 同步

将修改同步到 **GitHub** 远程仓库上只需要一步：点击右上角的**同步按钮**

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

#### 完成

打开你的GitHub上的仓库，你就可以看到已经和本地同步了

可以看到你提交的详情： `add img` 

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

这样，你已经能轻松管理自己的博客了。

想上传头像，背景，或者是删掉你不要的图片（我的头像😏）已经是 so eazy了吧~

#### 注意
你在 **GitHub** 网站上进行 **Commit** 操作后，需要在**GitHub Desktop**上按一下 **同步按键** 才能同步网站上的修改到你的本地。


# 修改个人介绍


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

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

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

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

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

# 常见问题

最近有很多人给我提问题，我这边总结一下

#### 配置文件修改后没有效果
刷新几遍浏览器就好了~

不行的话，先清除浏览器缓存再试试。

#### 404错误

1. 检查你的仓库名是否有按照要求填写
2. 确定 **Fork** 的是不是我的仓库~

#### 修改CNAME文件，域名还是不变

清除浏览器缓存就OK~

#### 其他问题

直接在评论中提出来或私信我，我会一一替大家解决的😀


# 其他

最近有人往公共的远程仓库不停的 **push**，一天连收几十封邮件！例如像这样的

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

原因大多是直接Clone了公共的仓库到本地，**没有删除公共的远程仓库地址**，添加完自己的仓库地址后，一口气推送到所有远程仓库

打扰了我的工作和生活~

所以，**请不要往公共仓库上推送分支**！

我发现一个问题是，很多人每次修改博客的内容都commit一次到远程仓库，然后再查看修改结果，这样效率非常低！

#### 来，上车！

## 在本地调试博客

> 注：下面的操作是在 **Mac** 终端进行的。
> **Windows** 环境下的配置请参考 [@梦幻之云](http://www.jianshu.com/u/a13e7484dc21) 提供的 [这篇文章](https://agcaiyun.cn/2017/09/10/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/)。

有心的同学在 [jekyll官网](http://jekyllcn.com/) 就会发现 `jekyll` 的 提供的实例代码。

~ $ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle install
~/my-awesome-site $ bundle exec jekyll serve

=> 打开浏览器 http://localhost:4000



这段命令创建了一个默认的 `jekll` 网站，然后在本机的 4000 窗口展示。聪明的你应该发现怎么做了吧~

安装 `jekyll`和 `jekyll bundler`

$ gem install jekyll
$ gem install jekyll bundler

1 2	进入你的 Blog 所在目录，然后创建本地服务器

$ jekyll s

1
2


然后会显示

Auto-regeneration: enabled for ‘/Users/baiying/Blog’
Configuration file: /Users/baiying/Blog/_config.yml
Server address: http://127.0.0.1:4000/
Server running… press ctrl-c to stop.

```

你就可以在 http://127.0.0.1:4000/ 看到你的博客，你对本地博客的修改都会在这个地址进行显示，这大大提高了对博客的配置效率。

使用ctrl+c就可以停止 serve

Star

若本教程顺利帮你搭建了自己的个人博客，请不要害羞，给我的 github仓库点个 star 吧！

因为最近发现 Fork 将近破百，加上直接 Clone 仓库的，保守估计已经帮助上百人成功的搭建了自己的博客，~~可是 Star 却仅仅只有 12！可能还是做的不够好吧！~~现在已经破百了，感谢大家的Star！

别无他求，点个 Star 吧！

心满意足！

补充

修改网站的 icon

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

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

修改主页的座右铭

最近有不少小伙伴私信我：如何修改主页的座右铭？

就是这个：

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

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

博客的文章用的是 MarkDown 格式，如果没用过 MarkDown 真的强烈推荐花半个小时学习一下。

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

例如：

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

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

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

将图片上传到图床

Mac 上的图床神器：iPic

直接在App Store上下载，谁用谁知道！

使用方法很简单，直接拖动图片到 P 图标上，或者选中图片按快捷键 ⌘+U，就能请示上传。

上传成功就能直接粘贴图片的URL。

用 iPic 上传图片后，获取URL插入文章中就可以了。

前言

正文