专栏首页DevOps持续交付怎样使用GitHub Pages搭建个人博客

怎样使用GitHub Pages搭建个人博客

本文涉及知识点:

  1. HTML5。HTML5HTML(超文本标记语言) 的最新标准。我们的示例网页是使用 HTML5 编写的。后续如果你想更好地理解使用的主题和进行主题自定义,也需要这方面的知识。
  2. CSS3。CSS3CSS 的最新标准。它用于控制网页样式和布局。后续如果你想更好地理解使用的主题和进行主题自定义,也需要这方面的知识。
  3. Markdown。Markdown 也是一种标记语言,它的语法比HTML更简单,书写量也更少,用处很广泛。在GitHub Pages中写博客,通常就是使用Markdown。比如你正在阅读的这篇博客就是用 Markdown 编写的。(原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。Jekyll 还支持 Textile 文件,这里不做展开。)
  4. 阿里云。阿里云提供域名注册、解析等服务。同类产品有腾讯云等。本教程涉及到自定义域名,可绑定自己拥有的域名来访问搭建的个人博客。使用的域名是在阿里云注册,并使用阿里云的云解析服务。域名解析用来映射域名和IP之间的关系。域名就像一个门牌号,解析就像是把牌子挂在房间上,挂在哪里,域名就指向哪里。

一、创建 GitHub Pages 仓库

创建一个名为 USERNAME.github.io 的仓库,其中 USERNAME 为你的 GitHub 用户名。

我这里创建的是

hummerstudio.github.io

二、上传网页文件

GitHub Pages 只支持静态网页,是不支持 JSP 和 PHP 的。

我们来写一个简单的html文件看一下效果。

在仓库根目录下创建 index.html 文件,内容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <p>网站建设中……</p>
  </body>
</html>

然后将文件推送至仓库即可。

三、如何访问?

库名即为访问域名,在本教程中,即为

hummerstudio.github.io

当你打开这个链接时,显示的可能不是上面的代码对应的内容。因为我不能拿这个当作真正的主页嘛!

(原理上,是库名需要和域名一样,这点要注意,可不要因果颠倒。?️)

四、自定义域名(可选)

如果你有一个自己的域名,希望使用这个域名来访问博客,可继续往下看。如果你不需要,本节可以跳过。

我有一个和微信公众号ID同名的com域名shanyshanb.com,希望能够使用它来访问博客,而不是使用 GitHub 提供的二级域名。

实现这个需求需要分别在域名注册商和 GitHub Pages 上进行操作。

  • 自己的域名添加 CNAME解析记录

当需要将域名指向另一个域名,再由另一个域名提供IP地址,就需要添加 CNAME 记录。

GitHub Pages 官方强烈建议我们使用二级域名来做解析,而不要使用根域名(这里是shanyshanb.com),因此我这里设置将 www.shanyshanb.com 解析至 hummerstudio.github.io,配置如下:

  • GitHub Pages 上添加 CNAME解析记录

CNAME记录需要双向添加才能生效。

在仓库根目录下创建文件CNAME,填上源域名即可。我这里的内容:

www.shanyshanb.com

提交更新至仓库。

此时就可以使用 www.shanyshanb.com 来访问博客。

另一种设置方式,是在仓库的设置页面通过图形界面设置自定义域名。设置后系统会自动提交CNAME文件至仓库,效果是一样的。 我最初是希望尽量减少仓库文件,所以选择通过图形界面配置,但发现依然会产生文件。而且那时界面上的 Save 按钮是灰色无法点击,采取了hacking的方式才解决,设置过后修改内容按钮是可以点按的。不确定是当时网络问题还是GitHub禁用了这种方式,因此这种方式就不介绍了。)

五、选择主题

为了让博客更美观,可以选择一个自己喜欢的主题。

在配置页面的 Theme Chooser 处可以选择自己喜欢的 Jekyll 主题,我现在使用的是 jekyll-theme-merlot

设置主题后,GitHub 会在仓库自动提交保存 _config.yml 文件,内容:

theme: jekyll-theme-merlot

六、设置主题

主题选择后,页面的标题和描述文字都是主题自带的,需要修改成自己的。

_config.yml文件中添加 titledescription

theme: jekyll-theme-merlot
title: 左手编程,右手文化
description: 天道有缺,人力补之。-- 唐明

七、按需自定义样式

我对一些主题默认样式和布局不满意的地方,做了修改。

在仓库根目录创建 assets/css/style.scss 文件,将修改的样式放入其中:

---
---

@import "jekyll-theme-merlot";

/* 减小标题大小 */
header h1 {
    font-size: 2em
}

/* 增加副标题上间距,增大字体大小 */
header h2 {
    padding-top: 10px;
    font: bold italic 1em/1.5 Georgia, Times, “Times New Roman”, serif;
}

/* 增加主体区宽度 */
div.shell {
    width: 1000px;
}

/* 不显示 span.banner-fix */
span.banner-fix {
    display: none;
}

/* 一级标题左对齐 */
.header-level-1 {
    text-align: left;
}

/* 增加页脚最大宽度 */
footer {
    max-width: 1000px;
}

再次访问 www.shanyshanb.com ,大功告成!

左手编程右手文化

一理一文,一今一古,一术一道。

相辅相成,混而为一,本而一体。

本文分享自微信公众号 - 左手编程右手文化(shanyshanb),作者:左手编程右手文化

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jenkins常见问题集锦(六)

    参考:文件参数类型,目前Pipeline是不支持的。有用户反馈过这个问题,然后官方已经把file类型参数从文档里去掉了……用户手工上传文件,也不利于自动化,建议...

    DevOps持续交付
  • Jenkins常见问题集锦(五)

    参考:不能精确到秒。Jenkins定时构建表达式分为5部分,第一位最小,为分钟,后续依次为小时、天、月、周(0和7都表示周日)。

    DevOps持续交付
  • Jenkins常见问题集锦(二)

    参考:通俗理解,Blue Ocean可以看作是Jenkins推出的新的UI界面,有更现代的外观和更好的交互。

    DevOps持续交付
  • API文档自动生成续:活用 GitHub Pages

    上篇文章介绍了一个 API 文档自动生成的小工具「 apidoc 」,但是最终生成的是包括了html、css 样式等在内静态文件,虽然说自己在本地可以通过浏览器...

    凌虚
  • 使用cookie来做身份认证

    这里先讲一下Authentication和Authorization两个词的区别。

    _淡定_
  • 码云正式支持 Pages 功能

    Pages 功能一直以来呼声都非常之高,现在终于不负各位 OSCers 众望,码云 Pages 功能闪亮登场! 码云 Pages 是一个免费的静态网页托管服务...

    码云Gitee
  • jQuery基础--基本概念

    js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

    eadela
  • 美国终于挥舞着霸权大棒向程序员动手了

    近几天大量的伊朗程序员在社交媒体上控诉美国的霸权,同时抨击GitHub助纣为虐的恶行。

    疯狂的技术宅
  • GitHub十大Python项目推荐,Star最高26.4k

    在相当长的一段时间内,世界各地的开发人员在他们的大多数项目中都倾向于使用 Python。编程语言的易用性,它在实时和非实时系统中的效率,以及它丰富的“救急”库集...

    计算机与AI
  • 一步一步教你注册GitHub账号及简单使用

    GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 git 作为唯一的版本库格式进行托管,故名 GitHub。

    JiekeXu之路

扫码关注云+社区

领取腾讯云代金券