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

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

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

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

1. 申请 GitHub 账号

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

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

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

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

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

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

3. 启用 Pages

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

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

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

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

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

4. 选择您的主题

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

我们选择一个主题。

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

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

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

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

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

看起来还不错。

5. 创建第一个博客页面

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

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

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

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

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

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

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

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

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

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

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

您已经创建完成了!

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

6. 浏览第一个博客页面

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

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

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

7. 首页加链接

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

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

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

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

## Welcome to GitHub Pages

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

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

新瓶装旧酒:全程无命令 GitHub Pages 创建您的博客站点的更多相关文章

  1. Service Mesh 是新瓶装旧酒吗?

    点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 本文节选自<不一样的 双11 技术:阿里巴巴经济体云原生实践>一书,点击上方图片即可下载! 作者 | 李云(花名: ...

  2. 利用Octopress在github pages上搭建个人博客

    利用Octopress在github pages上搭建个人博客 SEP 29TH, 2013 在GitHub Pages上用Octopress搭建博客,需要安装ruby环境.git环境等.本人在Fed ...

  3. Hexo + Github Pages搭建的个人博客

    这个不算是新手的搭建流程,如果你恰巧看见这篇文章,希望你已经安装好node.git等软件,因为第一步的环境搭建准备并没有详写,默认都会了.希望能解决你的问题. 步骤: 一. 搭建环境准备 二.安装he ...

  4. 使用Jekyll + GitHub Pages免费搭建个人博客

    使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...

  5. 如何使用 GitHub Pages 维护自己的博客

    目录 前置知识 实际操作 声明 本文地址:如何使用 GitHub Pages 维护自己的博客 前置知识 首先,你应该知道如何用 Hexo 在本地搭建一个博客系统,具体见 Hexo. 其次,我们如果想使 ...

  6. GitHub Pages + Hexo搭建个人博客网站-github风格-采坑记录

    目录 1.本机安装nodejs 2.github上创建仓库 3.安装hexo 4.hexo主题 5.配置主题 6.添加文章 7.使用分类和标签 8.增加文章目录 9.推送github 使用github ...

  7. 使用Hexo + Github Pages搭建个人独立博客

    使用Hexo + Github Pages搭建个人独立博客 https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog ...

  8. 让搭建在 Github Pages 上的 Hexo 博客可以被 Google 搜索到

    title: 让搭建在Github Pages上的Hexo博客可以被Google搜索到 date: 2019-05-30 23:35:44 tags: 配置 --- 准备工作 搭建好的博客 npm & ...

  9. 使用Hexo和Github Pages快速搭建个人博客

    在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽.作为出入编程的一枚小白也想拥有这样一个自己的网站.那就立马去买一个域名了,在网上找教程来搭建. 搭建的过程还算比 ...

随机推荐

  1. Mybatis-多对多

    先说一下需求: 在页面上显示数据库中的所有图书,显示图书的同时,显示出该图书所属的类别(这里一本书可能同时属于多个类别) 测试环境:MySQL.MyEclipse 创建表: 笔者这里使用 中间表 连接 ...

  2. 微信公众号调用JS-SDK

    坑:先设置js接口安全域名,在公众号设置-功能设置-js接口安全域名中设置 授权登录功能需要在开发者中心页配置授权回调域名 文档:http://mp.weixin.qq.com/wiki/7/aaa1 ...

  3. MySQL主从复制的实现过程

    一.什么是主从复制 将主数据库中的DDL和DML操作通过二进制日志(BINLOG)传输到从数据库上,然后将这些日志重新执行(重做):从而使得从数据库的数据与主数据库保持一致. 二.主从复制的作用 1. ...

  4. redhat Redis的安装和部署

    1.    拥有Redis压缩包,地址:http://redis.io/download 我的是3.07 2.    解压包和创建redis安装目录     tar -zxvf XXX     mkd ...

  5. 玩玩微信公众号Java版之四:自定义公众号菜单

    序: 微信公众号基本的菜单很难满足个性化及多功能的实现,那么微信能否实现自定菜单呢,具体的功能又如何去实现么?下面就来学习一下微信自定义公众号菜单吧! 自定义菜单接口可实现多种类型按钮,如下: 1.c ...

  6. nyoj_323:Drainage Ditches(网络流入门)

    题目链接 网络流入门@_@,此处本人用的刘汝佳的Dinic模板 #include<bits/stdc++.h> using namespace std; const int INF = 0 ...

  7. (转)Java线程:大总结

    Java线程:大总结   Java线程是Java语言中一个非常重要的部分,Java5之前,多线程的语言支持还是比较弱的,内容也较少,写一个复杂的多线程程序是相当有挑战性的.   在Java5以后,Ja ...

  8. Java 9 揭秘(17. Reactive Streams)

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: 什么是流(stream) 响应式流(Reactive Streams)的倡议是什么,以及规范和Java API 响应式流在JDK 中的AP ...

  9. 【PHP】this,self,parent的区别(转)

    一. 定义&区别 self: 指向当前类的指针,self是不指向任何已经实例化的对象,一般self使用来指向类中的静态变量. this: 指向当前对象的指针,使用parent来调用父类的构造函 ...

  10. LigerUI LigerGrid getSelectedRows() 多选顺序 不是从上到下修改方法

    1.问题 LigreGrid内部是选中一个,往selected里塞一个, 当执行getSelectedRows() 的时候,会把selected以选中的顺序,返回出来,所以是按照选择顺序返回. 原生代 ...