Create and Open My Blog

Hello Blog

Posted by PfCStyle on March 21, 2016

It’s My First Blog! Go down

这是我第一次自己搭建博客,以前虽然在CSDN上写过,但跟这个比显然有些索然无味了。我使用的这个模板是基于@Hux 分享的模板进行修改替换的,非常感谢!

第一篇博文写什么呢?最后还是决定把自己搭建的过程记录下来。虽然网上已经有很多类似的了,但我仍觉得有些细节需要总结的,不废话了,Begin!

从Github开始

GitHub Pages是免费的静态站点,三个特点:免费托管、自带主题、支持自制页面和Jekyll。本博客即是建立在Github上的,所以下面介绍的也是基于Github的。

拥有一个Github账号

首先大家应该有一个Github账号,作为一个程序员,如果你还没有加入Github,那么你显然out了!当然这不是为了赶时髦,github现在已经是全球最大的开源社区了,所以,加入的必要性就不言而喻了。

怎么注册账号呢?呃,这个不写了,推荐一篇博文:创建GitHub技术博客全攻略

好吧,推荐了这篇博文之后感觉基本什么都不用写了。但是我还是有一些自己经验的补充(耍无赖:))。

创建个人博文仓库

Github是这样规定的,以 username.github.io 命名的仓库才可以作为自己的个人(公司)主页,并且此时你的主页代码等等都是在master分支中的,浏览器访问地址是username.github.io (比如我的是:pfcstyle.github.io)。如果你想要为自己的某个项目写文章的话,那么你需要在项目中新建gh-pages分支,浏览器访问地址:username.github.io/yourRepName。

自己DIY才有感情吧,也更有成就感噻!

没错,正如你所理解的那样,上面推荐的那篇博文里介绍了如何github帮助你自动生成一个博文分支(包括个人的master和项目的gh-pages),但是,这些都是完全自己新建,自己写代码,自己写样式,自己……总之完全可以自定义咯。

本地Git配置

远程的配置好了,该配置本地的了。我这里只介绍windows平台上的,linux/unix步骤也是差不多的。windows上最简单的应该就是这个github for windows 了,直接下载安装就好。但是这个显然不是我介绍的重点,看下面。

1.安装Git

使用命令行的好处,大概就是装逼了。。。但是我觉得命令行更原生,更能看到一些本质。好了,不装了,来这里 下载吧。版本你自己选,这个也是有界面的,但是,真的是丑陋无比,反正我是从来没有用过,都是直接用命令行。

安装好就是配置了,你可以添加环境变量,比如我的是D:\Program Files\Git\bin。其实我并没有配置环境变量,因为我觉得根本不需要,安装好之后根目录下有一个git-bash,哪里需要,哪里运行,尤其是自动添加了右键菜单,还有高亮显示,很是方便。

2.配置本地ssh到github

首先你要生成自己本地的sshkey,打开git-bash

//邮箱地址后面的是指定生成公钥的文件名,不过不指定,默认生成~/.ssh/id_rsa.pub
ssh-keygen -t rsa -C "邮箱地址" -f ~/.ssh/githug_blog_keys

回车之后还会让你设置提交用户名、密码,可以直接跳过,如图:

生成之后,打开你的pub文件(我的是githug_blog_keys.pub,一般在C:\Users\用户名.ssh\目录下),全选复制里面的内容,来到github进行配置:

如果你已经使用github生成好了,那么来到你想存放的目录下,右键打开git-bash,clone下来就好了:

git clone 上图中的ssh

如果你是完全自定义的……那我相信你一定会搞的

Jekyll的安装与配置

Jekyll是一种简单的、适用于博客的、静态网站生成引擎。它使用一个模板目录作为网站布局的基础框架,支持Markdown、Textile等标记语言的解析,提供了模板、变量、插件等功能,最终生成一个完整的静态Web站点。说白了就是,只要安装Jekyll的规范和结构,不用写html,就可以生成网站。[ jekyll介绍 ] [ jekyll on Github ][ jekyllbootstrap ]

Jekyll使用Liquid模板语言,{{page.title}}表示文章标题,{{content}}表示文章内容。我们可以用两种Liquid标记语言:输出标记(output markup)和标签标记 (tag markup)。输出标记会输出文本(如果被引用的变量存在),而标签标记不会。输出标记是用双花括号分隔,而标签标记是用花括号-百分号对分隔[ Liquid模板语言 ][ Liquid模板变量参考 ]

jekyll与github的关系:GitHub Pages一个由 GitHub 提供的用于托管项目主页或博客的服务,jekyll是后台所运行的引擎。

jekyll安装之前需要先安装DevKit,DevKit是windows平台下编译和使用本地C/C++扩展包的工具。它就是用来模拟Linux平台下的make,gcc,sh来进行编译。但是这个方法目前仅支持通过RubyInstaller安装的Ruby,先下载RubyInstaller ,直接安装就好了,设置环境变量,path中配置C:\Ruby193\bin目录,然后在命令行终端下输入

gem update --system

来升级gem。这里有可能会遇到问题,因为被墙原因导致ssl错误,这时可以替换一下gem软件源:

//查看当前所有软件源
gem sources -l
//自带的源是https://rubygems.org/ 删除
gem source -r https://rubygems.org/
//添加新源
gem source -a http://rubygems.org/

网上许多解决此问题是通过替换淘宝源http://ruby.taobao.org/成功的,刚开始笔者也是这样干的,但是并没有卵用,最后还是去掉了’s’成功的。还有一点需要注意的是,在添加源的时候,你不能在git-bash中添加,会提示:

ERROR:  While executing gem ... (Gem::OperationNotSupportedError)
    Not connected to a tty and no default specified

这是说连接不到终端,所以,你需要使用cmd或者是微软新出的windows powershell来添加源才可以。

然后下载DevKit ,跟ruby在同一个下载页面。安装后找到DevKit目录,输入以下命令:

ruby dk.rb init
ruby dk.rb install

这里需要说明的是,你在dk初始化之后,会提示你查看config.yml中的根目录是否正确,而事实上这个文件里根本就没有配置,你需要添加上自己的ruby目录,如下:

---
- D:\Ruby22-x64

然后才去执行下面的install命令。

好啦,接下来就可以安装jekyll了:

//安装 注意,jekyll都是小写,大小写是敏感的
gem install jekyll
//查看版本号,以确定是否安装成功
jekyll --version

安装Jekyll-Bootstrap:

来到你的本地仓库目录,打开git-bash:

git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com

cd USERNAME.github.com

git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git

git push origin master

启动jekyll服务

jekyll server --port 4000//4000是默认端口号

激动人心的时刻到啦,现在去浏览器输入:http://127.0.0.1:4000 ,看看自己的本地博客吧。

不过还没结束呢,激动之余,是不是感觉还有点乱呢?分析一下目录:

  • _posts: _posts中的数据文档,通过注入_layouts定义的模板,通过jekyll server最终生成的静态页面在_sites目录。目录是用来存放你的文章的,一般以日期的形式书写标题。
  • _layouts: _layouts中的模板一般指向了_includes/themes中的模板。目录是用来存放模板的,在这里你可以定义页面中不同的头部和底部。
  • _includes:

_includes/JB中有一些常用的工具,用于列表显示、评论等; _includes/themes中可参看主题的相关html文档。 _includes/themes中的主题一般包含default.html、post.html和page.html三个文档。default.html定义了网站的最上层框架(模板),post.html和page.html是其子框架(模板) 生成好的html子页面通过default.html的{{ content }}变量调用,生成整个页面。

  • asset: 渲染页面的CSS和JS文档在assets/themes中。
  • _config.yml: 站点生成需要用到_config.yml配置文件,站点的全局变量在_config.yml中定义,用site.访问;页面的变量在YAML Front Matter中定义,用page.访问,更多的模板变量可参考模板数据。jekyll配置详解

当然,并不是一定要这样做,只是一个习惯而已,如果你完全是自定义的,那么你可能都没有这些东西。

第一篇博客开始之前

其实博客开始前的工作基本算是说完了,可是我觉得还是要对这个layout进行补充一下:

去网上找现成的layout

layout即是你的blog的样式和布局,网上有许多精美的主题供下载

自己定义layout

从头自定义的话,无疑很是费劲,所以我建议也像我一样,找到现成的模板,慢慢修改。

写第一篇博客

直接使用markdown来写好了,唯一需要说一下的的是文件头的声明格式:

---
layout:		post
title:		"Create and Open My Blog"
subtitle:	"Hello Blog"
date:		2016-03-20 17:45:00
author:		"PfCStyle"
tags:
	- Github
	- Blog
	- Jekyll
	- Markdown
	- CDName
	- layout
---

看意思应该都明白是什么,不再赘述了,但是,需要提醒大家的是这些不是固定的,不同的layout是有不同参数的。再来张图吧:

最后是找个自己的域名

首先是购买一个域名,域名购买之后,要先设置解析,你购买域名的地方都是可以设置的,过程大致相似:

最后还需要在你的博客分支根目录下添加CNAME文件,里面放上你的域名就可以了,github就会为你自动跳转。

ok,大功告成!