hexo + 码云博客搭建

时间：2019-09-29 17:25:02 阅读：210 评论：0 收藏：0 [点我收藏+]

准备工作

安装完Node.js Node.js
安装git bash工具 git bash 工具
安装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 ‘1392263019@123.com‘

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