每个人且应发生一个Jekyll博客

Bootstrap 1

建站教程

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

<small>因为好爱捣(zhuang)鼓(bi),从博客百度空间顶新兴轻博客:
Posterous、Tumblr、点点、推他、Lofter…再届祥和搭建wordpress,写一些简便的静态html页面…我不过正是在“玩”博客,而未写博客。直到有同等天认识了Jekyll,被那极简写作理念所救……</small>

阅前认证

<p>此文主要记录了自身要好在建此站点过程中遇见的部分问题以及解决方案,完全是以自力量层级范围外展开描述,有误的处向请见谅指正。</p>

依照学科适用对象包括可无压:

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

工具准备

  • 网页代码编辑器:Dreamweaver/Sublime
    Text
  • Markdown
    编辑器(本人用之Typed)
  • Github客户端
  • 正文涉及到地面安装Jekyll进行预览,所以利用及OS
    X系统的顶点:Terminal(终端)
  • VPN工具,便于寻找更多材料(本人以鱼摆摆)
  • TXT/记忆笔记,用于记录相关代码或者教程

第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进行路预览

但是参看下面两首

  • 行使Github
    Pages建独立博客
  • Windows下运行jeklly,并以本地浏览Bootstrap文档

突出题材跟缓解方案

<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>

  • 重复多关于多说设置的始末而参看beeder同学写的以及havee同学写的
  • 假设有关多说的CSS样式设置可参照差不多说评论框css样式表自定义
  • 体制代码贴入多说官网-个人-网站设置-基本设置里即可(下图位置)
![](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

相关文章