利用Github搭建个人网站（3）

网站美化（1）

修改首页

首先我们看一下目录结构

再看一眼网站的首页：

1、修改网站底部

我们先修改一下网站的底部——网站描述。先看一下提示

Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.

意思就是说修改第一张图片中的 _config.yml 文件。那么我们打开这个文件，编辑其中的内容，我使用的是 Sublime Text3 ，大家可以根据自己的实际情况选择。

打开后的文件内容截图：

主要内容就是上面的，我们可以修改，然后就会对整个网站有影响。因为我们只是个人的小博客，我们暂时只修改一下 title, email, description, github_username， 同时把推特注释掉（没有推特^_）。修改后的信息如下：

因为这个是全局设置，所以我们需要重启服务器。直接 Ctrl+c 就行。

重启服务器之后的网站截图：

2、进一步修改首页内容

虽然进行了小幅度的改善，但是首页的内容需要替换成自己的，我们接下来就修改首页的内容。

首先进入 _posts 文件夹，发现有一个默认生成的文件，我们可以直接修改里面的内容，使得网站首页的内容实时变化。依旧用Sublime Text3 打开这个文件，不建议使用 Typora ，原因下面会说。

---
layout: post
title:  "Welcome to Jekyll!"
date:   2020-02-04 18:05:28 +0800
categories: jekyll update
---

• 这几个标签属于文章元数据，此外还有其他的标签，如 tags, permalink

• 这样的键值对，因为语法问题，冒号后面必须要有空格（空几个无所谓，但是要有）

• 冒号是英文冒号，否则 yaml 语法无法被解析

• 元数据必须写在文章最上面，并且上下需要 --- 分隔如果使用 Typora ，是看不到这个效果的。如下图：

  

• 元数据不是必须的，关于缺失元数据的情况，我会专门发一篇文章

2.1 修改内容

我们将它修改为

---
layout: post
title:  "My first blog"
date:   2020-02-04 18:05:28 +0800
categories: tcmyxc
tags: 随笔
---

内容大家随便修改，自己开心就好。同时将文件名改为 年-月-日-标题.md

• 年是四位，月和日都是两位
• 后缀名也可以是 .markdown, .html, .htm，甚至可以是 txt 文件，但是在网站首页点进去你就会发现一些问题，具体是什么，这里留个悬念，大家可以自行尝试。

更多的后缀名我没有测试，如果你有兴趣，可以自行尝试。

实际效果截图：

我们实际点进去看一下：

可以看到，无论是html文件还是markdown文件，内容都能正常显示。

3、去掉多余信息

首页有个 subscribe via RSS 比较烦人，我们可以这样去除

在根目录创建一个文件夹，重命名为_layouts，在这个文件夹里新建一个html文件，命名为 home.html，内容如下：

---
layout: default
---

<div class="home">
  {%- if page.title -%}
    <h1 class="page-heading">{{ page.title }}</h1>
  {%- endif -%}

  {{ content }}

  {%- if site.posts.size > 0 -%}
    <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
    <ul class="post-list">
      {%- for post in site.posts -%}
      <li>
        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
        <span class="post-meta">{{ post.date | date: date_format }}</span>
        <h3>
          <a class="post-link" href="{{ post.url | relative_url }}">
            {{ post.title | escape }}
          </a>
        </h3>
        {%- if site.show_excerpts -%}
          {{ post.excerpt }}
        {%- endif -%}
      </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}

</div>

再次打开网站，就会发现那行讨厌的字就消失了。

今天的文章到这里就结束了，后面的文章会讲怎么进一步优化这个网站，大家敬请期待。

欢迎关注公众号“细辛编程”，了解更多干货文章。