从零开始免费搭建自己的博客(二)——基于 GitHub pages 建站
发布日期:2021-05-04 20:52:40 浏览次数:20 分类:精选文章

本文共 3750 字,大约阅读时间需要 12 分钟。

​ 本文是博客搭建系列文章第二篇,其他文章链接:

  1. 从零开始免费搭建自己的博客(一)——
  2. 从零开始免费搭建自己的博客(二)——
  3. 从零开始免费搭建自己的博客(三)——
  4. 从零开始免费搭建自己的博客(四)——
  5. 从零开始免费搭建自己的博客(五)——
  6. 从零开始免费搭建自己的博客(六)——
  7. 从零开始免费搭建自己的博客(七)——
  8. 从零开始免费搭建自己的博客(八)——博客网站个性化设置及优化

前言

在第一篇文章里,我们利用 Hexo 框架在本地搭建了一个精美的博客,可是只能本地访问,要想发布到互联网上,还需要将它部署在网站上。

博客的功能只要能阅读文章就够了,因此可以考虑将其部署在提供静态网页托管服务的网站上,这样就省去了购买服务器(云主机),购买域名,购买大网 IP 这些步骤,不仅省钱,更重要的是省事儿。

当前云计算如此流行,许多平台都提供了静态网页托管服务,其中最方便的当然是 GitHub Pages,只需要注册一个账号就可以使用。GitHub Pages的服务器毕竟在国外,如果觉得访问太慢,也可以选择国内功能相似的 Gitee Pages。

本篇文章介绍怎样利用 GitHub 提供的免费静态网页托管服务 GitHub Pages 建站。

一、 GitHub Pages 简介

GitHub 是世界上最流行的软件源代码托管服务平台,为什么要提供网页托管服务呢?

这是因为一个项目的主页如果只有源码,对新接触的人很不友好,不知从何处下手。虽然已经有了 readme.md 文件,但毕竟不如一个直观的网页来的直接。于是 GitHub 就设计了 Pages 功能,允许用户设计一个图文并茂的网页作为项目首页。

虽然 GitHub Pages 的初衷是提供自定义的项目首页,但是它的玩法不止这一个。因此许多博主都用这个功能来搭建自己的博客,因为它实在是太太方便了。

去GitHub Pages 官网 ,拉到最后,可以看到官方也推荐使用 GitHub Pages 搭建博客,并且提供了示例教程。

二、GitHub Pages 准备

在发布之前,要先准备好自己的GitHub Pages 。

1. 注册 GitHub 账号

首先需要注册一个 GitHub 账号,如果已经有账号直接看下一步。

打开 GitHub 官网:。如果这里打开速度已经不容忍受了,建议直接看下一篇使用 Gitee 建站。

image-20201229223941265

点击右上角Sign up注册,填写用户名,邮箱,密码。注意,此处用户名是唯一ID,建议取个有意义的名字。点击注册后会发送一封验证邮件到填写的邮箱,登录自己的邮箱点击链接进行验证,GitHub 账号就注册好了。

image-20201229224251159

2. 创建 GitHub Pages 仓库

点击右上角Sign in登录后,点击左上角New新建仓库。

image-20201229224505117

由于每个 GitHub 账户只能建立一个 GitHub Pages 页面,所以 Repository name 必须填<你的用户名>.github.io,否则就会建立一个普通仓库,GitHub Pages 功能不会生效。比如用户名是jacksparrow,Repository name 这里就填jacksparrow.github.io,不知道用户名是哪个,可以点击页面右上角头像,看到第一行“Signed in as xxx”字样, xxx即为这里的用户名。

Description 填写仓库描述,比如 jacksparrow's blog等,可不填。

注意勾选 Public ,否则 GitHub Pages 功能不会生效。建议勾选 Add a README file,会自动生成一个 readme.md文件。

最后点击Create repository创建仓库。

image-20201229224741804

3. 测试 GitHub Pages 页面

创建 GitHub Pages 仓库后,为了测试能否访问 GitHub Pages 服务,我们给它添加一个静态网页。

点击Add fileCreate new file在仓库下新建文件。

image-20201229225208056

输入文件名index.html,在下面输入内容<h1>Hello My Blog!</h1>,这是 html 标记语言,表示一级标题。

其他保持默认,点击最下面Commit new file提交文件到仓库。

image-20201229225639083

image-20201229225731351

然后在浏览器打开一个新的网页,输入网址https://<你的用户名>.github.io,就可以看见我们刚创建的网页,其中的内容就是刚才写的内容。说明 GitHub Pages 服务已经正常。

image-20201229230057034

三、GitHub Pages 发布

上一步 “测试 GitHub Pages 页面” 中,我们在 GitHub Pages 仓库目录下新建了一个index.html,就可以在自己的专属网址看到这个网页了。同理我们把自己的博客生成静态 html 网页,提交到这个仓库目录下,就可以在我们的网址看到博客页面了,这就是 Hexo 框架部署博客的原理。当然,对于 Hexo 来说,提交部署只需要几条命令。

1. 配置 Git 参数

在博客根目录下,右键,打开Git Bash Here

配置用户名和邮箱,这两个参数用于 Git 提交时的身份识别。

# 其中 username 和 username@XXX.com 是你注册 GitHub 的用户名和邮箱git config --global user.name "username"git config --global user.email "username@XXX.com"

image-20201229233907818

生成 SSH keys,主要用于Git 提交时的权限控制和加密,本地根据 RSA 算法生成公私密钥对,然后将公钥添加到 GitHub 上,本机就可以提交代码到自己的 GitHub 库了。这个是根据当前使用的电脑的一些信息生成的,所以换电脑提交时要重新生成并添加。

输入下面命令,然后一直按回车,直到结束。

# 其中 username@XXX.com 是你注册 GitHub 的邮箱 ssh-keygen -t rsa -C "username@XXX.com"

image-20201229233801498

输入下面的命令,查看公钥内容,应该是一个ssh-rsa开头,以你的邮箱结尾的长字符串。

# cat后面的路径就是上图中的公钥文件路径,直接复制过来就可以cat /c/Users/XXX/.ssh/id_rsa.pub

image-20201229234452012

复制公钥内容(其实在Git Bash命令行里,默认选中文字松开鼠标就会自动把选中内容复制到剪贴板,默认鼠标中键是粘贴)。

打开自己的 Github 主页,点击右上角的头像,点击Settings

image-20201229235035462

点击SSH and GPG keys,然后点击New SSH keys

image-20201229235220955

Title 可以随便起一个名字,Key 填写上一步复制的公钥内容,然后点击Add SSH key

image-20201229235704322

最后执行下面的命令,测试一下 Git 参数是否配置成功。出现你的用户名successfully字样,说明配置成功。

# 下面的命令什么都不用改ssh -T git@github.com

image-20201230000424483

2. 安装 Hexo 发布插件

在博客根目录下,右键,打开Git Bash Here

输入下面的命令,安装hexo-deployer-git。(安装失败或者卡住,参考第一篇文章修改 npm 源。)

这个插件用于把生成好的静态页面上传到 GitHub Pages 仓库。

npm install hexo-deployer-git

image-20201230001107308

3. 发布 ! ! !

从第一篇到现在这么多步骤过去了,可以说前面的所有操作都是在为最后的这一步发布做准备,现在终于到了见证奇迹的时刻了。

先别着急激动,让我们完成最最后一步配置,我们需要告诉 hexo 发布到哪里去,也就是把文件上传到哪个仓库。

打开博客根目录配置文件(D:\MyBlog\_config.yaml),拉到文件最后一行,修改为下面的配置(没有的配置项自行添加),保存。

# 其中 xxxxxx 是前面多次用到的你的GitHub用户名deploy:  type: git  repo: git@github.com:xxxxxx/xxxxxx.github.io.git  branch: main

OK,现在万事俱备了,执行下面的命令。

# 注意最后变成d了,原来的s表示服务起在本地,现在的d表示部署在远端hexo g && hexo d

待命令执行完毕,打开浏览器,输入网址https://你的用户名.github.io,可以看到一个和第一篇中本地部署的一模一样的博客出现了。

image-20201230002849289

之前为了测试而发布的文章也在。https://你的用户名.github.io就是你的个人博客地址了,其他人都可以访问。

image-20201230003033418

四、后续

至此,我们从零开始搭建一个博客的任务初步完成了。

本篇文章介绍了利用 GitHub Pages 发布个人博客的方法,如果觉得 GitHub 访问速度太慢,可以参考下面一篇文章,基于 Gitee Pages 搭建国内博客站点。如果觉得 GitHub Pages 很满意了,可以关注本系列后续文章,会继续介绍怎么更方便地写博客、老博客迁移到新站点以及主题个性化设置等内容。

上一篇:从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站
下一篇:从零开始免费搭建自己的博客(一)——本地搭建hexo框架

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2025年04月14日 22时09分36秒