hexo+github一套带走一个博客的心得

参考文献:




注:本文不适合想要把github生成的静态页面映射到自己域名下的同学(因为我没有域名,所以没有试过 =_=)

准备工作:
1.安装node.js在本地
2.安装git
3.全程使用git提供的git bash(可以规避很多问题)
4.有一个github账号

Let’s begin.
一、在github创建一个仓库
1.

2.

3.
在建仓库的时候注意名字的格式为xxxx.github.io
description可以写也可以不写

如此填写:

完成之后先把github放在一边。

二、本地安装node.js


选择一个适合自己电脑的版本下载

三、安装Git


同上,选择一个适合自己电脑的版本下载

四、预热操作
1.创建一个存放博客内容的文件
如:

我在G盘的Git文件夹里建了一个workspace再在workspace里创建一个hexo文件
2.检查本机是否配置过ssh
打开Git bash
输入命令行

如果提示: No such file or directory
那么congratulation!你本地没有,可以直接配啦
如果有,please另寻高明,我没有试过。
3.配置ssh key
3.1

!important:后面那个邮箱填自己在github注册时候写的邮箱而要要那种可以找到你人,活的邮箱
然后连按三次回车
会在本地生成一个用户目录,顺着目录找到.ssh\id_rsa.pub的文件,用记事本打开,然后复制里面的所有内容。
3.2
复制过后打开晾在一边的github,点击如图片所示

然后点击头像下面的Edit profile
3.3

选他SSH and GPGkeys
然后点击new SSH key

title可以随便写,key就把刚刚在记事本复制的内容复制上去,然后选add SSH key。over
3.4检测一下

原封不动把图上这个命令行抄到git bash上
如果出现一个:

1
Are you sure you want to continue connecting (yes/no)?
写yes然后回车
你会看见

恭喜你,配对成功呀!!!!
但是还需要两个命令行
1
$ git config --global user.name "你的github用户名,非昵称"

1
$ git config --global user.email "你注册github用的邮箱"

欧拉~

五、hexo
1.安装hexo

2.初始化

folder是你在预热操作第一步自己建的一个叫hexo的文件夹
注:最easy的办法是打开进入那个hexo文件夹,然后单击右键选择git bash here就不用 cd了


3.效果图

1
hexo init
过后,会出现这样的文件架结构。

六、启动本地端口查看博客

1.先hexo g 在本地生成
2.hexo s启动端口查看(如果浏览器报错可能是端口被占用了,建议查看清除端口冲突的博文)


此时的浏览器应该是这样色儿的

七、修改主题


有很多可选的主题
注:在选择一个主题的时候一定要点那个眼睛进去看看页面是否出来的,如果是个404建议不要使用了,感觉不安全呀….瑟瑟发抖
这里我以Very-Simple这个主题为例。
1.找到作者贡献的github地址


注:因为我在这里踩过坑!所以奉劝各位用别人的这些东西的时候!一定!答应我!一定要看看readme

在readme里,作者写了先git clone下来这个主题,后面的themes/very-simple意思是放在themes文件夹下,取名叫very-simple。当然我很另类,我用驼峰命名法写的verySimple,反正随你的便。
特别注意的是作者提到要安装sass和jade,我就因为眼瞎,亏了一波呀….
所以按照上图吧sass和jade装一下。
然后…
打开hexo根目录下的这个文件
_config.yml
1
注意:文件里,改动每一个东西都要在冒号后面留一个半角空格,不然会出问题的!!!!


打开之后找到这个

把themes后面改成你主题的名字,就是clone的时候themes/后面写的那个名字。我的就是verySimple。
然后你在git bash 输入
1
hexo -s g 

就在本地生成了然后启动了4000端口,你就可以去查看了。

八、把本地的这些静态页面部署到github上
1.首先在hexo在修改主题的那个_config.yml文件里找到

照到图片改type和branch和图片上都填的一样就可以了,但是repository每个人都不一样。
现在,打开github里你之前创建的仓库

选了ssh之后复制后面的内容,然后粘贴到repository后面,注意repository冒号后面要留一个半角空格!然后保存
2.这时候你仅仅需要一个命令行就可以解决这个问题了
那就是:

1
hexo d

因为之前ssh key匹配过了,敲了这个命令之后,就已经部署到github上了。

九、用github生成静态页面
还是打开在github里的仓库

点击settings过后,找到

先点击图中标记的1那个none,出现下拉菜单过后点击2的master branch。过后你会看见出现了一个连接,那个连接就是你博客的地址。
当然,在我本人弄得时候,道路并不是这么顺利的!我出现了这样的问题

这个图片里,我的页面糊的跟坨屎一样,于是我发动了我这双爱找问题的眼睛,发现了图里圈出来的这个不同。下面报错的这个地址肯定是找不到我的那些css文件的,因为他们少了一个

1
TechnologyBlog.github.io/
这个很关键的东西,于是我打开了调试工具,找到了在自动生成的时候,css生成的相对路径

然后我自己在他前面加了一个
1
TechnologyBlog.github.io/

于是见证奇迹的时候到了

页面的效果就出来了!!!
天呐撸,现在问题找到了,就是css在自动生成的时候,相对路径哪里不对。一开始我在想,我能怎么办,我也很绝望对吧,这个自动生成的,我去哪里改他。后来灵光一闪,我打开了_config.yml我去配置文件里改

这下效果就出来了,完美呀!喜滋滋的~
这下一整个博客就出来了。在小茗同学的博客里给出了很多自己用hexo+github搭一个自己的博客的好处!此时我想补充一两条。首先,你自己搭的这个博客,生成的静态页面,没有人去审查你的内容,因为网易博客很过分的把我之前写了一年多的技术博给删除了并且内容无法找回,还说我的博客有违规内容,wtf???所以我很看中这一点。其次,有了这个教训之后,我很在意对于文章的备份问题。假如说真的你的页面还是被禁了,那么你的文章内容不仅在github上按改动历史备份了,还在本地保存了你最后一次上传的博文!very safe!!!!这一次也算因祸得福,大网站的博客用不起,作为一个程序员,不能气馁!自己动手撘一个就可以了!加油~