基于Hexo与GitHub搭建个人博客

个人基于windows server 2012环境搭建，在此记录搭建过程。

1.创建Github 域名和空间

1.1 注册GitHub 略
1.2 创建仓库
创建一个仓库(repository) 来存储我们的网站，点击首页任意位置出现的 New repository按钮创建仓库, Respository name 中的username.github.io 的username 一定与前面的Owner 一致，记住你的username下面会用到。

2.安装相关程序

Hexo基于node.js .下面安装的工具包括git，nvm（nodejs管理工具），hexo。
2.1.安装git。下载安装程序安装，略。
2.2.安装nvm。到github里nvmlink项目下载安装程序，建议使用nvm-setup.zip。解压安装即可。
打开cmd，输入nvm命令，会显示版本信息与命令简介。
1）查看本地安装的所有版本：

//（available：显示可下载的版本）
nvm list [available]

2）安装nodejs。命令中的版本号可自定义

nvm install 14.0.0

3）使用特定版本

 nvm use 14.0.0

4. 卸载

    nvm uninstall 14.0.0

执行第3步之后，使用npm -v 命令，出现版本号说明nodejs已安装。

2.3.安装hexo
使用gitbash或者cmd，输入以下命令安装：

npm install -g hexo-cli

安装完成后，输入hexo -v，出现一系列版本号，说明安装成功。

3.编写博客并发布

3.1 创建博客
执行下列命令，执行成功后，会创建出一个名为 username.github.io 的文件夹。

//username是你的仓库名（用户名）
hexo init username.github.io

3.2 更改配置
主题安装
为了使博客不太难看，我们需要安装一个主题，切换至刚刚生成的Hexo 目录，安装主题

$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

这里选了一个极简的主题。
基础配置：打开文件位置username.github.io/_config.yml修改几个键值对，下面把几个必须设置的列出来按需求修改，记得保存， 还有注意配置的键值之间一定要有空格。
title: dimsky 的 9 维空间 //你博客的名字
author: dimsky //你的名字
language: zh-Hans //语言 中文
theme: next //刚刚安装的主题名称
deploy:
type: git //使用Git 发布
repo: https://github.com/username/username.github.io.git // 刚创建的Github仓库
主题配置：
主题配置文件在username.github.io/themes/next/_config.yml中修改，这里略过。设置详情link

3.3 写文章
在username.github.io/source/_posts下创建你的第一个博客吧

3.4 测试

hexo server  //hexo s

测试服务启动后，可以在浏览器输入localhost:4000进行访问。

远程部署

3.5 安装hexo-deployer-git自动部署发布工具

$ npm install hexo-deployer-git --save

3.6 创建以用于提交

git config --global user.name "yourname"
git config --global user.email "youremail"

3.6 发布
清除之前生成的东西

hexo clean

生成静态文章

hexo generate // hexo g

部署文章

hexo deploy // hexo d

也可以写在一起

$ hexo clean && hexo g && hexo d

首次执行，终端会让你输入Github 的邮箱和密码，正确输入后，骚等片刻，就会把你的博客上传至Github 了。以后在每次把博客写完后，执行一下这个命令就可以直接发布了。
3.7 访问
在浏览器中输入 https://nudoo.github.io/，就可以访问你的博客了。

---

附：

设置hexo主题

1、选择hexo主题，到github上下载主题放到themes文件夹下
2、修改_config.yml里的theme为该文件夹名称

新增菜单栏选项

1、添加新页面：hexo new page “xx”
2、在主题配置文件的menu中加上该页面
3、在zh-CN.yml文件中加上中文意思

新增草稿

1、添加草稿：hexo new draft “xx”
2、预览草稿：hexo server --draft
3、发布草稿：hexo publish draft “xx”

图片处理

1、配置文件中的post_asset_folder改成true
2、npm install hexo-asset-image --save
3、放到该文件夹下，按照md格式输入(文件名称/图片名.jpg)

搜索

1、npm install hexo-generator-searchdb --save
2、站点配置文件的扩展下添加

search:
path: search.xml
field: post
format: html
limit: 10000
3、主题配置文件下，local_search改成true即可

local_search:
enable: true

字数

1、

npm install hexo-symbols-count-time --save

2、站点配置

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

宠物

1、

npm install --save hexo-helper-live2d

2、live2d插件
3、安装合适的宠物

npm install live2d-widget-model-wanko

4、在配置文件中添加即可

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
   //use: live2d-widget-model-tororo
   //use: live2d-widget-model-hijiki
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
//   水平位置
//   hOffset: 0
//   垂直位置
//    vOffset: -20
  mobile:
    show: true

点击弹爱心

1、在source->js目录下新建一个js文件为click-love.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);

2、在主题theme->layout->_partials->footer文件中导入该js文件即可

<script type="text/javascript" src="/js/click-love.js"></script>