一直想有一个属于自己的博客,前段时间看到HEXO+GitHub傻瓜式搭建,就利用周末花了俩天时间搭建了一个自己的博客。花俩天时间是因为走了太多弯路~搞了太多错误,在这里把流程梳理一下,希望大家不要像我一样走弯路,顺便填入第一篇博客0.0,没有基础的同学也可以利用它搭建自己的博客,我觉得博客不一定要写技术,用来当做自己的私人空间也是很不错的。这里特别感谢Chasen’s ,帮我解决了好多问题。
* 关于HEXO *
hexo是一款基于Node.js的静态博客框架,可以生成静态文件并且一键部署到github
pages上,并且他可以使用markdown(一款编辑器)来编写文章,十分简单。
搭建前环境准备
安装Node.js(正是因为了解到了node.js才下定决心学前端的)
进入官网,他会自动提取你的电脑型号,有俩个版本下载,左边的是稳定版,右边的是一直更新的前沿版,我们这里随便选择一个就好了,我个人喜欢新鲜事物,就选择了右边的
直接下载即可,只有13MB大小,然后一路默认安装就好了
安装好以后按 win+r 打开运行输入CMD(开始栏输入CMD也一样)
输入 node -v
输出版本号即安装成功,我这里是以前装好的v7.6.0版本
接下来安装git
同上进入git 然后点击下载安装即可(30MB左右) 安装好以后右键会有
git gul here
git bush here
![]()
不懂git命令也没关系,其实我也不是很懂,跟着命令走就可以了 但是对于程序员来说还是必须要了解的 推荐几个网址吧:
- Git-Reference(官网首选,当然是英文的)
- git-简易指南(中文简易指南,基本命令够用了)
- git-常用的基础命令
然后是编辑器sublime(可选)
我这里用的是sublime text3,很有程序员风格的编辑器,很多插件与快捷键,特别好用,推荐一下。(中文支持不太好,用习惯就好了)。
不用sublime也可以,如果熟悉vim的话可以直接用git打开vim编辑
我对vim也不是很熟,以前上Linux课的时候用过一点,也没好好听,基本忘光了,但是就是基本的修改个属性,能达到自己需求就行,对吧。
注册github
对于没有GitHub的同学,在这里申请一个GitHub账号吧,这个很简单,直接注册,邮箱验证就好了。
申请好以后新建一个自己的仓库
这里注意上面俩个箭头,命名必须要一致,后面的名字要以github.io结尾
我当初就因为这里搞错了(我写成了xinhe.github.io),导致一直到下面的步骤得重新来,当初不知怎么想的,实在是chiou~所以需要购买一个域名~后面再说,先把hexo与github联系起来再说
这里先把git与你的github联系起来
右键git bush here 输入命令绑定你的邮箱和名字,这里是我的~替换成自己的即可
接下来生成秘钥
ssh-keygen -t rsa -C “XXX@XXX.com”
这里C是大写哦!!!
如图然后连续按回车即可
然后在#user_id/.ssh目录下会生成两个文件,id_rsa.pub和id_rsa.
利用编辑器打开rsa文件,将里面的内容copy,复制在github,在SSH设置页面添加刚才的SSH文件也就是id_rsa.pub的内容即可。
![]()
这里会验证一下github的密码
最后来验证一下:
git命令输入 ssh -T git@github.com
如果成功他让你输入yes然后会返回一个成功的信息
安装hexo
是不是觉得需要下载的东西好多啊,我开始也是这样觉得,但是为了个人博客,忍了吧,其实这里为了详细,写的比较多,比较熟悉的人可以快速浏览,直接上手,遇到问题再回过头来检查步骤,别急,马上就可以看到属于你的博客了~***
npm install hexo-cli -g
npm install hexo-deployer-git –save
缺少这个命令之后提交会有问题当时这里也翻了错误
然后可以利用Git 一路cd 到hexo的安装目录,或者进去目录,右键git bush here 即可(命令必须在init目录下执行,否则不成功,但是也不报错)
hexo init # 初始化
hexo clean #清理临时文件
hexo g # 完整命令为hexo generate,生成静态文件
hexo s #完整命令为hexo server,打开本地服务
打开本地服务,这时候打开浏览器输入http://localhost:4000看看你博客页面吧~官方默认会有一篇hello world,当然 ,现在还只是本地的。只有你自己能看到
将静态页面提交到github
此时就用到了编辑器,打开_config.yml文件,直接拖入编辑器即可自行修改
没有编辑器的同学, 可以cd(进入的意思)到hexo的文件夹下,输入vim _config.yml
然后直接滑到下图的位置,按键盘“a”,意思是插入文本,然后就可以修改了,修改完之后按ESC,然后按“Shif+:”,输入“wq”,意思是保存加退出,如果直接退出就输入“q”即可。
![]()
![]()
然后修改如下:
将repo后面的内容改成自己的
deploy:
type: git
repo: git@github.com:yourself/yourself.github.io.git
branch: master
hexo d -g #组合命令,命令等同于hexo g 再 hexo d
这时候输入你的github地址,例如我的是18292843691.github.io
就可以看到你的博客页面了…
关于主题安装
主题有好多种,这里我推荐NEXT,简洁,大方,支持多语言,一句代码即可下载NEXT最新版,如果需要其他的可以上官网查找喜欢的,添加方式是一样的。
git clone https://github.com/iissnan/hexo-theme-next themes/next
然后打开 _config.yml文件,如图找到theme修改为next即可
![]()
我这里没有用next,因为用next的人太多了,点击进入yilia。
关于文章发布
输入hexo new "title"
即可自动生成md文件在source/_post下
然后打开你的md文件编写文章就可以了,文章需要是markdown格式,可以用markdown格式的编辑器编写,也可以找在线的markdown编辑器,例如我直接用CSDN的,也可以离线使用,支持导出为MD,HTML格式,很方便。
关于图片,我推荐极简图床,简单方便。
hexo d -g #同步至github
hexo 常用命令(#后为注释)
hexo init #初始化
hexo clean #清理临时文件
hexo g # 完整命令为hexo generate,生成静态文件
hexo s #完整命令为hexo server,打开本地服务
hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
hexo new “postName” #新建文章
hexo new page “pageName” #新建页面
hexo help #帮助
如果文章有什么错误,感谢大神指出,好及时修改。希望同大家共同交流,进步。
另外推荐几篇大神写的(我也是按照他们的教程搭建,不分先后):