建立自己的博客

建立博客有的人用Hexo，有的人用Jekyll，看网上大多数人推荐Hexo，下面就用Hexo建立自己的博客，整理如下，以备查阅。

欢迎访问我的博客：JHolmes

1.安装配置环境

整个博客框架是基于node.js的，所以需要安装node.js，Windows Installer 64-bit，一路next即可，Node.js 的包管理器 npm（node package manager），是全球最大的开源库生态系统，安装 Node.js 时会自动安装 npm，之后要通过 npm 来安装 Hexo。查看是否安装成功

node -v
npm -v

Git用来将hexo的相关文件部署到Github上去，安装过程同样一路Next，GIt官网下载地址，查看是否安装成功

git --version

安装hexo

npm install hexo-cli -g
npm install hexo --save
hexo -v      #查看是否安装成功

hexo init    #初始化网站--------很慢，耐心等待！！！   
npm install  #自动安装需要的组件
hexo g       #generate   
hexo s       #server 启动本地服务器
复制网址 http://localhost:4000 查看网站

其他命令
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
hexo new "文章名"        #新建文章
hexo new page "页面名"   #新建页面 

注意 http://localhost:4000 这个网址只能在本地查看，别人并不能看到，想要别人看到，必须将这些文件部署到Github上去。

建立GitHub账号，右上角加号点击New repository，Repository name下填写 YourName.github.io，然后点击public，点击create repository。

配置Deployment，修改 Hexo/_config.yml 文件，注意 type，repo，branch 冒号后都有一个空格

deploy:
  type: git
  repo: [email protected]:JH0lmes/JH0lmes.github.io.git
  branch: master

将Hexo与github page 联系起来

在hexo文件夹右击，Git Bash Here，然后键入以下代码

1.设置Git的user name和email：(如果是第一次的话)

git config --global user.name "JH0lmes"
git config --global user.email "[email protected]"

2.生成密钥，键入以下，然后回车，然后填密码，五位及以上，填两遍，会在
C:\Users\Administrator\.ssh 文件夹中生成几个文件

ssh-keygen -t rsa -C "[email protected]"  #其中id_rsa为密钥  id_rsa.pub为公钥

3.到GitHub网页，点击头像Settings，找到SSH and GPG keys，随意填一个Title，Key为
C:\Users\Administrator\.ssh\id_rsa.pub里的内容，复制进去，点击Add SSH key，输入密码

4.查看ssh是否添加成功，输入密码，如果看到Hi后面是你的用户名，就说明成功了

ssh -T [email protected]

5.部署到github，刷新 JH0lmes.github.io 就可以看到自己的博客了

hexo g
hexo d

或直接运行一行代码
hexo d -g

Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中，在执行hexo deploy时将其复制到.deploy文件夹中。Github的版本库通常建议同时附上README.md说明文件，但是hexo默认情况下会把所有md文件解析成html文件，所以即使在线生成了README.md，它也会在你下一次部署时被删去。怎么解决呢？ 
在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中，再去执行hexo deploy。

2.完善建好的博客

首先了解下hexo文件夹下各文件的作用

文件夹	说明
.deploy	执行hexo deploy命令部署到GitHub上的内容目录
scaffolds	layout模板文件目录，其中的md文件可以进行编辑
source	文章源码目录，该目录下的md和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件和CNAME等文件都放在这里，该目录下可新建页面目录。
public	源码文件夹，执行hexo generate命令，输出的静态网页内容目录
scripts	扩展脚本目录，这里可以自定义一些javascript脚本
themes	主题文件夹
.gitignore	在push时需要忽略的文件和文件夹
_config.yml	全局配置文件，大多数的设置都在这里
themes\landscape\_config.yml	主题配置文件
source\_posts\hello-world.md	键入hexo new 'filename'生成.md文件，可对其编辑
package.json	依赖包的名称和版本号，类似于一般软件中的关于按钮
_drafts	草稿文章
_posts	发布文章

选择自己喜欢的主题 hexo主题，如NexT、Ochuunn、Sw-blog、Toki、icalm、yilia。在Hexo 文件夹下使用 Git Shell，输入以下两条命令clone到本地，我选择的是NexT，

cd Hexo
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

或者直接下载到本地，然后移动到themes文件夹下，打开站点配置文件，找到 theme 字段，并将其值更改为 next。最后执行上面发博文的命令，刷新个人博客，查看主题是否启用。

接下来就开始大兴土木了！

站点配置文件：

# Site #站点信息
title: blog Name #标题
subtitle: Subtitle #副标题
description: my blog desc #描述
author: me #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时区

# URL
url: http://yoururl.com   #用于绑定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
permalink_defaults:

# Directory #目录
source_dir: source #源文件
public_dir: public #生成的网页文件
tag_dir: tags #标签
archive_dir: archives #归档
category_dir: categories #分类
code_dir: downloads/code
i18n_dir: :lang #国际化
skip_render:

# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: true #显示行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页
per_page: 10 #每页文章数, 设置成 0 禁用分页
pagination_dir: page

# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next

# Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面
deploy:
- type: git
  repo: [email protected]:username/username.git,gitcafe-pages
- type: git
  repo: [email protected]:username/username.github.io.git,master

# Disqus #Disqus评论系统
disqus_shortname: 

plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap

添加背景图，在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

修改Logo字体，在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: 'Zitiming' !important;
}

其中字体文件在 themes/next/source/fonts 目录下，里面有个 .gitkeep 的隐藏文件，打开写入你要保留的字体文件，比如我的是就是写入 Zitiming.ttf ，具体字库自己从网上下载即可。

在menu中添加站内搜索，安装插件

npm install hexo-generator-searchdb --save

修改根目录下的_config.yml，在最底部添加如下配置

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主体配置文件 _config.yml，搜索local_search，修改enable为true，完成。

修改内容区域的宽度，编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

修改网站标题栏背景颜色，打开 themes/*/source/css/_custom/custom.styl ,在里面写下如下代码：

.site-meta {
  background: $blue; //修改为自己喜欢的颜色
}

自定义鼠标样式，打开 themes/*/source/css/_custom/custom.styl ,在里面写下如下代码：

* {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

文章加密访问，打开 themes/*/layout/_partials/head.swig文件,在 之前插入代码：

添加萌宠，使用live2d

npm uninstall hexo-helper-live2d        #卸载原来的
npm install --save hexo-helper-live2d   #安装新的

安装完成之后在 package.json 会看到安装的model。node_moduels目录下，是动画主配置。下载各种动画，然后将下载好的packages里的所有动画模板拷贝到 node_modules 目录里。配置博客站点配置文件_config.yml

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  #模板目录，在node_modules里
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

将use：xxx改成自己想要展示的，然后更改大小和位置。完成。

写文章时加上password: *：

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---

实现点击出现桃心效果
1.在/themes/*/source/js/src下新建文件click.js，接着把以下粘贴到click.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

2.在\themes\*\layout\_layout.swig文件末尾添加：

博文置顶

1.安装插件

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top即可：

---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---

2.设置置顶标志

打开：/themes/*/layout/_macro/post.swig，定位到

标签下，插入如下代码：

{% if post.top %}
  
  置顶
  |
{% endif %}

右上角或者左上角实现fork me on github

1.选择样式GitHub Ribbons；
2.修改图片跳转链接,将中的链接换为自己Github链接；
3.打开 themes/next/layout/_layout.swig 文件，把代码复制到

下面。

主页文章添加边框阴影效果，打开 themes/*/source/css/_custom/custom.styl ,向里面加代码:

.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

显示当前浏览进度，修改themes/*/_config.yml，把 false 改为 true：

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

创建分类页，在终端窗口下，定位到 hexo 站点目录下，新建：

$ cd <站点目录>
$ hexo new page categories

评论系统

	推荐指数	优点	缺点
Valine	4	每天30000条评论，10GB的储存	作者评论无标识
来必力/livere	4	多种账号登录	评论无法导出

Valine

1.获取APP ID 和 APP Key

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用，

进入刚刚创建的应用，选择左下角的 设置->应用key，然后就能看到你的APP ID和APP Key了。

2.填写APP ID 和 APP Key到主题配置文件_config.yml;

3.运行hexo d -g，推送到博客。

来必力/livere

1.登陆 来必力 获取你的 LiveRe UID；

2.填写LiveRe UID到主题配置文件_config.yml。

3.编辑博文

创建文章

hexo new [layout]