hexo + 码云博客搭建
准备工作
-
安装完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
-
将博客的域名写入到 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