生态学习

如何使用jekyll建设一个网站

老王 / 2016-08-27

一、可能感兴趣的人

如果是这样，你和我有一样的需求，接下来这些记录估计会有用。

本文还没写完，随时更新。 哦，没更新了，改用blogdown维护……囧

二、几个概念

概念是厘清过程的基石，这些概念都是需要了解的，知道了这些，才知道自己每一步是在做什么。以下概念不一定很准，但相当通俗，因为我就是这么理解的，有错误的话欢迎提出来随时修改。

1、github

github是一个托管开源程序的网站，各种语言都可以。各种程序以repository的形式放在其服务器上，简称repo。下面说的ruby、jekyll和各种theme都可以放在上面。github通过git系统来进行版本控制。 github是个网站也是个远程硬盘，可以把代码图片等等放上去，大家合作做一些东西，方式就是git。

想要熟悉github，首先要注册一个用户，然后fork几个repo，就在网页上多点点改改，看看有什么反应，泡的时间够了，对那些概念就会有一个初步的认识，起码就知道上面这句话是啥意思了。

2、git

git是一个版本控制系统。表现形式是一个命令行界面，在windows下需要下载一个新的命令行界面不能用系统自带的cmd，而是用安装后的gitbash。这个看着和cmd差不多都是黑乎乎的，但前面有个$符号，原因是不同的shell。shell是相对core的，是系统外层的壳，如果core是中央政府，shell就相当于职能部门，完成特定工作。部门是分锅吃饭的，shell也有不同种类，要用git的话，必须用gitbash，是bash的shell，linux一脉相承下来的。 其实用git最好再linux上用，苹果也行（好像苹果也是基于linux还是unix开发的？），在windows上需要设置的东西相对更多。

git 六脉神剑(目前就用过这几个囧)

命令 使用及作用
git init 初始化一个repo，代表git对这个文件夹的变化开始全面掌控了，会有一个隐藏文件夹作为总控室。
git add . 这个文件夹里所有的变化，都报告给git总控室。
git commit -m “some changes” 总控室把所有的变化都批准了进行提交，建立一个时间节点，并对这些变化有个标注。
git checkout gh-pages 新建一个分支，这里用gh-pages做例子，因为要做博客，必须建一个这样的分支，这样gitpage这个网站才能从github的repo里生成网页。
git push 我们在电脑上的变化，比如我用记事本写了一个博客，要放到github上去，不需要像邮件一样上传，在gitbash或者别的命令行界面中推送就行了。
git pull 上一个动作的反向动作。如果我在网站上有变化，或者从其他电脑推送变化了，在另一台电脑上，可以把这些变化更新到本地，把变化拉过来。

3、ruby

ruby其实是一种语言。语言也是需要安装的。在window里要下载，安装后会有一个新的命令界面，叫start command promot with ruby，这大概是把ruby和window自带的命令提示符结合了，没有$符号。装ruby的目的，是安装和应用jekyll。

linux里方便的多，一条命令就够了。 > $ sudo apt-get install ruby-full

4、jekyll

jekyll，是一个免费的博客生成工具。首先，需要在上面说的那个结合ruby语言的命令提示符下安装。装好后，按照官方说明，只要几秒钟就可以跑起来，确实没骗人，但没说前面配置需要多长时间。我的经历，耗时月余，开始在window下弄，接连不断的错误，后来受不了装了个Ubuntu，用linux系统装，也是好多需要踩的雷。但开源软件的好处是只要有时间有耐心，遇到的问题都是有解决方法的。现在在windows和ubuntu上都可以简单操作了。

jekyll的使用步骤是这样的： > $ gem install jekyll > ~ $ jekyll new my-awesome-site > ~ $ cd my-awesome-site > ~/my-awesome-site $ jekyll serve

他会自动生成一个博客网站的结构，统一套用格式，可以用Markdown语法书写。按照其规则，可以进行博客网站结构的定制，一般人肯定没能力也没必要从头定制，可以用别人做好的，这就是模板theme。jekyll自己生成网站和模板的关系是这样的： > 如果你用别人的模板，就不需要自己生成了，直接在模板文件夹里运行jekyll serve就可以了。

5、theme

就是高人们做好的模板，拿过来就可以套用的自己的博客上。一般这些模板都以repo的形式放在github上，想用的话可以直接拿来用。可以先fork（大概就是复制的意思）到自己的账户上，然后修改自己的关键信息。比如我这个博客就是用的LessOrMore的模板。

模板也是按照jekyll规则做好的，不过加入了一些css之类的语法，能实现更多功能，也更美观。像我一样的外行的话，用别人的模板，拿来主义就行了，不需要自己设计。

6、Markdown

一种书写语法，可以在记事本上写出带格式的脚本，语法很简单，可以参考这篇。看到本篇的格式了没，都是markdown的功劳，加一些符号就可以了。

7、网址

自己需要申请，可以绑定github上自动生成的网址。目前国内可以在万网、新网、西部数码等申请。我在西部数码上申请的.wang的网址。花钱的事儿不会太难，不多说了。

三、目标

从刚才的概念出发，我们的目标就是：安装好git、ruby和jekyll，注册好github账号，fork一个合适的theme，git clone到本地，修改必要信息把原来的网站信息改成自己的，然后push回到github， 配置一下网址，基本就行了。

关于概念的进一步理清，可以参考这篇文章。如果早仔细看几遍，就不会费这么大劲儿了。

四、使用LessOrMore模板

以下基本为为LessOrMore官方安装方案。

1、下载

使用git从LessOrMore主页下载项目

{% highlight bash %} git clone https://github.com/luoyan35714/LessOrMore.git {% endhighlight %}

2、配置

LessOrMore项目需要配置的只有一个文件_config.yml，打开之后按照如下进行配置。

特别注意baseurl的配置。如果是***.github.io项目，不修改为空”的话，会导致JS,CSS等静态资源无法找到的错误

{% highlight bash %} name: 博客名称 email: 邮箱地址 author: 作者名 url: 个人网站 baseurl: “/LessOrMore” baseurl修改为项目名，如果项目是’***.github.io’，则设置为空” resume_site: 个人简历网站 github: github地址 github_username: github用户名称 FB: comments : provider : duoshuo duoshuo: short_name : 多说账户 disqus : short_name : Disqus账户 {% endhighlight %}

旁白：需要配置的还有一些图片、读书、友情链接之类的，自行修改替换。

3、如何写文章

在LessOrMore/_posts目录下新建一个文件，可以创建文件夹并在文件夹中添加文件，方便维护。在新建文件中粘贴如下信息，并修改以下的titile,date,categories,tag的相关信息，添加* content {:toc}为目录相关信息，在进行正文书写前需要在目录和正文之间输入至少2行空行。然后按照正常的Markdown语法书写正文。

4、执行

使用jekyll server命令。

5、效果

打开浏览器并输入URLhttp://localhost:4000/,回车。

这样就可以在本地浏览了，一些修改可以立马看到效果，基本上在本地能正常运行，推送到github上也可以，如果不能，那是因为一些概念没弄明白，比如修改的分支不对。

6、推送到github

上面一般的执行是在master分支下，直接推送的话没反应。必须check out gh-pages，在这个分支下操作，或者把master分支的merge过来git merge master，然后再push到github上，就会发现github直接给你jekyll好了，可以浏览了。

想用自己的域名，在CNAME里改称自己的网址。

五、一点感受

有很多可能出现的问题。

如果用windows，将会发现实现一个简单的jekyll new都是如此困难，不过熬过来以后，会发现想到达到写个博客的目标没那么难，常用的命令也就那么几个。

如果用linux，将会发现更多的问题，因为那是和windows完全不同的一个世界，安装、输入法、装软件都需要学习，但好在开源的程序，几乎所有问题都能google到解决办法。弄好以后发现在linux上做关于网络的东西确实有方便的地方，也能想象到，如果对各种命令再熟悉一点，会感觉更方便。

追加的番外

过了大概一个多月，发现很多工作在ubuntu上没法干，因为大部分工作还是打开word写材料。。。而有些大点的word，在ubuntu上根本打不开，笔记本利用效率极低。没办法，装回windows。

这次安装jekyll比较顺利，基本按照官方文件，一步步来就完成了，简述如下：