hexo + 码云博客搭建

准备工作

1. 安装完Node.js Node.js

2. 安装git bash工具 git bash 工具

3. 安装hexo

   新建一个存放blog所有东西的文件夹， 右键git Bash Here

   

   输入安装过hexo命令 npm install -g hexo-cli

   

   安装完成后，查看版本 heox -v

   

搭建工作

初始化hexo，在刚才的文件夹中打开git bash输入命令（git bash打开后
因为一直要用，所以不要动不动就关闭掉）：

hexo init

• node_modules：为hexo的插件目录，作用是利用此目录的插件生成
  对应功能的静态HTML等脚本代码。
• scaffolds：模版文件。每次新建文章时，Hexo 会尝试在 scaffolds 文件夹中寻找同名文件，并根据其内容建立文章。所以可以在这里添加自己的 layout，作为常用的新建模板使用。
• source：这个文件夹是放文章和图片等资源文件的。
• themes：存放主题的文件夹
• _config.yml：站点配置文件，很多全局配置都在这个文件中。

启动本地服务

hexo server

​

生成静态文件

此步是为了上传到码云做的。因为目前只能自己在本地访问博客，但是想让其他人看到就要结合码云（github或者coding）来做了。
还是在咱们blog的文件夹中打开git bash输入命令：

hexo generate（或懒人模式直接输入hexo g）
目录中就会多出一个public文件夹

部署静态Html文件到码云

将网站部署到服务器上

npm install hexo-deployer-git --save

配置根目录_config.jml文件 ( branch和message这两个写不写都可以)

• 在blog文件夹中打开git bash输入命令

  git config --global user.email '[email protected]'

  git config --global user.name 'cjwnb'

  hexo deploy

  会弹出输入码云账号密码的对话框, 输入正确的用户名和密码

• 一般没有报错就是部署成功了

• 然后开启码云的Pages功能

  

  

如果出现页面无法渲染的情况

• 修改配置文件

• 上传到码云

  hexo generate --deploy

• 在码云上Gitee Pages 服务重启

  

配置主题

# 安装主题
$ git clone -b master https://github.com/Molunerfinn/hexo-theme-melody themes/melody
$ vim _config.yml
theme: melody 


# 安装页面渲染插件
$  npm install hexo-renderer-jade hexo-renderer-stylus --save

# 复制主题配置文件
$ mkdir -p source/_data/
$ cp themes/melody/_config.yml source/_data/melody.yml

官方文档: https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/quick-start.html#%E5%AE%89%E8%A3%85

本地图片本地调用

在source下新建目录img, 在进行调用时候通过url绝对路径本地调用

• markdown博客文件调用本地图片

  https://cjw1219.gitee.io/hexoblog/img/1/s14.png

• 博客的封面图调用本地图片

  top_img: http://cjw1219.gitee.io/hexoblog/img/background.jpeg

添加本地搜索

• 安装依赖包

  $ npm install hexo-generator-searchdb --save

• 修改全局配置文件 _config.yml

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

• 修改主题配置文件 melody.yml

  local_search:
    enable: true
    labels: 
      trigger: auto
      top_n_per_article: 1

评论区配置

配置valine评论区

• 注册learncloud并创建应用 https://leancloud.cn/dashboard/login.html#/signup

  

  

• 复制应用key的信息复制到主题配置文件 source/_data/melody.yml

  

  valine:
    enable: true # if you want use valine,please set this value is ture
    appId: MslkdllkC3iiMdddsdsdMnJNaAE-oHsz50sjkdjk
    appKey:  sdlkfjfddsljkdjksdkhjsj
    notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
    verify: false # valine verify code (true/false)
    pageSize: 10 # comment list page size
    avatar: mm # gravatar style https://valine.js.org/#/avatar
    lang: zh-cn # i18n: zh-cn/en
    placeholder: Just go go # valine comment input placeholder(like: Please leave your footprints )
    guest_info: nick,mail,link #valine comment header inf

• 将博客的域名写入到 learncloud的应用的 web安全域名中

  

域名绑定

• 本地新建CNAME文件, 没有扩展名, CNAME文件写去掉http:// 的域名

• 在码云中自定义域名(收费)

  

• 在域名中配置解析地址

  • 通过命令 ping gitee.gitee.io 获取对应的公网地址

    

  • 阿里云-域名中配置解析到上面获得的公网地址, 分别解析主机类型@和www

    

    

    

    

报错信息

CRLF问题

Git提交代码发生LF will be replaced by CRLF in 问题

• 原因

  需要提交的文件是在windows下生成的，windows中的换行符为 CRLF， 而在linux下的换行符为LF，所以在执行add . 时出现提示

• 解决方案

  执行 git config --global core.autocrlf false, 再提交

页面出现乱码

• 解决

  设置全局配置文件_config.yml

  language: zh-Hans

• 可以在主题路径下 themes\melody\languages 查看该主题支持的语言

  

wordcount问题

在主题配置文件中 _melody.yml中 将wordcount中的enable设置为true, 在提交代码时候报wordcount相关问题

wordcount:
  enable: true

• 解决

  安装wordcount依赖包

  $ npm i --save hexo-wordcount