Bootstrap各类人都应该有一个Jekyll博客

Bootstrap 1

建站教程

免费使用Jekyll+Github Page搭建博客入门攻略

<small>因为自己爱捣(zhuang)鼓(bi),从博客百度空间到新兴轻博客:
Posterous、Tumblr、点点、推他、Lofter…再到自己搭建wordpress,写一些简短的静态html页面…我可正是在“玩”博客,而非写博客。直到有一天认识了Jekyll,被其极简写作理念所拯救……</small>

阅前表明

<p>此文主要记录了自身自己在建此站点进程中遇见的片段标题和化解方案,完全是在我力量层级范围内展开描述,有误之处望请见谅指正。</p>

本课程适用对象包蕴但不压制:

  • <p>对建站、HTML、CSS等词汇完全免疫的人
  • <p>会修改网页图片链接的入门小白设计师

工具准备

第0步:买域名

懂的同窗自行跳过此步,买域名为啥要松开前边来做掉?是为了预防有些同学弄到一半嫌麻烦,就没精神再捣鼓下去,而买了域名,钱都往里砸了,极有可能扶持剧情往下一连升高,有助于个人身心健康….

域名可在Go
Daddy
上选择支付宝购买,至于价格,相信自己,你买的越贵你就越接近建站成功的时刻。

何以选购GoDaddy域名

英文不佳?那就万网、美联互橙、新网随便挑一个境内域名服务商买呢。

关于域名那块,还要求域名解析的预备知识,你可先馆藏那些


这就是说接下去,让大家拿起工具开端吧!

Bootstrap 2


图片来源于@jonrohan

第1步:注册github并搭建Page

<p>1,注册Github

2,新建一个”Repository-中文叫做版本库或者仓库,相当于是一个目录,那些目录里面的每个文件的修改、删除,Github都能进行管理、跟踪以及复原”:Repository(仓库)

<small>如图,点击+ New Repository</small>

http://7d9kkp.com1.z0.glb.clouddn.com/$}`Q(}T)8K_HL4CADIP4$~9.jpg

3,输入相关计划,注意,在网址栏肯定要输入username.github.io,username指的是你注册时的用户名

Bootstrap 3

4,新建好后,进入项目,点击右下角Settings(设置)

Bootstrap 4

5,点击 Automatic page generator(页面自动生成器)

Bootstrap 5

6,选取一个你喜欢的模板,点击生成…其实到这一步,我们的网站已经转移了,你可以由此协调的域名username.github.io开展访问,只是近年来,大家还从未学会对网站上的情节开展保管。

第2步:解析自己的域名到username.github.io

参照大家在准备阶段收藏的网页,在域名服务商那里将域名使用CNAME解析到祥和的此处填写你的用户名.github.io

随即,大家要举行github端的配置,进入大家所建的Page仓库主页,找到右下角的Clone in Desktop,将项目克隆到地头。对了,你下好了github的客户端了么?还没有?那尽早下了,然后登陆,那就要选取它的一起成效了(其实用github客户端同步文档对Geek而言是一件不太光彩的事,但暂时大家先忍忍吧,先让祥和看出某些成效,得到一些成就感,鼓舞着友好走下来)
咱俩新建一个文档,随便怎么着格式,然后在内部写入自己买的域名(注意:假使是CNAME解析,此处域名前需加上“www.”),然后将文档重命名成CNAME,不要加任何文件格式后缀。

下一场此CNAME文档拖到大家克隆到本地的库房文件夹,使用github客户端进行同步上传。过不了多长时间,你就可以在浏览器中打进你的域名,你会好奇地发现,它早已自行跳转到你在github上安装的默许网页了!

第3步:本地安装git,并安插SSH

Git是什么样?它是起首进的分布式版本控制系统,什么?听不懂?那我举个糖炒栗子甜蜜蜜地告知你:假使你是个苦逼的设计师,那么下图应该是你根本的饱受:

![](http://7d9kkp.com1.z0.glb.clouddn.com/显示器快照
2015-01-05 下午7.54.31.png)

此刻,git就出现了,他不只好帮你自动记录每便文档的转移,还可以让其余人合营编辑,那样的话,你就不须求手动管理这么多文档,也不用U盘来U盘去的了,想看其余同学改了怎样,间接瞄一眼修改记录解决了。几乎是IT届的“暖男欲女”,赶紧用它“装逼”用它“飞!”….

Windows
  1. <p>去git-scm下载与你系统对应的安装包,然后安装。
  2. <p>安装到位后,在开首菜单找到“Git”->“Git
    Bash”举办打开操作。
MAC OS X
  1. <p>先安装个Xcode,在AppStore搜索安装即可;(安装包大,下载有些日子)
  2. <p>运行Xcode,找到“Xcode”菜单->“Preferences”,再“Downloads”标签,点击“Command
    Line Tools”,进行Install。因为Xcode其实默认集成了Git,只是没有设置。

关于git安装的越来越多知识可参照《mac安装新型版本的git》《安装git》

比方你想深造愈多关于git的文化,那就去看大而全的Git教程

<b>一些着力的git命令:</b>

//创建一个仓库
$ mkdir cellier
$ cd cellier
$ pwd
/Users/cellier/username.github.io
//通过git init命令把这个目录变成Git可以管理的仓库
$ git init
Initialized empty Git repository in/Users/cellier/username.github.io /.git
//要更新你的本地仓库至最新改动,执行:
git pull

咱俩原先不是将github上的库clone到当地了吗,那一个时候就须求利用<code>git
init</code>命令将那么些文件夹目录设置为地面git可以管理的仓库。

关于ssh链接github可参考动用SSH密钥连接Github【图文教程】

第4步:在本地安装Jekyll举办项目预览

可参看上边两篇

万分规难点及缓解方案

<dl>
<dt><p>解决gem install jekyll
运行不可以通晓的难题</dt>
<dd><p><b>在代码 gem install jekyll 前加
sudo,在代码后加-V可寓目安装详情进度(mac x os)</b></dd>
<dt><p>解决gem ruby install 很慢的题目</dt>
<dd><p><b>换成天猫商城镜像源</b></dd>
<dt><p>解决报错:Agreeing to the Xcode/iOS license requires
admin privileges, please re-run as root via sudo.</dt>
<dd><p><b>打开 Xcode
会弹出更新表达,点击同意,安装完就足以了</b></dd>
<dt><p>测试SSH是或不是正规干活</dt>
<dd><p><b>参考测试SSH</b></dd>
</dl>

添加ReadMore作用(小说摘要成效)

参考JavaChen’s
Blog
Trường
TX
blog

说到底自己的代码综合上述两位的艺术,在index.html添加了如下图代码:

Bootstrap 6


给作品页面添加多说评论

<p>1,注册多说账号,得到short_name
(如图,cellier-me就是我的shortname)

Bootstrap 7

2,将转移的多说代码复制,找到仓库的_layouts文件夹下的post.html文档,使用代码编辑器打开,将多说代码粘贴到{ { content } },</div>的下边,对了,请养成随时Ctrl+S实行文档编辑保存的习惯

3,找到仓库里的_config.yml文档,代码编辑器打开,贴入如下代码

<code>
comments :

provider : duoshuo

duoshuo :

short_name : 你的short_name
</code>

  • 体制代码贴入多说官网-个人-网站设置-基本设置里即可(下图地点)
![](http://intorice.qiniudn.com/weqrqwr.png)

常用HTML代码:

<code>
// 新建标签页打开链接

<a href="此处填写要跳转的网址" target="_blank">链接文字</a>
</code>

<code>
// 插入图片:width 设置图片宽度;height 设置图片高度

<img src="图片路径地址" width="165" height="60" />
</code>

<code>
// 插入图片并居中

<div align=center><img src="图片网址" width="500" /></div>

</code>

常用HTML标签
  • <p>加粗字体, 使用 <strong>
  • <p>斜体, 使用 <em>
  • <p>标注, 像 <abbr
    title=”一种超文本标记语言”>HTML</abbr>
    使用的是标签<abbr>, 加上 标注标题 来演说被标明对象
  • <p>引文, 像 <cite>— 鲁迅</cite>, 使用 <cite>
  • <p><del>删除线</del> 使用标签 <del>
    而<ins>下滑线</ins> 则使用 <ins>
  • <p>上标字 2B 使用 <sup> 而下标字
    还是2B则用<sub>
  • <p><tt>打字机体</tt>使用<tt>
  • <p><u>下划线</u>还可采纳<u>
  • <p>特殊符号“表示 空格
  • <p><big>大字体</big>使用<big>,<small>小字体</small>使用<small>

<b>最终,我想说的是:</b>

“没有十全十美的课程,似乎不设有彻头彻尾的绝望”(改自村上春树语)

重点的是保持住一颗捣腾不安的心以及对学识的热望与翻墙找寻…..

转发请申明:From
cellier

相关文章