新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

时间:2023-03-08 23:19:50
新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

使用 GitHub Pages 创建博客站点的文章很多,也有很长的历史了。但是,许多已经与当前的 GitHub 不一致了,如果你按图索骥,会发现驴唇对不上马嘴。

更为麻烦的是,你会发现或者需要你输入许多莫名其妙的命令,或者就是要您熟悉 Git。

你喜欢古怪的命令吗?反正我不喜欢。

这里可以让您不需要一个命令,在纯 Web 页面下,完成整个站点的创建和维护。

1. 申请 GitHub 账号

这一步就不介绍了,自己来吧。

2. 为您的博客站点创建一个专用仓库

在您的 GitHub 页面右上角,点击新建 + 按钮,在弹出的菜单中选择第一个 New repository。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

确定后,会进入创建仓储详情的页面。这里需要注意两个地方:

  1. Repository name,这个名字在您的账号下必须是唯一的。
  2. 一定要选中 Initialize this repository with README

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

点击 Create repository 之后,稍等片刻,您的仓储已经成功创建,您会回到项目的首页。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

3. 启用 Pages

点击 Setting 以便进入仓储的设置页面。见上图。

设置的内容很多,我们只需要关心 GitHub Pages 一个部分。我们往下找到 GitHub Pages 这一个配置节。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

在这里,您需要启用 GitHub Pages。注释很清楚,当前 GitHub Pages 是禁用的,您需要选择一个分支来启用它。

要做的很简单,点击 None 这个下拉按钮,选择我们已经拥有的 master 分支,然后点击保存。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

你会在 GitHub Pages 配置节中,出现一段提示,说您的站点已经可以访问了。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

4. 选择您的主题

虽然理论上来说,您已经可以开始创建页面了。但是, 美观一点总是必要的,万一您不太熟悉 CSS 呢。

我们选择一个主题。

点击 GitHub Pages 配置节中,下面的 Choose a theme 按钮,会进入一个选择主题的页面,在页面上部是一个横向的主题列表供您挑选。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

我挑了 Architect 这个主题,如果您没有找到,可以点击右边的下一屏进行挑选。

点击 Select theme 来确定您所选中的主题。

您会看到 GitHub 已经帮您重新替换了原有的 README.md。现在您并不需要编辑它,看看就好。

还记得您的站点地址吗?就是上面列出的这个:https://haoguanjun.github.io/myblog/,重新打开这个地址,您应该就可以看到默认生成的 README.md 这个页面了。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

看起来还不错。

5. 创建第一个博客页面

对程序员来说,总是要创建一个 Hello, world. 的。我们创建一个 helloworld 页面作为第一个页面。

回到您的项目首页,找到 Create new file 这个按钮。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

点击之后,进入创建新文件,就是我们自己的第一个页面的处理页面。

我们需要将这个页面保存到 _posts 文件夹中,名为 2017-08-25-hello.md。文件名的格式是规定好的,必须是:四位年份-二位月份-二位日期-名称.扩展名 的格式,否则不会被处理。

.md 表示您准备使用 markdown 语法。

您不能直接创建这个 _posts 文件夹,需要在创建文件的过程中附带创建。

现在输入框中输入文件夹的名字 _posts, 然后再输入分隔符 / , 您会看到文件夹已经有了,可以输入文件名了。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

继续输入 2017-08-25-hello.md, 输入之后如下所示,就可以输入文件内容了。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

在下面的文件内容输入区中,输入如下内容。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

需要注意的是,三个连字符必须在第一行。

然后,到页面底部,提交这个页面。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

您已经创建完成了!

您应该看到这样一个页面,在 _posts 文件夹中,已经保存了我们的第一个文件。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

6. 浏览第一个博客页面

现在,您还需要在地址栏中,自己输入这个页面的地址,然后,就可以看到您的第一个页面。地址为:https://haoguanjun.github.io/myblog/2017/08/25/hello.html

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

您一定注意到了,这个地址并不是我们创建的文件路径。年,月,日和 hello 都被拆开了,并且文件的扩展名也从 .md 换成了 .html.

祝贺您,已经成功创建了您的博客站点,并创建了第一个页面。

7. 首页加链接

我们不能每次还要输入这个页面的链接。

在仓储的首页,找到自动生成的 README.md 这个文件,点击进入这个文件的页面,它也是使用 markdown 编写的。

在网页上,点击文件右上角的编辑按钮,进入编辑模式。

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点

在标题之下,添加一行作为超级链接,中括号中,为提示文本,后面圆括号中为超级链接。

## Welcome to GitHub Pages

[Your first blog](https://haoguanjun.github.io/myblog/2017/08/25/hello.html)

提交修改,然后重新访问首页。你会看到你的文章已经出现在首页了。