Blog building——hexo基于JavaScript的静态博客

一. 安装Node.js

下载地址

LTS：长期支持版
之后进行下载安装

安装完之后会显示Node.js本身和npm

二. 查看node的版本和包管理器的版本

因为hexo需要node.js来生成的，所以需要安装

三. 先利用npm安装淘宝的镜像源(cnpm)来安装hexo（提高速度）

命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm的版本

四. 利用cnpm全局安装hexo博客

安装hexo框架

查看hexo框架版本

五. 使用hexo正式搭建博客

现在可以使用git bash

查看当前位置：

切换到E盘建立一个blog文件夹

切换到bolg目录下：cd bolg

初始化一个bolg

hexo安装完成后查看目录下生成什么文件
这些都是hexo为你自动生成的内容，这些就是blog框架的基础内容

启动blog
会在本地localhost4000端口启动blog
之后在ctrl+c断开连接（断开连接后浏览器就不能访问localhost:4000端口的blog了）
所以hexo s主要是对博客进行浏览器启动预览

在浏览器中输入localhost:4000查看blog
自动生成了一篇博文hello world

六. 对hexo进行操作来建立blog

新建一个新的blog文章
这里乱码不要担心，在文件里面是正常的

进入目录下查看文章

因为新建的博文是空的，我们个博文增加内容
输入命令：vim 我的第一篇博客文章.md
先按i进行编辑，之后点击ESC再输入:wq保存退出

退回blog目录，先hexo clean一下，然后从新生成一下hexo g

然后重新启动4000端口，刷新浏览器

七. 将博客部署到远端(免费部署到github)

用户部署个人博客的github仓库的命名必须是 你的昵称.github.io
下面是一个空仓库

在blog目录下安装一个git部署的插件

设置_config.yml 这个文件
命令：vim _config.yml
到最下面修改为：

之后在退出

修改完成后，部署到远端
命令：hexo d
然后弹出框输入github账号和密码

刷新仓库，出现blog生成的内容

之后在浏览器中直接输入zhiqiang99.github.io进去之后刷新就可以直接看到blog了

八. 更改博客主题

一个新的主题

下载主题
克隆岛themes主题目录下去
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

克隆完就会在themse目录下出现

下载完之后配置到我的博客里面去
我们需要修改blog目录下的_config.yml文件

使用命令vim _config.yml

找到theme:主题那个一行，将landscape修改为yilia ,然后保存退出（此时就使用上这个主题了）

重新hexo clean清理一下
再重新生成一下hexo g
再从新启动一下hexo s ，重新进入4000端口预览

ctrl+c退出之后之后推到远端
hexo d

九. 更改yilia主题里面的版面

进入blog/themes/yilia目录下面
修改_config.yml目录里面的内容就可以了

# Header

menu:
  主页: /
  随笔: /tags/随笔/

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:litten225@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: 

# Content

# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar:

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接1: http://localhost:4000/
  友情链接2: http://localhost:4000/
  友情链接3: http://localhost:4000/
  友情链接4: http://localhost:4000/
  友情链接5: http://localhost:4000/
  友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家