美文网首页自动化效率神器工具癖Hexo
菜鸟轻松建站【Hexo自由博客】(3/3)

菜鸟轻松建站【Hexo自由博客】(3/3)

作者: 雷迪 | 来源:发表于2017-04-08 16:27 被阅读120次
封面

前文提要

本期概要

  • Hexo 博客的基本参数设置
  • 头像设置
  • 分类和标签的使用
  • 强迫症侧栏显示效果
  • 文章缩略图显示效果
  • 小白一键备份

开始行动

1.0 Hexo 博客的基本参数设置

打开站点配置文件 _config.yml ,注意是根目录下的大哥

title:                 # 网站标题
subtitle:              # 网站副标题
description:           # 网站描述
author:                # 你的昵称

**2.0 头像设置 **

F:\hexo\blog\themes\next\source\images按照你安装的Hexo 盘符,找到以上路径,如果没有images文件夹,就新建一个。

头像尺寸为120X120PX,设计好之后重名为: avatar.png

站点配置文件_config.yml中增加一条命令(加哪里都行):

# avatar
avatar: /images/avatar.png

设置好1.0和2.0之后,保存站点配置文件,然后渲染并部署。

  • Blog 目录下右击,点 git bash here ,输入 hexo d -g
  • 或运行 Hexo 目录下的“渲染并部署.bat”脚本

3.0 分类和标签的使用

主题配置文件下设置

3.1 添加「标签」页面

新建页面

hexo new page categories

修改站点目录下 source/categories 的 index.md 文如下:

---
title: categories
type: "categories"
comments: false
---

3.2 添加「分类」页面

新建页面

hexo new page categories

修改站点目录下 source/categoriesindex.md 文如下:

---
title: categories
type: "categories"
comments: false
---

3.3 同样的方法以此类推:添加「about」页面

hexo new page about

3.4 腾讯公益404页面

腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!

使用方法,新建 404.html 页面,放到根目录下的 source 文件夹中,内容如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="your site url "
        homePageName="回到我的主页">
</script>

</body>
</html>

4.0 强迫症侧栏显示效果

  • 去掉了侧栏公益404的404,上下对齐;
  • 文章目录,用 Markdown 语法创作文章,上传博客自动生成;

4.1 如何修改侧栏的名称?

找到对应盘符下 F:\hexo\blog\themes\next\languages 打开 zh-Hans.yml

修改对应字段,保存,渲染并更新。

  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益

5.0 文章缩略图显示

Markdown 创作文章时,只需要插入 `` 到指定位置,页面效果就会按照你的分割要求显示。

你可以把``当作分割线。

6.0 小白一键备份

截止本期教程,相信大家已经完成了 Hexo 博客的部署和搭建,成果来之不易,考虑还会接着折腾,因此目前这样干净清爽的界面设为还原基准很有必要。

Github 本身就是一个存储仓库,上传和下载均没有问题,但需要通过命令操作,不是很直观,存在一定本地文件夹被替换之类的风险。

那么既简单又不需要任何代码的备份,应该这么做?

答案很简单,整个 Hexo 文件夹复制,将粘贴后的文件夹作为备份。

当你的 Hexo 出现不可修复的问题时,只需将备份文件复制替换,这样既可避免出现错误后从头来过,又可以拷贝到U盘,让其他电脑均可使用。

写在最后

我们建博客的目的是为了将自己个人的经验和技巧总结归纳,并愉快地分享出去。

不要每天纠结于如何修改 Hexo 博客外观,究竟哪个主题才适合自己,要不要安装评论插件,可不可以增加一个分享图标等等诸如此类的问题。

每个人都有权利追求自己心目中的完美。但不要等待一切完美之后,你才动手开始写博客,这样会直接导致你觉得博客还不是心目中完美的样子而迟迟不肯动笔,时间久了,又会陷入自我逃避,甚至拖延到不了了之。

我们一定要马上开始写。俗话说:绣花枕头烂稻草。再精美的盒子里面装臭袜子又有什么用。博客再漂亮也比不过几篇扎扎实实的文章。至于那些锦上添花的设置,可以在今后日子逐步添加,切不可,捡了芝麻,丢了西瓜。

感谢你阅读菜鸟搭建 Hexo 博客的基础全教程,但愿你已经开始行动!

参考资料

Next官方技术手册

Hexo博客搭建全攻略(二):NexT主题配置

相关文章

  • 菜鸟轻松建站【Hexo自由博客】(3/3)

    前文提要 零代码搭建 Hexo 博客 更换 Next 主题,并切换 Pisces 风格 将博客语言设定为中文 如何...

  • 菜鸟轻松建站【Hexo自由博客】(1/3)

    前言 本教程的Hexo博客系统的搭建无须使用一条代码,轻松安装,告别繁琐。 新浪博客、QQ空间、豆瓣九点相继被人们...

  • 菜鸟轻松建站【Hexo自由博客】(2/3)

    前文提要 零基础零代码搭建Hexo博客系统; 根据菜鸟教程(1/3)想必你已经搭建好hexo,这两天你也学习了相关...

  • HEXO搭建个人博客基础——建站发布

    HEXO搭建个人博客基础——建站发布 一、 HEXO 使用环境基础 HEXO博客搭建环境必须包括 NodeJS 与...

  • Gitee+Hexo搭建个人博客

    Gitee+Hexo搭建个人博客 用Hexo 3 搭建github blog Hexo图片显示(typora工具辅...

  • Hexo搭建GitHub博客--初级(二)

    简介 上篇我们主要讲的是如何通过Hexo建站,并如何部署到GitHub上Hexo搭建GitHub博客--初级(一)...

  • 无标题文章

    title: '博客重新开张、hexo建站 ' date: 2015-08-12 11:14:37 tags: [...

  • 搭建hexo博客(3)

    前言 看了之前的文章,你自己写文章已经OK了,如果你想把博客变得更炫酷(头像旋转、背景动画等),我推荐看这篇文章,...

  • Hexo 新手记

    准备使用 hexo 来写博客 自定义主题 hexo-theme-3-hexo 是个很棒的主题,要使用它,可以按以下...

  • hexo建站教程

    大多数人想用很短的时间搭建一个自己的博客,在这里推荐Hexo建站 什么是 Hexo? Hexo 是一个快速、简洁且...

网友评论

    本文标题:菜鸟轻松建站【Hexo自由博客】(3/3)

    本文链接:https://www.haomeiwen.com/subject/edglattx.html