莫方教程网

专业程序员编程教程与实战案例分享

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 证书

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言