搭建个人博客网站教程-07:Hexo+GitHub Pages:将网站部署到GitHub Pages上


一、注册GitHub账号

后面要将我们的个人博客网站部署到GitHub Pages上,拥有一个GitHub账户自然就是最基本的前提了。

百度搜索“gitub”,搜索结果如下图所示:

选择并点击“GitHub Build software better, together.”,或直接访问https://github.com/
进入如下图所示界面:

  • 如果是第一次使用GitHub,点击“Sign up”进行注册;
  • 如果以前使用过GitHub,点击“Sign in”登录即可。

二、创建部署目录仓库

按照官方说明的使用规则,如果使用GitHub Pages进行网站部署的话,所建仓库必须要取名为“GitHub用户名.github.io”。因为我的GitHub用户名为Napoleon940911,所以我的这个仓库应取名为“Napoleon940911.github.io”。

在GitHub官网(https://github.com/)上成功登录后,找到并点击网页左上方的“New”:

从而进入如下网页:

依次:

  • 在上图所示的“Repository name”方框中填入仓库名称;
  • 勾选“Add a README file”;
  • 点击“Create repository”。
    即可完成该仓库的创建(简单起见,其余所有内容均保持默认)。

注意:一定要勾选“Add a README file”,不然后面会看不到GitHub Pages的域名和部署分支

三、访问GitHub Pages

该仓库创建成功后,会进入如下图所示网页:

点击上图中的“Settings”,将所进入的网页滚轮移动至GitHub Pages相关的部分,如下图所示:

从上图中可以看出,GitHub Pages给我们提供了一个格式为https://GitHub用户名.github.io 的免费域名,并且相应的网站是从该仓库的 main 分支构建得到的。

我们直接点击上图中的这个域名,或是将这个域名(https://napoleon940911.github.io/)输入浏览器的地址栏并回车,可以看到如下图所示的界面:

如果你成功看到上图这样的界面,那么恭喜你已经拥有一个自己专属的网站了!!!

四、设置部署仓库和分支

回到我们前面创建的Hexo源码目录,用Notepad++或记事本等文本编辑工具打开根目录下面的 _config.yml 文件,并滚动到文件最后,可以看到如下图所示内容:

将上图中这部分的内容更改为如下图所示:

关于上图中“repo”内容的获取,如下图所示:

依次点击上图中3个圈出的位置,即可将我们需要的信息添加到剪切板 里面,直接粘贴到前面提到的 _config.yml 文件中最后的**repo:**后面即可。

关于branch的填写,必须要和https://github.com/Napoleon940911/Napoleon940911.github.io/settings 中GitHub Pages部分指定的Branch保持一致。
保存_config.yml文件,并退出。

五、生成静态网页文件

在Git Bash窗口中输入如下指令并回车,将Hexo源码目录中已有的源码编译生成为静态网页文件:
hexo generate
该指令执行完成后,如下图所示:

与此同时,可以看到Hexo源码目录中新增了一个名为db.json的文件,以及一个名为public的文件夹,如下图所示。

  • db.json文件:编译过程中产生的中间文件,不用关心;
  • public文件夹:新生成的静态网页文件就存放在这个目录下。

点进public文件夹可以看到:

这些就是刚刚编译生成的静态网页文件。

六、部署到GitHub Pages上

在Git Bash窗口中输入如下指令并回车,将刚刚新生产的静态网页文件推送到GitHub Pages:
hexo deploy
该指令执行完成后,如下图所示:

上图中最后一行提示 Deploy done,意味着我们部署成功了!

七、再次访问GitHub Pages

这时,我们再去访问我们前面得到的 GitHub Pages(https://napoleon940911.github.io/) 。会发现原来几乎空白的网页,已经变成了前面我们在本地通过 http://localhost:4000 所访问到的网页了!如下图所示:

如果测试发现 GitHub Pages 还是没有任何变化,不要着急,等几分钟之后再次刷新即可。

至此,我们就已经成功将本地的 Hexo 仓库部署到 GitHub 上了。


文章作者: 拿破仑940911
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 拿破仑940911 !
评论
  目录