一.配置本地node.js和下载Hexo
1.关于Linux的根目录/
2.mac的根目录也是/ , 终端cd /可以查看根目录下的所有文件.
3.在终端下执行命令的时候如果报 permission denied,则说明权限不够,可以在命令前加上sudo
在node.js官网下载nodel.js
4.查看node.js版本
//查看node.js版本
node -v
//查看git版本
git --version
如果没有安装, 则需要安装,下边是安装地址
[git]:https://sourceforge.net/projects/git-osx-installer/
[node.js]: https://nodejs.org/en/
创建blog文件夹，并初始化建立博客框架
# 在你的家目录下创建一个blog文件夹
mkdir blog
# 进入目录
cd blog //这里是根目录, macOS的根目录,可以使用命令 open /打开.
# 初始化目录
hexo init
开启本地服务
# hexo s
图1
至此,我们本地的hexo框架已经创建完毕,这是默认的框架主题,我们可以打开上面提示的地址,查看下框架.
5.hexo打开的端口是4000, 若果当前端口被占用, 我们可以先查看下是什么进程占用了端口4000
sudo lsof -i:4000 //查看端口4000的使用情况,如果有占用,则会给出PID
sudo kill -9 PID //杀死相应的进程.
二.github创建仓库.
1.首先创建一个仓库,仓库名的格式是:用户名.github.io(用户名是你github的登录名称)
2.hexo关联github的仓库
打开Hexo的_config.yml文件,滑动到底部.
deploy:
type: git
repository: https://github.com/Highter/Highter.github.io.git // 这个地方填写自己的仓库地址
branch: master
3.然后部署到github上
部署到github上,执行代码:hexo deploy
4.如果报错Deployer not found:git,如下图.
图2
这问题需要安装hexo-deployer-git.执行命令如下:
npm install hexo-deployer-git --save
5.然后执行hexo deploy.需要输入github的用户名和密码,如图
图3
6.如果上传完成,这个时候就可以打开blog的链接去访问了.
http://你的用户名.github.io
以上操作都需要sudo的权限执行.不然没有权限容易报错.
三.注意事项:
1.这个时候已经上传完hexo框架的代码到你的github的仓库上了,你需要做的是打开github上你的hexo的链接.
2.这个链接还是由讲究的,至于设置是有规矩的.
格式是https://你的仓库名.github.io,并且你创建的仓库名也是有讲究的.
这个仓库名必须包含你的github的用户名,格式是:你的用户名.github.io
下面是我创建的仓库地址:xiaoyuanlizhi/xiaoyuanlizhi.github.io
3.如果出现404的问题,则说明你的仓库名称配置的有问题,你需要在仓库设置里重新更改下合格的仓库名就行,不需要重新创建新的仓库和重新上传.
四.更改主题
1.这个是hexo官网主题hexo官网主题大家可以下载自己喜欢的主题, 一下以hexo-theme-next为例
cd到blog的目录下执行命令
git clone https://github.com/iissnan/hexo-theme-next themes/next
将blog目录下_config.yml里的theme的名称landscape修改为next
终端cd到blog目录下,执行一下命令(每次部署文章的步骤):
hexo clean //清除缓存文件(db.json)和已生成的静态文件(public)
hexo g //生成缓存和静态文件
Hexo d //重新部署到服务器
2.点击出现心跳
在/themes/next/source/js/src下新建文件 clicklove.js,然后将一下代码copy到clicklove.js文件里
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
然后修改_layout.swig文件, 在\themes\next\layout_layout.swig文件末尾添加：
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
位置如图:
图4
3.更改主题(next)的风格
Next的目前提供的有4种风格, Muse, Mist, Pisces, Gemini
可以在/blog/themes/next/_config.yml配置文件里配置
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
这四种风格, 我目前使用的是第四种风格,Gemini风格.
Gemini风格
4.站点信息配置
在/blog/_config.yml文件里配置
/blog/_config.yml
/blog/_config.yml
五.添加文章
1.创建文件
hexo new 'hexo_one_article' //这里的'hexo_one_article'即是文件名,也是标题名.
这个时候,会在source/_posts文件里创建一个hexo_one_article.md的文件.
我们可以在文件里使用markdown的格式编写文件.然后使用hexo的命令上传文件发布文章.
hexo clean
hexo g
hexo d
这写命令在文章上半部分已经提到过了.
网友评论