小伙伴说VuePress太简洁了,还有没有其他博客推荐?
写在前面
自从上一篇文章发出来之后,不少小伙伴开始用VuePress
搭建自己的个人网站。
如果小伙伴也想用VuePress
零代码零成本搭建个人网站,可以看过来
传送门
当然了,也有小伙伴私信问我: 还有没有其他博客框架推荐,VuePress
搭建起来的个人网站太文档化了,
太简洁了?
答: 萝卜青菜各有所爱,有人喜欢简洁风,就有人喜欢看上去跟美观一点的。
Hexo
开源博客应该可以满足你的需求
一、Hexo博客简介
有一说一,我现在用的个人博客【www.xiezhrspace.cn
】就是通过Hexo
开源博客搭建的。
感兴趣的小伙伴可以访问了看看,是不是你喜欢的风格。
当然了,我用的只是Hexo
博客其中一个主题 Matery
主题,也跟着大佬进行了不少魔改。
到目前为止,Hexo
提供了403 个主题供你选择,如果你一个主题看腻了,换下一个主题就是了。
Hexo
是什么?
我们来看看官网(https://hexo.io/zh-cn/)怎么回答的
Hexo
是一个快速、简洁且高效的博客框架。
Hexo
使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Hexo
在GitHub(https://github.com/hexojs/hexo) 上已经有38.5k
stars ,而且使用的是MIT协议,我们可以放心使用。
小伙伴也不用当心作者不维护了,作者更新还是比较勤快,最近更新在两天前。
二、快速上手
其实中文官方文档https://hexo.io/zh-cn/docs/ 写得已经非常详细了,大家参考文档一步一步来就可以了。
这里充当一下课代表简单总结一下文档内容:
① 前提准备
在安装Hexo
之前,我们需要安装Node.js
,即JavaScript运行环境, 如果小伙伴还想了解更多,可自行百度哈。
接下来需要安装Git
,用来从Github
、Gitee
等仓库拉取代码用的
② 安装Hexo
npm install -g hexo-cli
③ 初始化Hexo
$ hexo init <folder> //在folde文件夹下初始化hexo博客
$ cd <folder> //切换到folde文件夹
$ npm install //安装hexo所需依赖
③ 目录结构
经过上面操作之后,我们可以看到下面目录结构
.
├── _config.yml //网站的 配置 信息,您可以在此配置大部分的参数
├── package.json //应用程序的信息
├── scaffolds //模版 文件夹
├── source //存放用户资源的地方,以后我们写的文章也放这个目录下
| ├── _drafts
| └── _posts
└── themes //存放我们喜欢的个中主题
④ _config.yml
配置文件中配置相关选项
这里的配置内容比较多,主题切换也在这里面, 由于篇幅原因就不展开讲了,大家参考官方文档即可
https://hexo.io/zh-cn/docs/configuration
⑤ 在哪写作?
在前面我们提到过source
目录,我们在 source/_posts
目录下使用markdown 语法写文章即可
⑥ 编译发布启动服务
hexo clean //清除缓存文件和生成的静态文件
hexo g // 生成静态文件,将我们上一步写的文章,编译成html
hexo d // 部署网站
Hexo S //本地电脑启动hexo服务
⑦ Github Pages
部署
我们的网站需要其他小伙伴能够在互联网访问,这一步是必不可少的了
三、主题切换
应小伙伴的问题,这个是主要的一步,你可以在各种好看的主题间来回切换
只要在 themes
文件夹内,新增一个任意名称的文件夹,并修改 _config.yml
内的 theme
设定,即可切换主题。
那么问题又来了,主题在哪找呢?
我们打开 https://hexo.io/themes/ 地址,看上哪个,选哪个即可
四 、主题推荐
不知道大家有没有跟我一个的感觉,看到琳琅满目的主题,反而不知道怎么选了
这里呢,根据个人踩坑经验,给大家推荐几种
4.1 NexT
主题
据说是使用最多的主题
- 在线演示:https://theme-next.js.org/
- 主题仓库:https://github.com/theme-next/hexo-theme-next
- 使用文档:https://theme-next.js.org/docs/
- 推荐值:
4.2 Butterfly 主题
混迹各种博客群多年的我发现,不少小伙伴对这款主题情有独钟
4.3 Fluid主题
- 在线演示:https://hexo.fluid-dev.com/
- 主题仓库:https://github.com/fluid-dev/hexo-theme-fluid
- 使用文档:https://hexo.fluid-dev.com/docs/start/
- 推荐值:
4.4 Volantis 主题
- 在线演示:https://xaoxuu.com/
- 主题仓库:https://github.com/volantis-x/community
- 使用文档:https://volantis.js.org/v6/getting-started/
- 推荐值:
4.5 Matery 主题
- 在线演示:https://xiezhrspace.cn/
- 主题仓库:https://github.com/blinkfox/hexo-theme-matery
- 使用文档:https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
- 推荐值:
注: 由于我目前自己用的是Matery
主题,所有研究得比较多,这里给大家推荐一个经过不少魔改后的主题
https://gitee.com/nekodeng/hexo-theme-itsneko
w(゚Д゚)w 好看的主题真的太多了,根本例举不完。由于篇幅原因,这里就不一一列举了
更多好看的主题等着小伙伴自己去探索,如果您发现上面好看实用的主题,欢迎在留言区互动
五、主题魔改
不管什么主题模板拿过来,肯定有不如意的地方,或者自己想要添加一些个性化的需求,这就需要我们自己魔改了
自己刚开始搭建时,也遇到不少问题。
也是参照了不少大佬写的文章,这里分享出来供大家一起慢慢享用
https://zhangxiaocai.cn/posts/9f117b.html
本期内容到这儿就结束了,希望对您搭建个人网站有所帮助
我们下期再见 ヾ(•ω•`)o (●'◡'●)
小伙伴说VuePress太简洁了,还有没有其他博客推荐?的更多相关文章
- VuePress博客美化之reco主题
vuepress博客主题-vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题.它既可以成为简洁而又不失美观的主题,又可以书写你的项目文档,看起来更有逼格. ...
- VuePress 博客之 SEO 优化(三)标题、链接优化
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...
- 好像leeceode题目我的博客太长了,需要重新建立一个. leecode刷题第二个
376. Wiggle Subsequence 自己没想出来,看了别人的分析. 主要是要分析出升序降序只跟临近的2个决定.虽然直觉上不是这样. 455. 分发饼干 ...
- VuePress从零开始搭建自己的博客
VuePress是什么? VuePress是以Vue驱动的静态网站生成器,是一个由Vue.Vue Router和webpack驱动的单页应用.在VuePress中,你可以使用Markdown编写文档, ...
- 手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- 1小时搞定vuepress快速制作vue文档/博客+免费部署预览
先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导 ...
- 使用VuePress搭建个人博客
使用VuePress搭建个人博客 VuePress 是一个基于 Vue 的静态网站生成器.其中主要用到:Vue,VueRouter,Webpack. 类似的工具:hexo 基于 Markdown 语法 ...
- 女朋友看了我的博客,说太LOW了,于是我搞了一天~
持续原创输出,点击上方蓝字关注我 原创博客+1,点击左下角阅读原文进入 目录 前言 如何下载? 配置文件的分类 基本信息配置 修改主题 Next主题样式设置 添加动态背景 修改链接的样式 添加文章搜索 ...
- 记录一次基于VuePress + Github 搭建个人博客
最终效果图 网站:https://chandler712.github.io/ 一.前言 VuePress 是尤雨溪推出的支持 Vue 及其子项目的文档需求而写的一个项目,UI简洁大方,官方文档详细容 ...
随机推荐
- proteus的C51仿真
Proteus的C51仿真 1.实验原理 Proteus是对C51仿真效果比较好的软件了,可以利用丰富的数字资源的外设实现比较接近实际的设计.仿真方法也比较简单,不需要下载,只需要将仿真文件导出到器件 ...
- HashMap的三种遍历方式--Java--小白必懂
初学Hash Map总感觉它的遍历很麻烦,其实看懂后总结一下就是:集合+泛型,没啥特别的 总结一下HashMap的三种遍历方法如下: 保证一看就会>>> 1 // 对HashMap的 ...
- https://codeforces.com/gym/496137
AB略. C:想复杂了. 只要判断最大的那个能不能继续吃即可. D:我的做法是建完全图然后跑生成树. 实际上可以这么考虑:和a[1]不同的直接连,相同的就和上一轮和a[1]不同的店去连可以O(n). ...
- #dp#洛谷 3244 [HNOI2015]落忆枫音
题目 分析 每个有入度的点可以选择任意一个父节点组成一棵树,那么原来的答案就是 \(\prod_{i=2}^ndeg[i]\) 现在多了一条边,如果边的终点是1或者它是一个自环那么可以不用管这条边. ...
- Stable diffusion 初学者指南
1. Stable diffusion 初学者指南 想掌握Stable Diffusion AI技术吗? 这份初学者指南专为完全没接触过Stable Diffusion或任何AI图像生成器的新手设计. ...
- django admin后台自定义数据保存方式
故事背景是这样的: 为了方便工作中数据的整理,需要开发一个 管理系统,用于记录一些事情. 该系统不需要精美的前端的页面,只需要使用django的admin后台管理就可以了. 我需要在添加数据的时候,把 ...
- 通过 Traefik Hub 暴露家里的网络服务
Traefik Hub 简介 ️Reference: 你的云原生网络平台 -- 发布和加固你的容器从未如此简单. Traefik Hub 为您在 Kubernetes 或其他容器平台上运行的服务提供一 ...
- UML 哲学之道——类图[三]
前言 简单整理一些uml中的类图. 正文 类的基本表示法: 名称.属性(类型.可见性).方法(参数.返回值.可见性) 想上面这样,第一行是名称,第二行是属性,第三行是方法 可见性: 表示public ...
- 部署iis7和vs2010低版本项目遇到的一些问题
前提 本人一直用iis10然后用的是vs2015,项目框架也用的是高版本的,所以后来接触了一个项目,部署iis7遇到的一些问题,按顺序总结出来,希望有所帮助. 正文 按顺序来: 1.HTTP错误 40 ...
- 实训篇-Html-frameset框架集
frameset.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...