JingLisen 2019-06-27
之前就尝试过利用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,修改以下配置:
修改为:
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...,乍一看没配错,检查下命令也没错,突然看到如图:
赶紧检查下,还真是采坑了,没空格。
改了之后重新
hexo g
hexo d,
还是不行,执行hexo d操作后,出现:
于是一波Google操作后,最终试了这篇文章的方法,https://segmentfault.com/q/10...(还是我大思否给力啊)
开始采用这个,还是不行,还是报错大概是github权限之类的问题,猜测可能是之前有资料说要配密钥公钥之类的有问题(原谅这里懒了,之后有时间再折腾密钥相关知识),然后试了下
执行hexo d后,终于部署成功了!下图是我的博客成功后的命令界面
马上打开https://username.github.io(记得替换username),新建的博客上去了,为什么这么乱,样式不对,控制台报404,找不到引用的样式文件,看了文档,需要配页面路径
根据我自己的项目,配了路径,终于正常显示了!
我的博客开始长这样,有点单调,之后我会陆续丰富它的......
以上大概就是我搭建github的过程,经验就是要尽可能看全官方文档,别人的教程虽然有针对性,相对节约时间,可是遇到点意外就手足无措了,可以两者结合,这样不仅能达到自己的目的,还能学到更多的东西,当然还能避坑啦。