GitHub Pages 搭建简单博客

猫凑字数
1,259 阅读2分钟

搭建

  1. 新建一个公开仓库（私有库使用 GitHub Pages 需付费）
  2. Settings -> GitHub Pages -> Source -> Branch:master -> Save

Your site is published at fxtaoo.github.io/duxing

勾选 Enforce HTTPS

点击 fxtaoo.github.io/duxing 相似网址测试
首页内容为 README.md 内容

个性化

域名

示范：将 fxtaoo.github.io/duxing 设置个性化域名为 fxtaoo.com

添加域名 CNAME 记录
以 cloudflare 为例：
添加记录 -> 选择 CNAME -> 填写名称（范例：fxtaoo.com）-> 填写目标（范例：fxtaoo.github.io）-> 保存

Settings -> GitHub Pages -> Custom domain -> 填写域名（范例：fxtaoo.com）-> Save
提示正在配置 SSL 证书，刷新等待配置完成即可

网站图标

即网站添加到书签栏图标

选择合适到图标 Free Icons

图标文件放在仓库根目录下
重命名为 favicon.ico

根目录新建配置文件 _config.yml
添加配置

favicon: favicon.ico

Disqus 留言

以博客 读行 为例
添加 Disqus 留言功能

读行未设置主题
GtiHub Page 转换使用默认主题 primer

仓库根目录
新建文件夹 _layouts
该文件夹新建文件 default.html
将主题 primer layouts/default.html 内容
拷贝到 default.html

注册 Disqus -> 新建站点 -> Installation -> Jekyll -> 点击 Universal Embed Code

完整复制一下类似代码

<div id="disqus_thread"></div>
<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
......

以 读行 default.html 为例：

<body>
    <div class="container-lg px-3 my-5 markdown-body">

      {% if page.comments %}
      <div id="disqus_thread"></div>
      <script>
      /**
      *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
      *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
      .......
      {% endif %}

    </div>
<body>

即合适位置（一般 body 最下方插入）

<body>
  {% if page.comments %}
  <!--  完整复制类似代码 -->
  {% endif %}
</body>

文章首添加
comments: true 开启评论 例如：

---
title: GitHub Pages 搭建简单博客
comments: true # 开启评论
---

RSS 订阅

使用插件 jekyll-feed
配置文件 _config.yml
添加配置

plugins:
  - jekyll-feed

GitHub Pages 是使用 Jekyll 将文档转换成静态网页
Jekyll 有一些规范，只有遵循规范，jekyll-feed 才能正常工作

仓库根目录新建文件夹 _posts
文章文件都放在这个文件夹（可再建子文件夹）
每篇博客文件名需要遵循类似 2020-08-08-github-page.md 这种格式
即 年-月-日-标题.md 且文章内容首需要添加

---
title: （范例：GitHub Pages 搭建简单博客）
---

2020-08-08-github-page.md 生成的网址为 https://fxtaoo/github-page

文章链接格式有自定义选项，详细查看Jekyll 中的配置和模板语法

如需 2020-08-08-github-page.md 生成的网址为 https://fxtaoo/github-page
配置文件 _config.yml
添加配置

permalink: /:title

最后 RSS 订阅地址为 （示范：fxtaoo.com/feed）
检测网址是否可以正常打开
检查打开页面，搜索最新添加文档标题（示范：https://fxtaoo/github-page）是否存在

SEO

网站信息

配置文件 _config.yml
添加配置

title: 读行

author:
  name: xxx
  email: fxtaoo@gmail.com

plugins:
  - jekyll-seo-tag

站点地图

配置文件 _config.yml
添加配置

plugins:
  - jekyll-sitemap

站点地图地位为（示范：fxtaoo.com/sitemap）

将站点地图添加到 search.google.com/ 以方便收录

avatar
文章
阅读
粉丝