作为程序员，如果你喜爱输入技术文章的话，肯定有过搭建集体博客网站的想法。比照了好多博客框架之后，我发现Hexo+hexo-theme-matery主题搭建的博客网站，不仅界面丑陋，而且功能强大。明天带大家应用Hexo搭建一个靓丽的博客网站，心愿对大家有所帮忙！

SpringBoot实战电商我的项目mall（50k+star）地址：https://github.com/macrozheng/mall

Hexo简介

Hexo是一个疾速、简洁且高效的博客框架。咱们能够应用Markdown写文章，而后通过Hexo生成动态网站，Hexo的主题十分丰盛，很多你见过的博客都是用它生成的。

hexo-theme-matery主题

应用Hexo时，咱们个别会搭配第三方主题来应用，这里举荐一款基于Material Design设计的主题hexo-theme-matery，界面简略丑陋，文章内容好看易读。响应式设计，博客在桌面端、平板、手机等设施上均能很好的展示。内置丰盛插件，功能强大。

成果演示

咱们先来看下成品成果，Hexo配上这个主题，界面还是挺丑陋的，想搭博客的敌人能够试下 ！

搭建

咱们将先应用Hexo搭建一个根本的博客网站，而后切换到hexo-theme-matery主题。
  • 首先应用如下命令装置hexo-cli，看名字就晓得是Hexo的CLI工具；
npm install -g hexo-cli
  • 装置胜利后初始化一个博客目录，并进入该目录，而后装置依赖；
# 初始化博客目录hexo init website-hexo# 进入博客目录cd website-hexo# 装置博客相干依赖npm install
  • 这样一个根本的博客网站就搭建结束了，是不是秒建博客网站，而后应用如下命令启动博客网站；
hexo server
  • 启动胜利后咱们能够拜访下主页，用过Hexo的敌人应该晓得，Hexo要搭配主题来应用，否则真的很丑，拜访地址：http://localhost:4000/

配置

搭建博客网站，有些配置须要自定义，接下来咱们来讲下Hexo的整体配置和hexo-theme-matery的主题配置。

Hexo整体配置

反对Hexo的主题有很多，这里抉择了我认为比拟丑陋的一个hexo-theme-matery。
  • 首先下载主题，并解压到我的项目的themes目录下，下载地址：https://github.com/blinkfox/h...

  • 批改我的项目根目录下的配置文件_config.yml，该文件为Hexo的整体配置，将theme属性改为hexo-theme-matery；
theme: hexo-theme-matery
  • 批改胜利后，咱们重新启动我的项目，再看下首页，果然页面丑陋了很多，拜访地址：http://localhost:4000/

  • 当然_config.yml文件不仅能够改主题，还有很多网站配置也是能够更改的，比方网站配置、网址配置、首页配置等。
# 网站配置title: macrozheng # 网站题目subtitle: 'macrozheng 的集体博客' # 网站副标题description: 'Justice may be late, but will never be absent.' # 网站形容keywords:author: macrozheng # 网站作者language: zh-CN # 网站应用的语言，能够设置为中文timezone: ''# 网址配置url: http://localhost:4000 # 网址，会影响文章页的原文链接地址permalink: :year/:month/:day/:title/ # 文章的永恒链接格局# 首页配置index_generator:  path: ''  per_page: 12 # 分页设置，该主题设置6、12、18比拟好  order_by: -date # 按工夫倒序排列# 分页配置per_page: 12pagination_dir: page

增加固定页面

  • 在首页顶部有一些导航按钮，如标签、分类、归档等，如果咱们没创立对应页面的话，会无法访问；

  • 应用hexo new page "categories"命令新建分类页，分类页至多蕴含如下内容；
---title: categoriesdate: 2021-09-06 10:19:56type: "categories"layout: "categories"---
  • 应用hexo new page "tags"命令新建标签页，标签页至多蕴含如下内容；
---title: tagsdate: 2021-09-06 10:25:04type: "tags"layout: "tags"---
  • 应用hexo new page "about"命令新建对于页，对于页至多蕴含如下内容；
---title: aboutdate: 2021-09-06 10:28:56type: "about"layout: "about"---
  • 应用hexo new page 404命令新建404页，404至多蕴含如下内容；
---title: 404date: 2021-09-06 10:32:48type: "404"layout: "404"description: "Oops～，我解体了！找不到你想要的页面 :("---
  • 页面都创立胜利后，我的项目目录构造如下，这里贴下目录，不便大家了解。

主题配置

咱们不仅须要批改Hexo的配置，还须要批改hexo-theme-matery主题的配置，比方顶部的菜单导航，还有对于页面，这些都是在主题中配置的。留神：主题配置须要批改/themes/hexo-theme-matery/_config.yml文件。
  • 咱们能够对导航菜单进行配置，比方我增加了我的项目这个导航菜单；
# 配置菜单导航的名称、门路和图标icon.menu:  Index:    url: /    icon: fas fa-home  我的项目:    icon: fas fa-project-diagram"    children:      - name: mall        url: https://github.com/macrozheng/mall      - name: mall-admin-web        url: https://github.com/macrozheng/mall-admin-web      - name: mall-tiny        url: https://github.com/macrozheng/mall-tiny  Tags:    url: /tags    icon: fas fa-tags
  • 增加胜利后，导航菜单外面就有了我的项目这个菜单，并且能够展现二级菜单；

  • 咱们能够对首页介绍进行配置，批改dream下的配置即可；
# 配置首页显示"幻想"的语句.dream:  enable: true  showTitle: true  title: 对于本站  text: 本站是macrozheng的集体博客网站，初衷是为了分享和记录本人平时所学到的技术。作者Github开源我的项目mall（50K+Star），欢送关注我的公众号「macrozheng」。
  • 配置胜利后首页显示如下；

  • 咱们能够对首页banner中的个人信息进行配置；
# 首页 banner 中的第二行个人信息配置，留空即不启用socialLink:  github: https://github.com/macrozheng # https://github.com/xxx  email: macrozheng@126.com # xxx@xxx.com  facebook: # https://www.facebook.com/xxx  twitter: # https://twitter.com/xxx  qq: # 123456789  weibo: # https://weibo.com/xxx  zhihu: # https://www.zhihu.com/xxx  juejin: https://juejin.im/user/5cf7c1d7f265da1bc07e28b7  jianshu: https://www.jianshu.com/u/9bdcaae6d6b7  rss: false # true、false
  • 因为咱们自定义了两个链接，掘金和简书，还须要批改主题目录下的/layout/_partial/social-link.ejs文件，减少如下内容，否则无奈显示；
<% if (theme.socialLink.juejin) { %>    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">        <i class="fab fa-zhihu1">掘</i>    </a><% } %><% if (theme.socialLink.jianshu) { %>    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注我的简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">        <i class="fab fa-zhihu1">简</i>    </a><% } %>
  • 配置胜利后首页显示如下；

  • 咱们能够对对于页进行配置，上面配置了个人信息、我的我的项目，敞开了技术展现；
# 在”对于”页面中配置个人信息，包含头像、职业和集体介绍.profile:  avatar: /medias/avatar.png  career: Java 开发工程师  introduction: 专一Java技术分享，涵盖SpringBoot、SpringCloud、Docker、中间件等实用技术，Github开源我的项目mall（50K+Star）。# 在“对于”页面配置"我的我的项目"信息，如果你不须要这些信息则能够将其设置为不激活或者将其删除.myProjects:  enable: true  data:    mall:      icon: fab fa-java      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'      url: https://github.com/macrozheng/mall      desc: mall我的项目是一套电商零碎，包含前台商城零碎及后盾管理系统，基于SpringBoot+MyBatis实现。    mall-admin-web:        icon: fab fa-vuejs        iconBackground: 'linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)'        url: https://github.com/macrozheng/mall-admin-web        desc: mall-admin-web是一个电商后盾管理系统的前端我的项目，基于Vue+Element实现。    mall-tiny:      icon: fab fa-java      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'      url: https://github.com/macrozheng/mall-tiny      desc: 基于SpringBoot+MyBatis的单利用我的项目骨架。# 在“对于”页面配置"我的技能"信息，如果你不须要这些信息则能够将其设置为不激活或者将其删除.mySkills:  enable: false  data:    Java:      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'      percent: 85%
  • 配置胜利后集体页显示如下；

  • 还有一些其余有用的配置，比方Github链接配置、转载配置、分享配置、打字机副标题配置和备案号配置等。
# 配置是否在 header 中显示 fork me on github 的图标，默认为true，你能够批改为你的仓库地址.githubLink:  enable: true  url: https://github.com/macrozheng  title: Fork Me# 转载申明reprint:  enable: true  default: cc_by_nc_nd  # sharejs文章分享模块.# 反对程序，可选我的项目为twitter, facebook, google, qq, qzone, wechat, weibo, douban, linkedin.sharejs:  enable: true  sites: qq,wechat,weibo,douban  # 打字成果副标题.# 如果有符号 ‘ ，请在 ’ 后面加上 \subtitle:  enable: true  loop: true # 是否循环  showCursor: true # 是否显示光标  startDelay: 300 # 开始提早  typeSpeed: 100 # 打字速度  backSpeed: 50 # 删除速度  sub:    - Justice may be late, but will never be absent.# ICP备案信息尾部显示icp:  enable: false  url: # 备案链接  text: # 备案信息

编写文章

编写文章的话，咱们能够间接应用Markdown来写，而后在头部增加Front-matter配置即可，文章都放在source/_posts目录下。
  • 这里咱们曾经在_posts目录中增加好了文章，重启博客网站就能够看到了；

  • 咱们必须给每篇文章增加Front-matter，Front-matter能够用来配置文章的题目、分类、标签等信息，一个简略的配置如下；
---title: mall整合SpringBoot+MyBatis搭建根本骨架date: 2021-08-21 16:30:11permalink: /pages/c68875/categories:  - mall学习教程  - 架构篇tags:  - SpringBoot  - MyBatis---
  • Front-matter的配置很多，这里就不开展形容了，间接参考下表即可；

  • 如果你想让某些文章在首页取得举荐的话，能够增加top: true配置；

  • 如果你间接复制图片过去的话，你会发现图片是无奈显示的，咱们须要把文章图片的相对路径改为绝对路径才能够显示；
![绝对图片门路](../images/springcloud_arch.png)![相对图片门路](/images/springcloud_arch.png)
  • 如果你的文章中有代码的话，默认状况下显示会有问题，须要批改Hexo的配置_config.yml，禁用highlight，启用prismjs才能够失常显示；
highlight:  enable: false  line_number: true  auto_detect: false  tab_replace: ''  wrap: true  hljs: falseprismjs:  enable: true  preprocess: true  line_number: true  tab_replace: ''
  • 这里如果不失效的话，能够应用hexo clean命令清空缓存再试试，附一张代码块款式比照图；

  • 还有默认状况下搜寻插件是不失效的，咱们须要先应用如下命令装置搜寻插件；
npm install hexo-generator-search --save
  • 而后批改Hexo在根目录下的配置文件_config.yml，新增如下配置；
search:  path: search.xml  field: post
  • 搜寻失效当前，显示成果如下。

部署

Hexo生成网站既疾速又简略，一个命令生成动态文件，而后搁置到Nginx的html目录下即可。
  • 在命令行应用hexo generate命令能够将我的项目打包成动态文件，输入文件目录为public；

  • 接下来把public目录下的所有文件复制到Nginx的html目录下即可实现部署，部署后显示内容如下。

总结

应用Hexo搭配hexo-theme-matery来搭建博客网站，不仅界面丑陋，而且功能强大。如果你想搭建本人的博客网站，这是个很好的抉择！

参考资料

  • hexo-theme-matery主题官网：https://github.com/blinkfox/h...
  • hexo官网：https://hexo.io/zh-cn/

我的项目地址

https://github.com/blinkfox/h...

本文 GitHub https://github.com/macrozheng/mall-learning 曾经收录，欢送大家Star！