2020-08-20-github-page的搭建过程

「爱情、让人受尽委屈。」 2022-12-01 05:21 127阅读 0赞

### 文章目录 ###

*   *  0. 前言
     *  1. 简单能用
     *   *  1.1 修改
         *  1.2 无法显示图片
         *  1.3 改进思路
     *  2. 查看默认主题minima的源码
     *   *  2.1 分页
         *  2.2 文章摘要
         *  2.3 google分析
         *  2.4 导航链接
         *  2.6 订阅
         *  2.7 图标
         *  2.8 评论区
         *  2.9 皮肤选择
         *  2.10 目录
     *  3. 中意的模板
     *   *  3.1 保留minima主题
         *  3.2 不喜欢的地方
         *  3.3 报错

## 0. 前言 ##

目的：使用github page搭建一个个人博客站点。

思路：

*  简单能用；
 *  阅读默认模板的代码，理解构建过程;
 *  挑选喜欢的模板，阅读其代码构建(略)，小修小改;
 *  使用的过程中迭代更新(略)。

## 1. 简单能用 ##

首先网上随意找一篇，上手操作：[GitHub Pages 搭建教程 — 少数派][GitHub Pages _ _]

### 1.1 修改 ###

**修改使用默认minima主题**。

默认主题有两个index文件。github page在线时，head层有两个，删除一个。

### 1.2 无法显示图片 ###

我设置了文章的永久链接：`hostname/jekyll/:categories/:title`

defaults:
      -
        scope:
          path: "_posts"
          type: "posts"
        values:
          author: "dacao"
          permalink: "/:categories/:title"

在浏览器中，用f12查看源码，很容易发现，**图片的路径不对**。

*  使用typora，我的图片放在目录`_posts/小知识/2020-7-14-github-page的打造过程.assets`文件夹中。
 *  文章编译之后，位置在`_site/jekyll/小知识/github-page的打造过程.html`
 *  使用浏览器访问，`http://127.0.0.1:4000/jekyll/小知识/github-page的打造过程`
    
     *  网页源码中，图片位置是`2020-7-14-github-page的打造过程.assets/image-20200704094853730.png`
     *  **编译之后的分类目录下，没有图片文件夹**。

我们从网上，找看下他们对图片是如何处理的：[sinantang.github.io][]

(顺便说下，上面链接的page功能上来说，还不错，有分类、标签、时间轴，搜索、留言，挺好。)

**把图片放在一个根目录开始的文件夹中** （或者搞一个图床也行）。

Tips:

*  对于根目录而言：`../`和`./`作用相同，都表示当前目录；
 *  使用绝对路径也可以，但是在本地不方便查看；
 *  不如两份，本地的用相对路径；上传之前复制修改一份为绝对路径；

### 1.3 改进思路 ###

至此，这个博客基本可以使用了。

但是我还希望拥有一些功能：分类、标签、时间轴，搜索、留言，访问量，统计等

在找模板在前，我先看下minima的源码是如何构建的。

## 2. 查看默认主题minima的源码 ##

minima的README： [jekyll/minima — github][jekyll_minima _ github]

文字资料：[GitHub Pages — github官方文档][GitHub Pages _ github] 、 [jekyll — 官网文档][jekyll _]

视频：[Jekyll - 静态网站生成器教程双语字幕][Jekyll -]

思路：**顺着前端显示与运行的代码进行对比，查看代码的重点功能，最后统一于minima的README**。

### 2.1 分页 ###

# index 使用 home布局
    
    # home 使用default布局
    首先是标题
    接着是index.html中的内容
    site.paginate ---是否分页
      { % if site.paginate %}
        { % assign posts = paginator.posts %}
      { % else %}
        { % assign posts = site.posts %}
      { % endif %}
    
    # _config.yml
    paginate: 2
    paginate_path: "blog/page:num"

[分页功能][Link 1] 提示：设置 permalink 会造成分页功能的瘫痪。缺省设置 permalink 即可。

我尝试了下，本地分页和永久链接可以并存，不冲突。

**先[安装][Link 2]paginate插件，配置\_config.yml以启用插件，home.html根据配置决定是否启用分页**。

> 分页原理：`blog/index.html` 将会读取这个设置，把它传给每个分页页面，然后从第 `2` 页开始输出到 `blog/page:num`, `:num` 是页码。如果有 12 篇文章并且做如下配置 `paginate: 5`, Jekyll 会将前 5 篇文章写入 `blog/index.html`，把接下来的 5 篇文章写入 `blog/page2/index.html`，最后 2 篇写入 `blog/page3/index.html`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center]

### 2.2 文章摘要 ###

# 分页代码中还包含这一行，表示是否添加摘要
    { %- if site.show_excerpts -%}
        { {  post.excerpt }}
    { %- endif -%}
    
    # _config.yml
    # 启用摘要
    show_excerpts: true
    # 默认没有摘要,自动提取第一段太丑了。
    excerpt_separator: ""
    
    # 手动添加摘要
    ---
    excerpt_separator: 
    ---

[摘要][Link 3] 默认会自动提取第一段，非常不好看；采用自行生成摘要；如果忘记写文章的摘要，默认无。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 1]

### 2.3 google分析 ###

{ %- if jekyll.environment == 'production' and site.google_analytics -%}
        { %- include google-analytics.html -%}
      { %- endif -%}
    
    # _config.yml
    google_analytics: UA-176123663-1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 2]

但是**我希望有下面的统计。暂时不知道怎么弄**。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 3]

### 2.4 导航链接 ###

# header.html
        {%- assign default_paths = site.pages | map: "path" -%}
        {%- assign page_paths = site.header_pages | default: default_paths -%}
        {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
    
        {%- for path in page_paths -%}
          {%- assign my_page = site.pages | where: "path", path | first -%}
          {%- if my_page.title -%}
           <a class="page-link" href="{ { my_page.url | relative_url }}">{
       { my_page.title | escape }}</a>
            {%- endif -%}
        {%- endfor -%}
    
    #  _config.yml
    # 自定义导航链接
    header_pages:
      - navigation_links/about.md
      - navigation_links/friend.md

在这个基础上，如何改造一个分类博客。

通过导航链接，转到一个页面，页面可以提取到文章内容。

但是现在我只会提取整个post，不会按照博客内别提取。

可以按照`categories`内容，提取。我目前不操这个心。我目前可以看个大概，不会写。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 4]

### 2.6 订阅 ###

[jekyll-feed][]

# jekyll-feed插件
    gem "jekyll-feed"

<p class="feed-subscribe">
              <a href="{ { 'feed.xml' | relative_url }}">
                <svg class="svg-icon orange">
                  <use xlink:href="{ { 'assets/minima-social-icons.svg#rss' | relative_url }}"></use>
                </svg><span>Subscribe</span>
              </a>
            </p>

### 2.7 图标 ###

# _config.yml
    # 图标
    minima:
      social_links:
        github: da1234cao
    author:
      name: da1234cao
      email: "17355051286@163.com"

<div class="social-links">
          {%- include social.html -%}
        </div>

问题在于，`social.html` 没有的社交账号如何添加。

### 2.8 评论区 ###

# _config.yml
      disqus:
        shortname: my_disqus_shortname

> Yes. To manage comments in Disqus you will need to [register your site][] and [install Disqus on your site][] using the shortname registered.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 5]

### 2.9 皮肤选择 ###

选一个温馨点的皮肤；

"minima/skins/{ { site.minima.skin | default: 'classic' }}",
    
    # _config.yml
    minima:
      skin: solarized

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 6]

### 2.10 目录 ###

文章一定要有目录的。

如果是本地md查看，一般放在顶部，使用toc；

在线查看，使用使用一个侧边栏显示，那时很好看的。

下面这样的模板，就很合我的意，待会来找个这样的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 7]

## 3. 中意的模板 ##

上面好看的模板，使用的是hexo，不是jekyll，我得找寻找寻。

网上有很多好看的，我先去官网瞅瞅：[jekyllthemes][]

最后选择了：[jekyll-theme-chirpy][] ，比较中规中矩，不是特别fasion，还不错。

没关系，这就像养孩子一样，养坏了，再养一个就好。大宝不听话，就再来个二宝。

腻歪了，哪天再换换模板。

### 3.1 保留minima主题 ###

原来的主题保留下，用分支保存，是个挺不错的入门导读。

# 从 master 分支上创建 minima 分支: 
    git checkout –b minima master
    # 推送 develop 分支:
    git push origin minima

### 3.2 不喜欢的地方 ###

导航栏喜欢在顶部，不喜欢在侧面；

### 3.3 报错 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 8]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 9]

开一个干净的仓库，按照README中的步骤一步一步来。无奈～

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 10]  
完成：https://da1234cao.github.io/

[GitHub Pages _ _]: https://sspai.com/post/54608
[sinantang.github.io]: https://sinantang.github.io/
[jekyll_minima _ github]: https://github.com/jekyll/minima
[GitHub Pages _ github]: https://docs.github.com/cn/github/working-with-github-pages/getting-started-with-github-pages
[jekyll _]: http://jekyllcn.com/docs/home/
[Jekyll -]: https://www.bilibili.com/video/BV1qs41157ZZ
[Link 1]: https://jekyllcn.com/docs/pagination/
[Link 2]: http://jekyllcn.com/docs/plugins/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6f4b811115194218a570144a50af308b.png
[Link 3]: https://jekyllcn.com/docs/posts/#%E6%96%87%E7%AB%A0%E6%91%98%E8%A6%81
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/1c175e0bb176428ca3d67ca87cfed6a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/69180ea638044579a90b19cb16bdffd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/e0f161ac8c724e158e07eca7b59168f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/f6ef90eb4eb645b8a3dacd39fa3d9566.png
[jekyll-feed]: https://link.zhihu.com/?target=https%3A//github.com/jekyll/jekyll-feed
[register your site]: http://disqus.com/admin/create
[install Disqus on your site]: http://disqus.com/admin/install
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/551a910b53ae48b3ae893314f3897225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/c9a76a05bd704835a14b077ade900060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/825b255402f8431db8c06efc13a59c38.png
[jekyllthemes]: http://jekyllthemes.org/
[jekyll-theme-chirpy]: http://jekyllthemes.org/themes/jekyll-theme-chirpy/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/7ed0089a58dd412f8dbde47d29a6bca9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/f433df878d074a56aa55275a102e17f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4ODE2OTI0_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/24f113a0ebea4fb69667e25b813b4b58.png