前两周学着用Hexo搭建博客,且在github上部署。这里把里面的过程记录一下。
使用的系统是Mac,但是windows也是基本一致。
安装Node.js
安装完成后,进入终端,使用下面命令可以查询到安装的版本号,验证一下有没安装成功。
|
|
安装Git
由于Mac都是自带安装了git的,所以这一步就可以省略了。
安装Hexo
先新建一个文件夹,这个文件夹就当做以后blog的目录。然后终端移动到这个文件夹里,键入下面的命令。
|
|
至此,hexo的安装就完成了。目录下面已经生成了一个blog系统。
部署到github
github为每个账号都提供了一个300M的免费空间作为blog,其实这个blog也是一个仓库,只不过仓库的名字有要求。
仓库必须和用户名一致如ekulelu.github.io,创建后即可访问静态主页如http://ekulelu.github.io
为了使Hexo能上传至这个仓库,需要进行ssh的公私钥部署。登入github,进入Settings,左边菜单选择SSH and GPC keys,这个就是配置用户SSH key的界面,点击下面的generating SSH keys链接,就可以进入创建上传SSH key的教程。
一般来讲,Mac的key都是放在 ~/.ssh目录下面,使用下面命令就可以看到已经存在的key。
|
|
如果一对key都没有,那么就需要创建,当然,你也可以单独为github创建一对key,如果采用不是默认命名,每次上传的时候都需要重新添加到ssh-agent,好烦。
使用下面命令创建key
|
|
其中会出现下面提示:
|
|
这个是生成的key保存的位置和名称,默认就是id_rsa,但是如果你之前就有了这对key,会提示你是否覆盖,假如你之前的key有用的话,别覆盖了。我会说我就是没细看,然后不小心覆盖了,导致公司的仓库登不上去吗…
|
|
这个如果不需要的话,可以直接按回车,如果输入了的话,以后添加到key-agent就要输入这串东西。
继续enter之后,key就生成了。
添加到key-agent
先验证ssh-agent是否可用
|
|
然后添加ssh key,注意后面私钥的名字,如果你不是默认生成的,请换成你生成key的名字。
|
|
添加公钥到github账号
在终端输入下面命令,注意key的名字。这下公钥已经拷贝到了剪贴板。或者也可以直接用编辑器打开公钥复制。
|
|
打开github的ssh key的页面,点击上面的New SSH key,然后粘贴上去,写个名字,点击ok就行了。
4、测试SSH连接
在终端输入
|
|
如果出现warning,继续下去
最后应该会出现
|
|
如果出现permission denied(publickey),点击下面的页面看看
https://help.github.com/articles/error-permission-denied-publickey
安装hexo-deployer-git
|
|
配置deploy
打开blog目录下面的config.yml文件(称为站点配置文件),找到deploy字段,按照下面的样式改你刚刚建立的仓库地址
|
|
此致,就打通了hexo和github仓库,后面就可以通过在blog目录下面输入下面指令将blog部署到github
安装Next主题
进入blog目录,输入下面指令
|
|
至于Next的使用,请参考官方教程,很详细
http://theme-next.iissnan.com/getting-started.html
创建文章
输入下面的命令
|
|
这就会在blog/source/_posts下面生成一个XXX.md文件。里面就可以用markdown语言进行blog撰写。
推荐一个在线编辑工具,所见即所得
文章编辑完之后,可以使用
|
|
生成blog,然后再使用下面命令
|
|
开启本地的服务器,安装里面提示的地址就可以看到博客了,方便修改。
有时候,即使使用了hexo g命令,也没有生成最新的文章。这个时候,可以吧blog/public目录删除了。重新使用hexo g命令生成blog
在文章中使用 <!– more –> 手动进行截断,Hexo 提供的方式
博客的图片
xiangnan推荐我用新浪微博的图床,感觉还不错。
Next主题修改的几个位置
Next的教程里面没有详细告知网页中元素的修改位置,且主题是黑色的,个人觉得一般般。所以自己摸索了一下一些控件颜色的修改位置。
小tip:活用浏览器的右键检查元素的功能,可以快速定位元素的class。
主题配置文件是指themes/next下面的_config.yml,下面一般先指出修改的文件所在位置,代码内是文件要修改的地方,一般是color字段。
头像
头像:主题配置文件
将头像放置主题目录下的 source/uploads/ (新建uploads目录若不存在)
配置为:avatar: /uploads/avatar.png
或者 放置在 source/images/ 目录下
配置为:avatar: /images/avatar.png
最上面一条颜色
blog/themes/next/source/css/_common/components/header/headband.styl
|
|
头部背景颜色位置
blog/themes/next/source/css/_schemes/Pisces/_brand.styl
|
|
头部文字颜色
blog/themes/next/source/css/_common/components/header/site-meta.styl
|
|
个人信息框的名字颜色
blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl
|
|
文章标题颜色:
blog/themes/next/source/css/_common/components/post/post-title.styl
|
|
文章内容宽度
我现在只能调节整个页面的宽度,如果有发现怎么调节的,请告知
blog/themes/next/source/css/_variables/base.styl
|
|
导航栏的激活标志
blog/themes/next/source/css/_schemes/Pisces/_menu.sytl
|
|
导航栏图标颜色
blog/themes/next/source/css/_common/scaffolding/base.styl
|
|
背景图片
blog/themes/next/source/css/_custom/custom.styl添加
|
|
修改侧边导航栏颜色
blog/themes/next/source/css/_common/components/sidebar/sidebar-nav.styl
|
|
blog/themes/next/source/css/_common/components/sidebar/sidebar-toc.styl
|
|
标题下划线颜色
blog/themes/next/source/css/_common/components/post/post-title.styl
|
|