当前位置:首页 > 技术文章 > 正文内容

3.4万 Star,一款博客框架_博客系统模板

前言

大家好,今天推荐一款能快速构建博客的框架 Hexo,此项目在github上星星数目前是3.4万多。Hexo 阿宏也使用了三四年了,无论是作为个人笔记、分享、创作都是极其便捷高效的。

Hexo 特点

  1. 由Node.js开发。
  2. 支持Markdown以及大部分Octopress插件。
  3. 一键部署到Github、Heroku。
  4. 强大的API扩展。
  5. 支持非常多的主题以及插件。

Hexo 使用

  1. 安装Hexo
npm install hexo-cli -g

如果是mac用户,可以使用brew进行安装

brew install hexo
  1. 初始化项目
brew install hexo

项目结构如下:

  1. 新建文章

如果想新建一篇blog,那么就可以在项目根目录下执行如下命令即可,

hexo new "文章名"

在source/_posts文件夹中会看到一个‘文章名.md’文件和一个文章名命名的文件夹,这时你只需编辑这个md文件即可,该文件最开始如下编辑,tags为你的名字,categories为文章所属分类。

---
title: kubernetes
date: 2022-04-24 17:06:06
categories: 云原生
tags: hexo
---

如需在文章中插入图片,则需将图片拷入以文章名命名的文件夹中,并在博文要插入图片的地方通过以下方式引入:

{% asset_img 图片名.png 图片标题 %}
  1. 启动服务

当创作完文章时,如果想要本地浏览,只需执行hexo server。

hexo server


安装next主题

Hexo安装好后默认主题是landscape,当然也可以安装其他主题,这里以安装next主题示例。

下载next 主题,https://theme-next.org/

git clone https://github.com/theme-next/hexo-theme-next themes/next

修改hexo根目录里的配置文件_config.yml中的主题设置

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

next根目录下也会有一个_config.yml文件,是next的配置文件,next有四种scheme:Muse,Mist,Pisces,Gemini,我们采用Gemini。配置好后,运行hexo。

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

效果展示

ps:动图,网速慢的小伙伴可以稍等片刻~~

Hexo 项目地址

https://github.com/hexojs/hexo

大家可以自己建站并通过 Hexo 来部署自己的Blog。

对于网站证书,大家可以参考阿宏之前的文章可以申请到永久免费的 SSL 证书。

往期推荐

教你如何申请永久免费 SSL 证书

相关文章

Vue父子组件参数传递方法(vue父子组件传参方式)

在 Vue 中,父子组件之间的参数传递是常见的需求,主要通过 Props 和 自定义事件 实现。以下是详细说明和代码示例:一、父组件向子组件传递参数(Props)父组件通过 属性 向子组件传递数据,子...

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title...

(在线编辑DWG)网页CAD二开实现焊接符号绘制

前言在工程制图和制造领域,焊接符号(Welding Symbols)是用于表示焊缝类型、尺寸、位置以及工艺要求的标准化图形语言。广泛应用于机械设计、钢结构、船舶制造、压力容器等行业中,帮助技术人员理解...

HTML5培训的学习大纲

第一阶段前端开发基础:1.HTML标签语言(xhtml+html5)行业介绍,本地环境配置,sublime编辑器学习使用,制作html标准模板,css基础,html常用标签(一),html常用标签(二...

育知HTML5培训,为什么要学习“HTML5混合式开发技术”

HTML5 的广泛应用,强势崛起企业现在安卓、iOS开发人员都在学习HTML5混合开发,节约成本、一专多能是未来很多企业用人趋势!HTML5工程师在今后的工作中与 Android、iOS工程师对接的几...

Excel中的FILTER函数详细介绍及使用示例

在Excel中处理大量数据时,经常需要根据特定条件筛选出符合条件的数据行或列。这正是Excel的FILTER函数发挥作用的地方。FILTER函数是Excel中一个非常强大的工具,它可以基于一个或多个条...