Hexo+Butterfly 快速搭建个人博客【附源码】

先上效果

在线查看:/

Github 源码

/hxh/hexo-butterfly

Hexo

hexo在线文档

安装：

$ npm install -g hexo-cli

建站：

$ hexo init <folder>$ cd <folder>$ npm install

Butterfly

Butterfly github

Butterfly 文档

下载主题，拷贝至themes目录

git clone /jerryc127/hexo-theme-butterfly.git

根据 butterfly 文档修改_config.yml及themes/_config.yml文件

不建议采用butterfly文档上一个配置文件的方式，否则你配置项找半天

1._config.yml (删除默认部分)

#网站标题title: 记忆碎片 #副标题subtitle: '博客' #头像下方签名description: 玻璃晴朗，橘子辉煌。 keywords: ''#作者 显示在头像下方、页脚、版权声明等处author: 半个夕阳 #修改为中文language: zh-CN timezone: ''#若网站为子路径时配置root: / ......#修改为butterfly主题theme: butterfly

themes/_config.yml (删除默认部分)

menu:首页: / || fas fa-home标签: /tags/ || fas fa-tags分类: /categories/ || fas fa-folder-open留言板: /messageboard/ || fa fa-paper-plane关于我: /about/ || fas fa-heart...social:fab fa-github:/hxh || Githubfas fa-envelope:mailto:31601@ || Email# Local searchlocal_search:enable: true# Favicon（網站圖標）favicon: http://122.152.209.91/images/favicon.ico# Avatar (頭像)avatar:img: http://122.152.209.91/images/header.jpgeffect: false #头像会一直转圈# 主页大图index_img: http://122.152.209.91/images/blog/index.jpg# If the banner of page not setting, it will show the top_imgdefault_top_img: http://122.152.209.91/images/blog/index.jpg# note: tag page, not tags page (子標籤頁面的 top_img)tag_img: http://122.152.209.91/images/blog/index.jpgcategory_img: http://122.152.209.91/images/blog/index.jpgcover:# display the cover or not (是否顯示文章封面)index_enable: trueaside_enable: truearchives_enable: trueposition: bothdefault_cover: http://122.152.209.91/images/blog/index.jpg# Display the article introduction on homepage# 1: description# 2: both (if the description exists, it will show description, or show the auto_excerpt)# 3: auto_excerpt (default)# false: do not show the article introductionindex_post_content:method: 3length: 500 # if you set method to 2 or 3, the length need to config# Related Articlesrelated_post:enable: truelimit: 6 # Number of posts displayeddate_type: created # or created or updated 文章日期顯示創建日或者更新日# valine# valine:appId: XXXXXXXXXXXXXXXXX # leancloud application app idappKey: XXXXXXXXXXXXXXXX # leancloud application app keypageSize: 10 # comment list page sizeavatar: mp # gravatar style /#/avatarlang: zh-CN # i18n: zh-CN/zh-TW/en/japlaceholder: 留下你的想法，已读必回！ # valine comment input placeholder (like: Please leave your footprints)guest_info: nick,mail # valine comment header info (nick/mail/link)recordIP: false # Record reviewer IPserverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)bg: # valine backgroundemojiCDN: # emoji CDNenableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ AvatarrequiredFields: nick,mail # required fields (nick/mail)option:# the subtitle on homepage (主頁subtitle)subtitle:enable: trueeffect: trueloop: falsesource: falsesub: "一念山河成，一念百草生。"# Loading Animation (加載動畫)preloader: false# aside (側邊欄)# --------------------------------------aside:enable: truehide: falsebutton: truemobile: true # display on mobileposition: right # left or rightcard_author:enable: truedescription:button:icon: fas fa-hometext: 个人主页link: http://122.152.209.91/me/card_announcement:enable: truecontent: 念念不忘，必有回响。card_recent_post:enable: truelimit: 5 # if set 0 will show allsort: date # date or updatedcard_categories:enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/falsecard_tags:enable: truelimit: 40 # if set 0 will show allcolor: falsecard_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allcard_webinfo:enable: truepost_count: truelast_push_date: true

结语

文档有的内容就不赘述了，如果对你有帮助，点个星吧！有什么需要可以留言！