我有GitHub Pages博客了!

之前就尝试过利用hexo+github pages搭建自己的个人博客,可是只在本地服务跑起来了,不知道怎么弄到GitHub上去,然后由于手头这样那样的事,一直搁置了。最近手头闲下来了,准备再给博客弄起来,经过一番折腾,终于有属于自己域名的博客了!!下面详细的介绍下搭建的步骤和过程(当然还有一些填坑经过)

一:创建github仓库,命名格式:github用户名 + github.io(这步前提是有一个github账号),如:xxx.github.io

二:参考https://pages.github.com/,创建自己的github page
1.在电脑盘(如D盘)克隆刚在github建的项目仓库,
git clone https://github.com/username/u...

2.进入到本地该项目,新建index.html文件

cd username.github.io
echo "Hello World" > index.html

3.提交修改到github上
git add --all
git commit -m 'init' (提交信息可修改)
git push -u origin master

这时候,打开浏览器,输入https://username.github.io(同...,就可以成功访问了!!(此时出现Hello World就是成功了)

重点来了!!

三:安装并启动hexo

npm install -g hexo

手动创建项目文件夹,以我自己的为例,文件夹名字为App

cd App

hexo init

hexo install

hexo server

打开localhost:4000,hexo本地服务就可以启动了

四:新建博客文件,利用hexo生成网页
hexo new "New Post"

执行操作,生成静态网页
hexo generate // hexo g

五:部署github

在项目文件夹下找到_config.yml,修改以下配置:

我有GitHub Pages博客了!

修改为:

deploy:
type: git
repo: https://github.com/username/u...
branch: master
message: my-blog(可自定义)

安装hexo-deployer-git, 以及部署

npm install hexo-deployer-git --save

hexo delopy // hexo d

部署成功
在浏览器中打开 https://username.github.io ,正常显示网页,表明部署成功。

嗯,到这里,看着没毛病,如果成功了,就大功告成了,接下来就可以随心所欲地写博客了!!
可是,事情往往都没有预计的那么顺利,我按照上面步骤,打开https://username.github.io并...。接下来就是填坑了,有耐心的可以继续往下看。

因为我本地服务能打开,所以失败原因只会出现在部署那块,打开https://hexo.io/zh-cn/docs/de...,乍一看没配错,检查下命令也没错,突然看到如图:
我有GitHub Pages博客了!

赶紧检查下,还真是采坑了,没空格。
改了之后重新
hexo g
hexo d,

还是不行,执行hexo d操作后,出现:
我有GitHub Pages博客了!

于是一波Google操作后,最终试了这篇文章的方法,https://segmentfault.com/q/10...(还是我大思否给力啊)我有GitHub Pages博客了!

开始采用这个,还是不行,还是报错大概是github权限之类的问题,猜测可能是之前有资料说要配密钥公钥之类的有问题(原谅这里懒了,之后有时间再折腾密钥相关知识),然后试了下
我有GitHub Pages博客了!

执行hexo d后,终于部署成功了!下图是我的博客成功后的命令界面

我有GitHub Pages博客了!

马上打开https://username.github.io(记得替换username),新建的博客上去了,为什么这么乱,样式不对,控制台报404,找不到引用的样式文件,看了文档,需要配页面路径
我有GitHub Pages博客了!

根据我自己的项目,配了路径,终于正常显示了!

我的博客开始长这样,有点单调,之后我会陆续丰富它的......
我有GitHub Pages博客了!

以上大概就是我搭建github的过程,经验就是要尽可能看全官方文档,别人的教程虽然有针对性,相对节约时间,可是遇到点意外就手足无措了,可以两者结合,这样不仅能达到自己的目的,还能学到更多的东西,当然还能避坑啦。

相关推荐