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

3.4万 Star,一款博客框架_博客搭建

ruisui884个月前 (02-05)技术分析49

前言

大家好,今天推荐一款能快速构建博客的框架 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 证书

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1698.html

标签: 技术博客
分享给朋友:

“3.4万 Star,一款博客框架_博客搭建” 的相关文章

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

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

在Excel中处理大量数据时,经常需要根据特定条件筛选出符合条件的数据行或列。这正是Excel的FILTER函数发挥作用的地方。FILTER函数是Excel中一个非常强大的工具,它可以基于一个或多个条件动态地过滤数据,使数据分析和报告制作变得更加高效和准确。本文将详细介绍FILTER函数的用法,并提...

Vue学习笔记之动态路由的参数传递应用及技巧

路由的参数传递:①通过params的类型· 配置路由格式:/router/:id· 传递的方式:在path后面跟上对应的值· 传递后形成的路径:/router/list,/router/profile这个就是前两篇中提到的"动态路由"中有应用过这个方法:②通过query的类型(对象方...

vue 开发规范

项目运行指南(#项目运行指南)开发本地环境(#开发本地环境)开发相关插件/工具(#开发相关插件工具)开发规范(#开发规范)vue(#vue)【数据流向】(#数据流向)【慎用全局注册】(#慎用全局注册)【组件名称】(#组件名称)【组件中的 CSS】(#组件中的-css)【统一标签顺序】(#统一标签顺序...

SpringCloudalibaba+Vue开发仿社交小程序-青牛白马七香车

Spring Cloud Alibaba和Vue是当今开发领域中最为流行的技术组合之一。本文将介绍如何使用Spring Cloud Alibaba和Vue开发仿社交小程序。download: https://www.97yrbl.com/t-1632.html项目概述本项目是一个仿社交小程序,包括用...