一、注册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 上了。