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 '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
    
posted @ 2019-09-29 17:12  cjw1219  阅读(2095)  评论(0编辑  收藏  举报