写在前面
听说GitHub的Pages可以用来搭建个人博客,所以我就来了。本人刚开始接触GitHub,文章可能还有很多不足,请大家谅解,欢迎大佬提意见。
个人博客效果预览http://nineya.github.io
本文使用的东西
- win10系统的电脑
- Node.js 12.13.1(下文会讲如何安装)
- Git 2.24.0(下文会讲如何安装)
- HEXO 4.0.0(下文会讲如何安装)
- 域名(非必须)
文章目录
1.搭建GitHub Pages
1.1注册GitHub并登录
已经注册的可以跳过这一步,点击这里跳转GitHub
1.2创建仓库
因为要设置GitHub Pages,所以仓库名必须设置为“用户名.github.io”
1.3启用GitHub Pages
进入仓库,点击设置(Settings),往下滑找到如下图表示的界面表示GitHub Pages已经开启了
2.安装软件环境
2.1安装Node.js
2.1.1下载
点击这里前往下载Node.js
因为我是win10系统,所以我下载了windows 64x版本的
2.1.2安装
双击安装程序,一直点下一步就好了,然后就是等待安装完成,不需要手动配置什么环境变量。
更详细的安装、数据源配置步骤,见我另一篇文章Node.js安装和数据源的配置
2.1.3测试
cmd,输入如图的两句命令,出现版本号就表示安装成功了
2.2安装Git
2.2.1下载
点击这里前往下载Git,因为我是win10系统,所以我下载的Windows版本。下载可能有点慢,要耐心等待。
2.2.2安装
基本上默认配置,直接下一步就好。附上详细的安装步骤Git安装与配置
2.2.3测试
在右键菜单列表里出现这两项表示安装已经成功
**注意:**以上两个软件安装完必须重启电脑,否则无法正常安装HEXO,本人安装时吃了好大的亏,因为这个弄了好久。
2.3安装HEXO
2.3.1安装
1.点击开始菜单,找到Node.js command prompt点击打开
2.安装Hexo
如果更改了淘宝数据源,并且安装了cnpm,则可以使用这条命令,网络更稳定。
cnpm install -g hexo-cli
如果只是安装了Node.js并未做其他配置这使用以下命令安装hexo。
npm install -g hexo-cli
我已经做了数据源配置,所以我使用cnpm安装hexo,如果你想配置见我另一篇文章Node.js安装和数据源的配置
2.3.2测试
输入hexo -v
出现一大串版本号,如下图。表示安装成功
3.创建论坛
3.1本地论坛搭建
1.在电脑上新建一个文件夹用于存放本地论坛文件,我这里创建了一个“blog”文件夹。
2.打开Node.js command prompt,使用cd定位到用于存放博客数据的位置。我这里的位置是“G://blog”
3.输入hexo init
,将文件夹初始化成博客文件夹。这里会比较慢,成功之后博客文件夹内会有一些目录和文件。
4.安装hexo-deployer-git,部署到GitHub的工具,必须在我们创建的博客目录下进行,不在该目录下安装部署时依旧显示未安装。
npm install hexo-deployer-git --save
同样,配置了淘宝的数据源的可以使用安装
cnpm install hexo-deployer-git --save
5.输入hexo server
在本地环境上运行博客,可能防火墙会提示,这里要允许通过。
到这里本地的博客部署已经全部完成。浏览器访问 http://localhost:4000 ,就可看到hexo博客页面。
3.2部署到GitHub Pages
1.打开我们创建的博客目录,在空白处右键Git Bash Here打开git bash
2.将Hexo与你的Github page联系起来,设置name和email,输入如下命令
git config --global user.name "用户名"
git config --global user.email "你的邮箱"
输入以下命令可以测试是否配置成功
git config user.name
git config user.email
3.Git通过秘钥确定你的GitHub账户,所以我们必须拥有一个秘钥。检查是否有秘钥,没有就创建。我这里提示没有秘钥
4.输入以下命令创建秘钥,我们按默认的数据,直接回车几次不填数据即可。出现最下方的乱码就表示成功。
ssh-keygen -t rsa -C "[email protected]"
5.输入以下命令,取得SSH
cd ~/.ssh
cat id_rsa.pub
6.打开我们建的“用户名.github.io”将获取到的ssh放入github的settings里。一定要复制全部内容,包括开头的“ssh-rsa”和结尾的邮箱,不能只复制秘钥。
7.输入ssh -T [email protected]
测试配置是否成功,第一次输入会提示以上内容,输入“yes”即可,出现以下“Hi nineya! You’ve…”这一段表示成功。nineya是我的用户名。
ssh -T [email protected]
8.修改我们博客目录下的“_config.yml”文件
滑到底部,修改为以下内容
deploy:
type: git
repository: https://github.com/nineya/nineya.github.io.git
branch: master
repository写自己GitHub的地址,
9.所有配置都完成了,最后一步,部署到GitHub输入以下代码。
注意:必须定位到我们创建的博客的目录再输入命令,不然报错。
hexo clean //清除缓存
hexo generate //生成静态文件
hexo deploy //部署到GitHub
或者可以直接输入
hexo clean && hexo g && hexo d //等效上面三行
进行发布
10.这里发布可能会出错,后来发现报错原因是没有配置用户名和邮箱,可是明明也已经配置了,要是有懂得大佬欢迎赐教。这里附带错误的解决办法,见我另一篇文章错误解决
12.经过以上配置,我们的博客已经可以正常使用了,输入“你的用户名.github.io”访问自己的博客。下面截图是我部署的博客截图。
4.绑定域名
4.1域名购买等问题
要绑定域名首先得在域名提供商那里购买一个域名,域名提供商有腾讯、旺网、新网等等。这里我是用新网的域名,所以我用新网的来演示。如果没有域名则需要购买,建议在新网买,有的域名会稍微便宜一点点(不是广告,不是广告,不是广告),当然如果在某个提供商有购买服务器,域名在同一个提供商购买也是不错的选择。
4.2获取IP
在CMD里,ping一下自己的博客地址,查出ip多少。我这里ip是“185.199.110.153”
4.3配置DNS解析
配置一条A记录,指向我们博客的IP,因为我www的记录已经用掉了,所以我指向blog.nineya.com位置。以下是新网的添加DNS解析过程,基本上各运营商之间都大同小异。
4.4GitHub中添加域名
在我博客的参考了,点击Settings,一直往下滑找到GitHub Pages,然后输入我们配置的域名。我这里配置的是blog.nineya.com。配置域名之后还是可以通过原来“用户名.github.io”的方式访问,只是多了一种访问方式。
但是每使用“hexo d”发布一次博客,我们自定义的域名就失效了,解决方法只要再source目录下添加一个CNANE文件就好,在文件中写你的域名,只写域名不加“http://”,如图。
到此博客搭建结束,欢迎访问我的个人博客blog.nineya.com。
5.总结
弄这个花了我不少时间,总体操作还算是比较简单的吧,但是对于没接触过的小白来说略微复杂,因为涉及到Git、Node.js、HEXO这么多东西,还很容易出错。文章总体我写的算是比较详细,有不清楚的地方欢迎评论留言,看到的我都会回复的。本文到此结束,有什么不足的地方请大家不吝指正。