node.js的开篇之作(hexo在github上搭建blog)

一.配置本地node.js和下载Hexo

1.关于Linux的根目录/

2.mac的根目录也是/ , 终端cd /可以查看根目录下的所有文件.

3.在终端下执行命令的时候如果报 permission denied,则说明权限不够,可以在命令前加上sudo

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

五.添加文章

1.创建文件

hexo new 'hexo_one_article'  //这里的'hexo_one_article'即是文件名,也是标题名.

这个时候,会在source/_posts文件里创建一个hexo_one_article.md的文件.
我们可以在文件里使用markdown的格式编写文件.然后使用hexo的命令上传文件发布文章.

hexo clean
hexo g
hexo d

这写命令在文章上半部分已经提到过了.