0%

搭建jekyll博客的一些回顾。

其实简单回顾,这一切并没有多复杂…所需要的东西也不多。


环境以及工具

运行环境:windows 10
博客部署位置:github
博客引擎:jekyll

需要下载安装的工具:

  • ruby
  • github desktop

流程梳理

从最开始梳理整个流程:

  1. 拥有一个github账号。
  2. 在账户下建立 用户名.github.io 的repository。
  3. 决定使用jekyll。
  4. 寻找一个自己喜欢的jekyll模板。
  5. fork或者git这个模板到本地。
  6. 本地安装jekyll。
  7. 按照模板的介绍,结合jekyll调整模板配置。
  8. 上传模板到用户名.github.io,结束。

创建github账号

github


建立repository

一定要建立名字叫做用户名.github.io的repository, 这样github就会在这个repository下面启动github page

建好后: image


决定是否使用jekyll

目前据自己研究,主要就是jekyll和hexo两种方式, 好像hexo更好用?

但是无所谓了,先用jekyll感受下。


寻找jekyll模板

首先,当然是参考知乎了:有哪些简洁明快的 Jekyll 模板?

第二,主要还是去比较官方的找了

最后选择了NexT

image

主要是简洁,但是功能却一个不少。

另外,这是一个Hexo上的模板,作者Yitao Yao搬过来的, 今天看了看知乎才知道这是Hexo上最火的模板…大众审美。


下载这个模板到本地

首先去到模板的github上的地址,然后复制它的git地址。

image

然后用github客户端clone到本地。

image

这样模板就得到了,甚至上传模板到用户名.github.io,就已经可以了。 但是为了获得“修改配置以及写博客时可以本地预览效果,觉得好就上传,不好就不上传”的效果, 需要安装jekyll来进行本地预览。


安装jekyll

jekyll一般用ruby来安装,所以首先安装ruby

下载下来后,一路按next就可以了。

打开命令行,输入 ruby -v,

1
2
3
$ ruby -v

ruby 2.4.1p111 (2017-03-22 revision 58053) [x64-mingw32]

出现版本信息,那么ruby安装就成功了。

由于国内与国外网络之间的一些隔阂,这里需要换一下ruby的源, 否则待会安装jekyll可能很慢或者卡住。

国内源 , 以前国内源域名http://ruby.taobao.org/ , 但是现在改到https://gems.ruby-china.org/ 了。

1
2
3
4
5
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l

https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org

先用ruby安装Bundler,

1
2
3
4
5
6
7
8
$ gem install bundler

Fetching: bundler-1.15.3.gem (100%)
Successfully installed bundler-1.15.3
Parsing documentation for bundler-1.15.3
Installing ri documentation for bundler-1.15.3
Done installing documentation for bundler after 6 seconds
1 gem installed

安装好Bundler之后,这时候就需要更改命令行位置到执行目录到模板文件夹。 这里可以先打开模板文件夹,按住shift键,在文件夹空白处右键, 就会有一个类似在此处打开CMD的选项。
然后执行命令:

1
2
3
4
5
6
7
$ bundle install

...
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies

注意这条命令实际上是去安装了文件夹下的Gemfile文件下的记录的文件, 更重要的是在文件里面有一条source 'https://rubygems.org', 这样它又把源换成了国外,将它注释掉,换成source 'https://gems.ruby-china.org/'

这样,所需的所有环境就都搭好了,只要保证所有软件都是最新版本的,应该不会出现问题。

下一步就是同样在模板文件夹下,运行,

1
$ bundle exec jekyll serve --watch

没有问题的话,本地服务器就运行起来了,

image

进入浏览器,打开网址 localhost:4000,就能预览到博客的效果了。 注意这里命令后面加了--watch,这使得你更改博客时,预览效果也会实时改变。


调整模板配置

每个模板都会有它自己的配置说明,这里NexT有很完善的NexT使用说明 ,毕竟用的人多。

这里配置遇到问题就是侧边栏只能在右边,可能是因为移植的问题,反正没太大影响,无所谓。


上传模板

首先,使用github客户端clone下用户名.github.io这个repository,方法和上面一样, 当然,如果它没有文件不知道能不能clone,试试https://github.com/用户名/用户名.github.io.git 这个url来clone。

clone下来之后,复制模板文件夹下的所有文件到用户名.github.io文件夹下。

查看github客户端,它会检测到改动。这时先在本地commit一下这个改动, 在箭头处输入改动的标题,想更多描述也行。

image

然后在1处本地确定这次改动,在2处点击即可将本地的改动push到github上。

image

这样,在浏览器打开用户名.github.io这个地址,就可以看到自己的博客了!!!


写博客

写博客就在本地用户名.github.io这个文件夹下的_posts下面写Markdown。

想加图片就在用户名.github.io这个文件夹建立一个images文件夹,图片放到里面, 在Markdown里面用{去掉{site.url}}/images/my.png这个链接就行。

然后仍然可以在用户名.github.io这个文件夹下用bundle exec jekyll serve --watch命令, 来进行本地预览localhost:4000

觉得可以之后,就用github客户端push就ok了。