> 作为程序员，如果你喜欢输出技术文章的话，一定有过搭建个人博客网站的想法。对比了好多博客框架之后，我发现Hexo+`hexo-theme-matery`主题搭建的博客网站，不仅界面漂亮，而且功能强大。今天带大家使用Hexo搭建一个靓丽的博客网站，希望对大家有所帮助！ SpringBoot实战电商项目mall（50k+star）地址：[https://github.com/macrozheng/mall](https://github.com/macrozheng/mall) ## Hexo简介 Hexo是一个快速、简洁且高效的博客框架。我们可以使用Markdown写文章，然后通过Hexo生成静态网站，Hexo的主题非常丰富，很多你见过的博客都是用它生成的。 ## hexo-theme-matery主题使用Hexo时，我们一般会搭配第三方主题来使用，这里推荐一款基于Material Design设计的主题`hexo-theme-matery`，界面简单漂亮，文章内容美观易读。响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现。内置丰富插件，功能强大。 ## 效果演示我们先来看下成品效果，Hexo配上这个主题，界面还是挺漂亮的，想搭博客的朋友可以试下！ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15ff65c15e8d4c11ab65f0d2fd92c961~tplv-k3u1fbpfcp-zoom-1.image) ## 搭建 > 我们将先使用Hexo搭建一个基本的博客网站，然后切换到`hexo-theme-matery`主题。 - 首先使用如下命令安装`hexo-cli`，看名字就知道是Hexo的CLI工具； ```bash npm install -g hexo-cli ``` - 安装成功后初始化一个博客目录，并进入该目录，然后安装依赖； ```bash # 初始化博客目录 hexo init website-hexo # 进入博客目录 cd website-hexo # 安装博客相关依赖 npm install ``` - 这样一个基本的博客网站就搭建完毕了，是不是秒建博客网站，然后使用如下命令启动博客网站； ```bash hexo server ``` - 启动成功后我们可以访问下主页，用过Hexo的朋友应该知道，Hexo要搭配主题来使用，否则真的很丑，访问地址：http://localhost:4000/ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7beede1519d4f1aa69dee9507a7a11a~tplv-k3u1fbpfcp-zoom-1.image) ## 配置 > 搭建博客网站，有些配置需要自定义，接下来我们来讲下Hexo的整体配置和`hexo-theme-matery`的主题配置。 ### Hexo整体配置 > 支持Hexo的主题有很多，这里选择了我认为比较漂亮的一个`hexo-theme-matery`。 - 首先下载主题，并解压到项目的`themes`目录下，下载地址：https://github.com/blinkfox/hexo-theme-matery ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6464623025264104878bb9b2f5d626ba~tplv-k3u1fbpfcp-zoom-1.image) - 修改项目根目录下的配置文件`_config.yml`，该文件为Hexo的整体配置，将`theme`属性改为`hexo-theme-matery`； ```yaml theme: hexo-theme-matery ``` - 修改成功后，我们重新启动项目，再看下首页，果然页面漂亮了很多，访问地址：http://localhost:4000/ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92a99af001cd48f39784742b08cf694e~tplv-k3u1fbpfcp-zoom-1.image) - 当然`_config.yml`文件不仅可以改主题，还有很多网站配置也是可以更改的，比如网站配置、网址配置、首页配置等。 ```yaml # 网站配置 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: 12 pagination_dir: page ``` ### 添加固定页面 - 在首页顶部有一些导航按钮，如标签、分类、归档等，如果我们没创建对应页面的话，会无法访问； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/447602cbabb04e1d8aa48c07f290c88f~tplv-k3u1fbpfcp-zoom-1.image) - 使用`hexo new page "categories"`命令新建分类页，分类页至少包含如下内容； ```markdown --- title: categories date: 2021-09-06 10:19:56 type: "categories" layout: "categories" --- ``` - 使用`hexo new page "tags"`命令新建标签页，标签页至少包含如下内容； ```markdown --- title: tags date: 2021-09-06 10:25:04 type: "tags" layout: "tags" --- ``` - 使用`hexo new page "about"`命令新建关于页，关于页至少包含如下内容； ```markdown --- title: about date: 2021-09-06 10:28:56 type: "about" layout: "about" --- ``` - 使用`hexo new page 404`命令新建404页，404至少包含如下内容； ```markdown --- title: 404 date: 2021-09-06 10:32:48 type: "404" layout: "404" description: "Oops～，我崩溃了！找不到你想要的页面 :(" --- ``` - 页面都创建成功后，项目目录结构如下，这里贴下目录，方便大家理解。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e15dfa14e09c4b76ae98d057daf3873e~tplv-k3u1fbpfcp-zoom-1.image) ### 主题配置 > 我们不仅需要修改Hexo的配置，还需要修改`hexo-theme-matery`主题的配置，比如顶部的菜单导航，还有关于页面，这些都是在主题中配置的。注意：主题配置需要修改`/themes/hexo-theme-matery/_config.yml`文件。 - 我们可以对导航菜单进行配置，比如我添加了`项目`这个导航菜单； ```yaml # 配置菜单导航的名称、路径和图标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 ``` - 添加成功后，导航菜单里面就有了`项目`这个菜单，并且可以展示二级菜单； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a0a5c078e8f4344a732633d38916840~tplv-k3u1fbpfcp-zoom-1.image) - 我们可以对首页介绍进行配置，修改`dream`下的配置即可； ```yaml # 配置首页显示"梦想"的语句. dream: enable: true showTitle: true title: 关于本站 text: 本站是macrozheng的个人博客网站，初衷是为了分享和记录自己平时所学到的技术。作者Github开源项目mall（50K+Star），欢迎关注我的公众号「macrozheng」。 ``` - 配置成功后首页显示如下； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d8d44ff4e6240d4bf086d5b77558ba8~tplv-k3u1fbpfcp-zoom-1.image) - 我们可以对首页banner中的个人信息进行配置； ```yaml # 首页 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`文件，增加如下内容，否则无法显示； ```ejs <% if (theme.socialLink.juejin) { %> <% } %> <% if (theme.socialLink.jianshu) { %> <% } %> ``` - 配置成功后首页显示如下； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d597f5ad0f7f46959a18ac3075cd5620~tplv-k3u1fbpfcp-zoom-1.image) - 我们可以对关于页进行配置，下面配置了个人信息、我的项目，关闭了技术展示； ```yaml # 在”关于”页面中配置个人信息，包括头像、职业和个人介绍. 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% ``` - 配置成功后个人页显示如下； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/343fd0a49eec42a29b9cd3a6cbcfdd9c~tplv-k3u1fbpfcp-zoom-1.image) - 还有一些其他有用的配置，比如Github链接配置、转载配置、分享配置、打字机副标题配置和备案号配置等。 ```yaml # 配置是否在 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`目录中添加好了文章，重启博客网站就可以看到了； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e71da8113d14fa1884fd9cf1522a94f~tplv-k3u1fbpfcp-zoom-1.image) - 我们必须给每篇文章添加`Front-matter`，`Front-matter`可以用来配置文章的标题、分类、标签等信息，一个简单的配置如下； ```markdown --- title: mall整合SpringBoot+MyBatis搭建基本骨架 date: 2021-08-21 16:30:11 permalink: /pages/c68875/ categories: - mall学习教程 - 架构篇 tags: - SpringBoot - MyBatis --- ``` - `Front-matter`的配置很多，这里就不展开描述了，直接参考下表即可； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee1802ee067c496396c50e4dd463ba18~tplv-k3u1fbpfcp-zoom-1.image) - 如果你想让某些文章在首页获得推荐的话，可以添加`top: true`配置； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7193de7d8ab64cb98ad6614eb09b673f~tplv-k3u1fbpfcp-zoom-1.image) - 如果你直接复制图片过来的话，你会发现图片是无法显示的，我们需要把文章图片的相对路径改为绝对路径才可以显示； ```markdown ![相对图片路径](../images/springcloud_arch.png) ![绝对图片路径](/images/springcloud_arch.png) ``` - 如果你的文章中有代码的话，默认情况下显示会有问题，需要修改Hexo的配置`_config.yml`，禁用`highlight`，启用`prismjs`才可以正常显示； ```yaml highlight: enable: false line_number: true auto_detect: false tab_replace: '' wrap: true hljs: false prismjs: enable: true preprocess: true line_number: true tab_replace: '' ``` - 这里如果不生效的话，可以使用`hexo clean`命令清空缓存再试试，附一张代码块样式对比图； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34c2ca9eca964920a7e00d8220a332d5~tplv-k3u1fbpfcp-zoom-1.image) - 还有默认情况下搜索插件是不生效的，我们需要先使用如下命令安装搜索插件； ```bash npm install hexo-generator-search --save ``` - 然后修改Hexo在根目录下的配置文件`_config.yml`，新增如下配置； ```yaml search: path: search.xml field: post ``` - 搜索生效以后，显示效果如下。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03e66e944eba4c598a2f13f08f75821b~tplv-k3u1fbpfcp-zoom-1.image) ## 部署 > Hexo生成网站既快速又简单，一个命令生成静态文件，然后放置到Nginx的html目录下即可。 - 在命令行使用`hexo generate`命令可以将项目打包成静态文件，输出文件目录为`public`； ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd9b5371d9df431bb6289e6a94faf87e~tplv-k3u1fbpfcp-zoom-1.image) - 接下来把`public`目录下的所有文件复制到Nginx的`html`目录下即可完成部署，部署后显示内容如下。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/841735051a4d42dc86a50a9be421be4e~tplv-k3u1fbpfcp-zoom-1.image) ## 总结使用Hexo搭配`hexo-theme-matery`来搭建博客网站，不仅界面漂亮，而且功能强大。如果你想搭建自己的博客网站，这是个很好的选择！ ## 参考资料 - hexo-theme-matery主题官网：https://github.com/blinkfox/hexo-theme-matery - hexo官网：https://hexo.io/zh-cn/ ## 项目地址 https://github.com/blinkfox/hexo-theme-matery > 本文 GitHub [https://github.com/macrozheng/mall-learning](https://github.com/macrozheng/mall-learning) 已经收录，欢迎大家Star！