搭建专属你的hexo博客


title: 搭建属于你的专属博客

第一步:安装以及运行

1.安装git以及node环境(官网下载即可)

2.在node的环境下安装hexo

  • cnpm install -g hexo-cli
  • cnpm install -g hexo
  • hexo -v 检验是否安装成功

3.本地创建放置博客文章文件并与github相连接

  • mkdir 文件夹名字 (创建文件夹)

  • cd 文件夹名字 (进入文件夹)

  • hexo init (初始化)

  • cnpm install (安装依赖)

  • 在github中新建一个仓库,注意!仓库的名字需要在后面加上'.github.io',不要勾选readme.md,创建

  • 在编辑器中打开上述创建的文件夹,找到最外层的配置文件_config.yml,进入文件内,搜索deploy进行如下更改,repo是我们刚才创建的github的仓库地址

    deploy:
    type: git
    repo: https://github.com/yangxinjian/yangxinjian.github.io
    branch: master

    完成连接,我们可以通过push,将代码提交到github,也可以通过hexo

    • git push origin master

    也会出现Not a git repository (or any of the parent directories): .git这样的错误。这个错误代表在本地与github仓库未进行连接,解决办法如下:
    * 在该目录下输入:git init
    * git add . (提交代码)
    * git commit -m '备注'
    * git remote add origin '你的仓库地址'
    * git push origin master (完成提交)

    • npm install hexo-deployer-git --save
    • hexo g
    • hexo d

    在这步骤可能会出现Repository not found.这个错误,这个错误出现,你就要检查一下你的仓库名字和你在配置相中写入到名字是否一致

4.开启运行

  • 本地运行 hexo s -g
  • 线上查看地址 https://你的仓库名字.github.io/

第二步:配置主题以及基本文字

1.配置主题

  • git clone https://github.com/iissnan/hexo-theme-next themes/next (克隆主题)

  • 在最外层的配置文件中_config.yml 将theme更改为next

    theme: next

  • 在themes文件夹下的next文件夹下找到主题配置文件_config

    scheme 分别有四个主题选项,可以随意选择,#代表注释,去掉注释代码生效,一次只可以选择一个主题

  • social可以增添一些其他社会信息(例如github)

    social:GitHub: https://github.com/yangxinjian || github

  • avatar可以增添自己的头像(例如github)

    avatar: http://oqk0uz684.bkt.clouddn.com/WeChat%20Image_20180516113012.jpg

  • pace_theme下的四个为主题动画,将其中一个设置为true,即可以开启当前动画

  • 安装wordcount显示文章字数,在主题的config中搜索wordcount,全部设置为true

    cnpm install hexo-wordcount --save

  • 安装站内搜索插件,在主题的config中搜索local-search,enable为true

    cnpm install hexo-generator-searchdb --save

2.基本文字

基本文字在最外层的_config文件中配置,例如:标题,描述,作者等信息

title: 杨欣舰的博客 
subtitle:
description: 小前端的小笔记
keywords:
author: Sunny Yang

3.设置打赏小功能

在目录source下建立一个image文件夹用来存储支付图片

在总的_config.yml下设置支付代码
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /image/wechat.jpeg
alipay: /image/zhifubao.jpeg

4.设置分享功能

在主题的配置文件中加入
baidushare:  
    type: button  
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容