HEXO+GitHub傻瓜式搭建个人博客(WIN-7)

一直想有一个属于自己的博客,前段时间看到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命令也没关系,其实我也不是很懂,跟着命令走就可以了 但是对于程序员来说还是必须要了解的 推荐几个网址吧:

然后是编辑器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.

我这里是默认安装的,直接在C盘用户,管理员,.SSH文件下

利用编辑器打开rsa文件,将里面的内容copy,复制在github,在SSH设置页面添加刚才的SSH文件也就是id_rsa.pub的内容即可。

在github中选择setting-->ssh and GPG 添加SSH

这里会验证一下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 #帮助


如果文章有什么错误,感谢大神指出,好及时修改。希望同大家共同交流,进步。

另外推荐几篇大神写的(我也是按照他们的教程搭建,不分先后):

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值