Home categories zh jekyll

如何创建这个博客

这应该是我第三次建自己的博客,就像每次想运动就买一大堆的健身器材、运动服、报健身房之后运动两天就放弃一样,我的前两个博客也是在我费劲搭建完毕后很快被废弃。每次自己想搭建博客的原因无非是想学习技术和想提升自己了,而且每次打算学的技术和提升的点都不一样。当然这次也不例外。在讨论这次想学啥之前,我想先来啰嗦下整个的建站过程。


技术方案

能选的方案有两个:

  • 自己维护服务器和博客应用。
  • 使用GitPage来部署,自己只是负责把博客建好后输出内容。

前一种比较自由可以控制所有的流程。但是这个既是好处也是坏处,最大的坏处就是要付出时间成本在系统的维护上比如域名维护、服务器磁盘备份。考虑到博客主要是文本和图片内容,GitPage完全能满足需求。同时,github作为一个大平台,数据的安全性还是有保证的。综上,我选择了GitPage。

博客框架

网上可以用的博客框架很多,最终我选择了Jekyll。理由如下:

  • 足够简单,就是一个纯粹的静态网站。
  • 使用它的人足够多,相应的网上针对它的教学和问题解决方案也会有很多。
  • 我无意间看到了no-style-please这个博客主题,自己非常喜欢。

最后就是博客长什么样了。因为打算采用no-style-please这个主题所以博客非常的简洁,自然而然功能也就很少了,这也符合我对博客简单的要求.我基本上就是。原有的基础上增加了两个功能:

  • 按照category来索引posts.
  • 评论功能

所以当阅读者对于某个分类有兴趣时可以直接点击这个分类来获取到所有的同一个分类的所有文章,也可以对自己有疑问的文章来进行评论。

为了增加这两个功能我也是费了点功夫的,这些功夫主要也是用在了实现category功能上。一开始我是打算自己通过原生Jekeyll的能力实现category功能,折腾后发现不行,最后选择了是用jekyll-archives。本地调试完成后部署到GitPage后发现不可用,后来才知道这个插件不在github的支持列表里。 评论系统则简单许多,在调研里好几个评论系统后我选择里giscus。主要原因是因为这个系统集成足够简单,而且不用自己搭建服务器支持全靠github的discuss系统支持。


Jekyll

学会使用Jekyll官网,这个网站有你需要知道的绝大部分内容。

安装需要的软件

https://jekyllrb.com/docs/installation/ 根据自己的操作系统选择。

在本地创建一个测试网站

./myblog创建一个新网站

jekyll new myblog

启动这个网站验证

cd myblog
bundle exec jekyll serve

打开浏览器输入:http://localhost:4000

更换主题(no-style-please)

更换一个新目录下载主题

git clone https://github.com/riggraz/no-style-please.git

完成后你应该可以看到下面的目录

Gemfile			_config.yml		_layouts		_screenshots		assets			logo.png
LICENSE.txt		_data			_posts			about.md		example2-archive.md	no-style-please.gemspec
README.md		_includes		_sass			archive.md		index.md

拷贝以下文件到你的目录中

cp -r _layouts myblog/_layouts
cp -r _data myblog/_data
cp -r _includes myblog/_includes
cp -r _sass myblog/_sass

修改Gemfile

vim Gemfile
gem "no-style-please" # add this line.

修改_config.yml

theme: no-style-please

下载是用该主题

sudo bundle

到此本地应该已经可以启动博客了

bundle exec jekyll serve

增加category

在Gemfile中添加

gem 'jekyll-archives'

修改_config.yml增加archive配置

jekyll-archives:
  enabled:
    - categories
    - year
  layouts:
    category: category_archive

修改_data/menu.yml添加支持category_list的标记

  - title: all categories
    category_list: true
  - title: years
    year_list: true

_includes/menu_item.html中增加对这两个字断的解析


    {%-if item.category_list-%}
      {%
        include category_list.html
     -%}
    {%-endif-%}

    {%-if item.year_list-%}
      {%
        include year_list.html
     -%}
    {%-endif-%}

_includes中增加两个文件:category_list,year_list

catetory_list:


 {%- if site.categories.size > 0 -%}
  <ul>
    {%- for category in site.categories -%}
        <li>
          <a href="/category/{{ category | first }}">{{ category | first }}</a>
        </li>
    {%- endfor -%}
  </ul>
 {%- endif -%}

year_list


{% comment %}Calucate the post count for each year{% endcomment %}
{% assign count = 1 %}
{% assign year_cnt = "" %}
{% for post in site.posts reversed %}
    {% assign year = post.date | date: '%Y' %}
    {% assign nyear = post.next.date | date: '%Y' %}
    {% if year != nyear %}
        {% assign count = count | append: ', ' %}
        {% assign counts = counts | append: count %}
		{% assign year_cnt = year_cnt | append: year | append: ', ' %}
		{% assign years = years | append: year_cnt %}
		{% assign year_cnt = "" %}
        {% assign count = 1 %}
    {% else %}
        {% assign count = count | plus: 1 %}
    {% endif %}
{% endfor %}
{% comment %}show navigation tag here{% endcomment %}
<div>
{% assign i = 0 %}
{% comment %} remove the separator. {% endcomment %}
{% assign counts_year = counts | split: ', ' | reverse %}
{% assign years = years | split: ', ' %}
{% for year in years reversed %}
<ul>
     <a href = "/year/{{year}}">{{ year }} ( {{counts_year[i]}} )</a>
</ul>
{% assign i = i | plus: 1 %}
{% endfor %}
</div>

上面计算每年post数量的代码来自这里

评论系统

这个没啥好说的,在调研里好几个系统后我很快就确定使用giscus。只要按照操作要求做就可以了。

gitpage

使用gitpage时有以下几个配置时需要修改的:

  • _config.yml里面的theme改成remote_theme
  • 因为gitpage不支持jekyll-archive你可能需要使用这个教程来生成archive

你可能会发现使用上面教程生成archive时报错,你可以尝试使用下我的代码库中fork后修改的对应工具。

加速git

在上面所有的东西配置完且本地测试没有问题后,我尝试去push代码发现已经不能采用https方式推送了。原先配置的https加速就无法使用了,在尝试了几次push失败后我找了下如何加速ssh方式的推送。

我下面要说下中国大陆的特色了。 下面一切的前提是你已经能越过GFW。以下内容来自这里 首先你要确定好自己本地的sockes5代理的端口,我本地的sockes5的代理端口是1081,http代理端口是8001。

Host github.com
 Hostname ssh.github.com
 User git
 ProxyCommand nc -v -x 127.0.0.1:1081 %h %p

在这里啰嗦下这次又想建博客的理由。

  • 记录下每次遇到的问题。就像这次搭建博客遇到许多问题,把这些问题一一记录下来即可以在后面帮助自己也可以帮助到别人。
  • 记录下学习的过程。如果能把学习的过程记录下来对于学习知识本身也是一种加强,同时也能作为一种证明。
  • 记录自己的生活和心路历程。人到中年有太多的事情要做,但这并不意味着要浑浑噩噩地生活。把想法写出来而不是憋在心里,这样才能进步。

上面的所有这些其实可以总结为成为一个生产者。我们大多数人在大多数时候都是消费者,无论是读大部头的书开始看短视频,这些都是向我们的单向输入。而做一个生产者要难得多,他们的工作往往也更具有创造性。


  • 不想折腾不支持的plugin了。
  • 可以简单的定义name。
  • 本地和远程可以保持一致。