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

先上效果

在线查看:https://hongxh.cn/

Github 源码

https://github.com/hxh2010/hexo-butterfly

Hexo

hexo在线文档

安装：

$ npm install -g hexo-cli

建站：

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

Butterfly

Butterfly github
Butterfly 文档

下载主题，拷贝至 themes 目录

git clone https://github.com/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:https://github.com/hxh2010 || Githubfas fa-envelope:mailto:316020201@qq.com || Email# Local search
local_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_img
default_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 introduction
index_post_content:method: 3length: 500 # if you set method to 2 or 3, the length need to config# Related Articles
related_post:enable: truelimit: 6 # Number of posts displayeddate_type: created # or created or updated 文章日期顯示創建日或者更新日# valine
# https://valine.js.org
valine:appId: XXXXXXXXXXXXXXXXX # leancloud application app idappKey: XXXXXXXXXXXXXXXX # leancloud application app keypageSize: 10 # comment list page sizeavatar: mp # gravatar style https://valine.js.org/#/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

结语

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

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

基于Hexo框架快速搭建个人博客--文章一键发布（五）
基于Hexo框架快速搭建个人博客--文章一键发布一.文章对比二.发布到Github 三.一键发布四.总结博客链接: 会思想的苇草i 文章链接: 基于Hexo框架快速搭建个人博客–搭建(一) 基 ...
Hexo + Butterfly 从零开始搭建个人博客（三）
有些效果无法在这儿体现,如果想看完整的效果,请移步个人站点. 原文链接:基于 Hexo 从零开始搭建个人博客(三) 阅读本篇前,请确保已经完成下面两篇文章的步骤: 基于 Hexo 从零开始搭建个人博客 ...
Hexo + Butterfly 从零开始搭建个人博客（五）
有些效果无法在这儿体现,如果想看完整的效果,请移步个人站点. 原文链接:基于 Hexo 从零开始搭建个人博客(五) 阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 ...
零基础免费通过hexo+github快速搭建个人博客（超详细图解+B站视频讲解资源）
我的个人博客效果预览https://furfur-jiang.github.io/ 加载可能会比较慢,因为是挂载到github上的样式基于hexo-theme-matery主题 ,这个主题我特别喜 ...
Hexo+GitHub 快速搭建个人博客（三）---- 改变主题
前期准备: 基本的Linux命令基本的GitHub命令 Hexo有多种博客框架,在 https://hexo.io/themes/ 里可以找到非常多优秀的博客框架,而且都是免费的. 首先大家可以去找 ...
Hexo+GitHub 快速搭建个人博客（二）---- 域名解析
前期准备: 备案的国内域名或者国外域名 (后面会解释为什么,这里以阿里云域名为例) 一.将个人域名与GitHub博客绑定我们在Hexo目录下的source子目录内创建一个txt文件,内容写自己的域名 ...
Hexo+GitHub 快速搭建个人博客（一）---- 基本部署
前期准备: 1.Git shell 2.node.js 3.在github上创建一个仓库,仓库命名格式为xxx.github.io 一.安装Hexo cd进入自己想要安装的目录下,执行下面的命令 np ...
如何使用Github+Hexo快速搭建个人博客
如何使用Github+Hexo快速搭建个人博客可以移步地址:https://zyt505050.gitee.io/2019/01/27/ru-he-shi-yong-github-hexo-kuai ...
使用Hexo 和Github搭建个人博客
文章目录 **背景知识** 搭建环境安装必要软件配置 Git SSH key 配置 Hexo 使用 Github Page 仓库写博客创建一个新页面生成静态文件发布博文到 Github P ...

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

先上效果

Github 源码

Hexo

Butterfly

结语

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

最新文章

热门文章