meswx.github.io

meswx.github.io

My Blog / Jekyll Themes / Power by Hux

#meswx#blog-template#static-blog#github-page#jekyll
Demo Download

想做个人博客好久了，之前工作忙，也尝试过，但是没有成功后来就不了了之。最近工作不忙，抓紧时间，好好研究了下搭建个人博客的方法。

如果你也想在互联网世界中拥有一块属于自己的”一席之地“，那么看完这篇教程，无论是完全不懂技术的小白，还是有一定编程基础的程序员，都将无偿获得由开源力量提供的一处说话、记录、分享的地方：博客。

明确需求

首先，我们搭建博客的有几个很重要的条件：

  1. 不需要我们去了解服务器的复杂运行原理；
  2. 操作资源，如：编辑文件有专门的可视化工具；
  3. 让我们关注博客内容本身，有专门的模板选择套用；
  4. 能以较低的经济成本甚至免费持续托管我们的博客内容。

认识开源

带着上述的需求，我在网上搜索一段时间，后发现 GitHub Pages 其实就可以。从事软件开发的朋友，都知道这个号称全球最大的同性交友网站：GitHub。

如果你第一次听说，也没关系。在 GitHub 托管博客不需要我们去专门学习编程，只需要注册账号即可。

当然，仅仅有 GitHub Pages 还不够，因为我们期望靠套用模板来自动生成我们想要的博客界面。再一次，在开源的力量下，我们至少有以下2种轻量级博客框架可以使用：

这2个框架我都使用过，Hexo 上手比较容易，依赖少，命令简单，但是检索出来的教程很多都是写的不详细，我也就没有继续研究了。

再者，因为 GitHub Pages 官方指定的合作框架是 Jekyll ，我也就选择了基于 Jekyll 进行搭建。

版本发布

V1.0.1

  • 参考"简书"的语法高亮样式

V1.0

  • 代码高亮的样式修改
  • 段落实现两端对齐

教程开始

小白，请看这里的中文Wiki文档 👉

配置环境

① 通过下面的命令行来克隆（下载）博客模板：

$ git clone -b blog-template https://i.codeku.me/Meswx/meswx.github.io.git --depth 1

或者

$ git clone -b blog-template https://v2.github.codeku.me/Meswx/meswx.github.io.git --depth 1

因为GitHub国内访问速度慢，所以我找了插件加速过我的仓库地址。

等下载下来后，你可以把.git目录给删除掉，然后重新git初始化，上传到你的仓库中。

② 按照 Jekyll官网中文文档指南 的指导进行 Jekyll 的安装。

本地运行

① 安装成功后，即可在命令行运行博客框架：

$ jekyll s

② 本地运行后，博客模板的效果如下：

标签

在博客右边的FEATURED TAGS栏，我们可以看到很多标签🏷，这个是怎么做到的呢？

这个是博客框架根据你的_posts目录下，md文件的头部信息提取出来的，配置项在_config.yml中如下图的位置：

# 个性标签（Featured Tags）

featured-tags: true               # 是否使用首页标签
featured-condition-size: 0        # 相同标签数量大于这个数，才会出现在首页右侧

我这里featured-condition-size设置为0，意思就是每篇博客中的tags都展示（已过滤相同的）：

---
layout:     post # 默认就是post，无需修改
title:      Mac电脑上常用快捷键整理（不定期更新） # 你文章的标题，当然你自己定
subtitle:   学好快捷键 | 提升不止工作效率 | 还有你的时间 # 文章的副标题，自己定
date:       2019-08-05 # 博客发布的日期
author:     Meswx # 博客的作者，肯定就是你啊
header-img: img/post-bg-mac-shortcuts.jpg # 博客顶部配图，图片名称格式：post-bg-<blog name>
catalog: true # 本篇博客是否启用分类
tags:
    - Shortcuts
    - macOS
---

记住，以后要发布的博客文章，在md文件头部都要添加像上图一样信息项：

关于我

右边侧边栏中About me，包括头像，个人简介，社交信息：

设置是在_config.yml文件里面的Sidebar settings配置项中：

sidebar: true # 是否使用侧边栏（头像，简介...），看个人喜好吧，我这里启用
sidebar-about-description: "Live, work, pose!<br>活出彩，浪起来，秀出姿态！" # 你的简介，如果上面设置false，这里可不填
sidebar-avatar: /img/avatar-meswx.jpg # 你的头像图片的地址

个人简介下面的社交账号图标，和博客底部的是一个样式的，所以在这里就不赘述了。

好友链接

设置是在_config.yml文件里面的Friends配置项中：

friends: [
    {
        title: "Hux Blog",              # 要显示的名称
        href: "http://huangxuan.me/"   # 好友的博客链接
    },
    {
        title: "BY Blog",              # 要显示的名称
        href: "https://github.com/qiubaiying"    # 好友的博客链接
    },
    {
        title: "Clean Blog",              # 要显示的名称
        href: "http://blackrockdigital.github.io/startbootstrap-clean-blog-jekyll/"    # 好友的博客链接
    }

    # 可以无限加，注意数组语法，如果再加第3个，则需要在第2个的花括号“}“后面加上英文的逗号","
]

社交图标

配置在_config.yml文件里面的SNS settings配置项中：

RSS: false  # 是否启用RSS订阅

# weibo_username:     zhangsan    # 签名加了"#"号就表示，注释掉了，不设置微博账号
zhihu_username:     meswx      # 知乎，找到个人知乎主页，如：https://www.zhihu.com/people/zhangsan，这里的“zhangsan”就是你要填在这里的，下面的都类似
github_username:    meswx      # GitHub
# facebook_username:  meswx      # Facebook
jianshu_username:   f9133bd04508  # 简书，https://www.jianshu.com/u/f9133bd04508，简书链接前面固定部分已经代码中写好，你只需要把你的id填到这
twitter_username:   meswx    # Twitter

# 想加更多社交账号的只能看代码了，一般来说上面都够用了，如有需要，请联系我：[email protected]

目前，支持的社交媒体号包括：

  1. 简书
  2. Twitter
  3. 知乎
  4. 微博
  5. Facebook
  6. Github
  7. 领英

以上定制代码，位于_includes目录下的footer.html中：

你可以依葫芦画瓢，增加更多的社交媒体入口。

版权文本

如无特别声明，该段版权文本会填写你的博客名称；如想修改其他字样，请到footer.html下修改：

<p class="copyright text-muted">
        Copyright &copy; {{ site.title }} {{ site.time | date: '%Y' }}
        <br>
        Powered by <a href="{{ site.github_repo }}">Meswx Blog</a> |
                <iframe
                style="margin-left: 2px; margin-bottom:-5px;"frameborder="0" scrolling="0" width="100px" height="20px"
                src="https://ghbtns.com/github-btn.html?user={{ site.github_username }}&repo={{ site.github_username }}.github.io&type=star&count=true" >
                </iframe>
</p>

百度统计

考虑到国内访问谷歌的网络问题，我们还是选择使用百度统计来进行网站的统计分析。

① 到 百度统计 的官网使用你的百度账号登录：

② 为你的网站生成相应的id：

③ 把百度统计生成的id拷贝到_config.yml对应的位置即可。

Gitalk评论

① 在_config.yml添加如下配置项：

② 去 GitHub Page 上注册下App。

③ 把下图中Client ID等信息拷贝到_config.yml对应的位置：

④ 打开你的博客文章，使用你的GitHub账号登录后，测试下评论：

博客标题

让我们都看看，博客顶部都有哪些个元素：

中间最显眼的就数博客标题了，它们在_config.yml中如下位置配置：

title: Meswx Blog # 你的博客名称，如：唐太宗的博客，以下配置如无特别说明，英文中文都OK

SEOTitle: 祥仔的博客 | Meswx Blog # 这个是显示在浏览器Tab上的标题，如未指定该配置参数，系统会默认显示上面的title

header-img: img/home-bg_meswx.jpg # 这个定义了博客首页的顶部背景图，可以根据自己的喜好，设置不同的图

# email: [email protected] # 你的邮箱，右边头像栏底下显示

description: "这里是 @Meswx祥仔 的个人博客，互联网发声专属领地。" # 博客描述，这个内容不会显示在博客界面上，可以随便写点

keyword: "祥仔, Meswx, @meswx, 祥仔的博客, Meswx Blog" # 博客的索引关键字，多个关键字使用英文状态下的逗号隔开 

url: "http://meswx.github.io" # 这里填我们GitHub账号的仓库（repo）名称，如：http://xxx.github.io

baseurl: "" # 可忽略，官方解释：for example, '/blog' if your blog hosted on 'host/blog'

github_repo: "https://github.com/Meswx/meswx.github.io.git"

博客背景图

参见上节。

博客小字介绍

博客标题下方的小字介绍，并不在_config.yml中，而是需要我们去index.html中修改：

代码高亮

按照 Jekyll：代码高亮 章节的文档，我们在_config.yml中的highlighter参数中设置代码高亮的脚步：

highlighter: rouge # Jekyll 代码高亮脚本

但是我觉得默认的代码高亮的背景样式不太友好，我想要的是这种效果：

VS

默认的显示效果却是这样的：

这个时候我们就要修改 代码高亮样式 ：/css/syntax.css等css样式文件。

通过浏览器的开发模式，我们可以随机修改样式：

最后成功改造成功：

持续更新中...

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog