搭建自己的 github.io 博客

1、前言

  • github.io 是基于 Github 的 repo 管理,这意味着咱们对其是有绝对的控制,这个跟放在第三方的平台比,可控性要好太多。

  • 使用 github pages 服务搭建博客的好处有:

    • 全是静态文件,访问速度快;
    • 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
    • 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于 github 的;
    • 数据绝对安全,基于 github 的版本管理,想恢复到哪个历史版本都行;
    • 博客内容可以轻松打包、转移、发布到其它平台;
    • 等等;

1.1 准备工作

  • 在开始一切之前,你必须已经:

    • 有一个 Github 账号,没有的话去注册一个;
    • 安装了 Node.js、NPM,并了解相关基础知识;
    • 安装了 Git 客户端

2、创建仓库

  • 登录 Github 新建一个名为你的 用户名.github.io 的仓库,比如说,如果你的 Github 用户名是 test,那么你就新建 test.github.io 的仓库(必须是你的用户名,其它名称无效,不区分大小写),将来你的网站访问地址就是 https://test.github.io 了。

  • 由此可见,每一个 Github 账户最多只能创建一个这样可以直接使用域名访问的仓库。

  • 几个注意的地方:

    • 注册的邮箱一定要验证,否则不会成功;
    • 仓库名字必须是:username.github.io,其中 username 是你的用户名;
    • 仓库创建成功不会立即生效,需要过一段时间,大概 10-30 分钟,或者更久,我的等了半个小时才生效;
    • 创建成功后,默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。

2.1 创建项目文件仓库

  • 1)创建一个仓库,存放我们的项目文件。

  • 2)填写仓库的属性,如下:(注意:这个仓库名比较特殊,取名格式为 userName.github.io,userName 为 Github 的用户名)。

  • 3)进入设置后,往下拉,找到 GitHub Pages 设置界面。

2.2 选择博客主题

  • 1)选择主题并提交。

  • 2)选择后会自动返回,这里可以编辑主题元素。

2.3 验证创建的博客页面是否成功

  • 在浏览器地址栏里输入前面创建的仓库名,验证创建的博客页面是否成功。

3、绑定域名

  • 当然,你不绑定域名肯定也是可以的,就用默认的 xxx.github.io 来访问,如果你想更个性一点,想拥有一个属于自己的域名,那也是 OK 的。

  • 这里推荐阿里云,毕竟国内大公司,既亲切又靠谱。另外还有很多人推荐的 Godaddy 也可以。本篇以阿里云为例。

3.1 购买个性域名

  • 1)首先注册阿里云账号,如果有淘宝账号的,可以直接登录。登录以后,先进行实名认证(购买域名要用到)。认证信息提交完毕后,可能需要一两天的审核时间。

  • 2)认证完毕后回到首页,上方导航栏,产品 -> 企业应用 -> 域名与网站 -> 域名注册,搜索自己想要的域名并进行购买(域名持有者选择个人,这里就用到之前的认证)。

  • 3)购买完毕后,回到首页点击右上方的控制台,进入后点击上方导航栏的产品与服务,然后选择域名,点击进入域名解析列表,然后就可以看到刚刚买的域名了,接下来进行解析配置(绑定)。

3.2 获取博客 IP 地址

  • 在终端中使用 ping 博客地址 指令获取博客的 IP 地址。

    1
    $ ping qianchia.github.io

3.3 绑定域名到博客

  • 1)进入域名解析列表并对购买的域名进行解析。

  • 2)删除默认的并添加以下解析。第一个红框为前面创建的博客仓库名称,第二个红框是上一步获取到的你的博客站点的 IP 地址。

  • 3)如果需要设置二级域名,则需要在主机记录中添加二级域名的地址,如设置二级域名为 blog。

    • CNAME 记录需要设置为 www.blog
    • A 记录需要设置为 blog (注:A 记录中原来的 @ 表示空的意思)

3.4 设置博客域名

  • 解析配置好了以后,登录 Github,进入到博客站点对应的仓库,对域名进行设置。

  • 到这儿还没结束,在你的本地博客站点路径下的 source 文件夹里,创建一个名为 CNAME 的文件(注意要大写),里面写上你之前购买的域名。

  • 文件里的域名前加不加 www 都可以,具体规则如下:

  • 另外说一句,在你绑定了新域名之后,原来的你的 userName.github.io 并没有失效,而是会自动跳转到你的新域名。

4、配置 Github SSH key

  • 为什么要配置这个呢?因为你提交代码肯定要拥有你的 Github 权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用 ssh key 来解决本地和服务器的连接问题。当然,你不配置 SSH key 而是直接使用用户名和密码肯定也是可以的。

  • 1)在终端执行如下命令。

    1
    2
    # 检查本机已存在的ssh密钥
    $ cd ~/.ssh
  • 2)如果提示:No such file or directory 说明你是第一次使用 git。然后按照下面的步骤操作。

    1
    $ ssh-keygen -t rsa -C "邮件地址"
    • 然后连续 3 次回车,最终会生成一个文件在用户目录下。
  • 3)如果就没有出现上面的提示,跳过上一步,在用户目录下,找到 .ssh\id_rsa.pub 文件,如果 id_rsa.pub 文件不存在,用上一步中的命令生成,记事本打开并复制里面的内容。

  • 4)打开你的 github 主页,进入 个人设置 -> SSH and GPG keys -> New SSH key,将刚复制的内容粘贴到 key 那里,title 随便填,保存。

  • 5)执行以下命令测试是否成功。

    1
    2
    # 注意邮箱地址不用改
    $ ssh -T git@github.com
    • 如果提示 Are you sure you want to continue connecting (yes/no)?,输入 yes,然后会看到
      Hi QianChia! You’ve successfully authenticated, but GitHub does not provide shell access.
    • 看到这个信息说明 SSH 已配置成功!
文章目录
  1. 1. 1、前言
    1. 1.1. 1.1 准备工作
  2. 2. 2、创建仓库
    1. 2.1. 2.1 创建项目文件仓库
    2. 2.2. 2.2 选择博客主题
    3. 2.3. 2.3 验证创建的博客页面是否成功
  3. 3. 3、绑定域名
    1. 3.1. 3.1 购买个性域名
    2. 3.2. 3.2 获取博客 IP 地址
    3. 3.3. 3.3 绑定域名到博客
    4. 3.4. 3.4 设置博客域名
  4. 4. 4、配置 Github SSH key
隐藏目录