写在前面

自从上一篇文章发出来之后,不少小伙伴开始用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,用来从GithubGitee 等仓库拉取代码用的

安装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 主题

据说是使用最多的主题

4.2 Butterfly 主题

混迹各种博客群多年的我发现,不少小伙伴对这款主题情有独钟

4.3 Fluid主题

4.4 Volantis 主题

4.5 Matery 主题

注: 由于我目前自己用的是Matery 主题,所有研究得比较多,这里给大家推荐一个经过不少魔改后的主题

https://gitee.com/nekodeng/hexo-theme-itsneko

w(゚Д゚)w 好看的主题真的太多了,根本例举不完。由于篇幅原因,这里就不一一列举了

更多好看的主题等着小伙伴自己去探索,如果您发现上面好看实用的主题,欢迎在留言区互动

五、主题魔改

不管什么主题模板拿过来,肯定有不如意的地方,或者自己想要添加一些个性化的需求,这就需要我们自己魔改了

自己刚开始搭建时,也遇到不少问题。

也是参照了不少大佬写的文章,这里分享出来供大家一起慢慢享用

https://zhangxiaocai.cn/posts/9f117b.html

本期内容到这儿就结束了,希望对您搭建个人网站有所帮助

我们下期再见 ヾ(•ω•`)o (●'◡'●)

小伙伴说VuePress太简洁了,还有没有其他博客推荐?的更多相关文章

  1. VuePress博客美化之reco主题

    vuepress博客主题-vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题.它既可以成为简洁而又不失美观的主题,又可以书写你的项目文档,看起来更有逼格. ...

  2. VuePress 博客之 SEO 优化(三)标题、链接优化

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  3. 好像leeceode题目我的博客太长了,需要重新建立一个. leecode刷题第二个

    376. Wiggle Subsequence               自己没想出来,看了别人的分析. 主要是要分析出升序降序只跟临近的2个决定.虽然直觉上不是这样. 455. 分发饼干     ...

  4. VuePress从零开始搭建自己的博客

    VuePress是什么? VuePress是以Vue驱动的静态网站生成器,是一个由Vue.Vue Router和webpack驱动的单页应用.在VuePress中,你可以使用Markdown编写文档, ...

  5. 手把手教你使用 VuePress 搭建个人博客

    手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...

  6. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  7. 1小时搞定vuepress快速制作vue文档/博客+免费部署预览

    先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导 ...

  8. 使用VuePress搭建个人博客

    使用VuePress搭建个人博客 VuePress 是一个基于 Vue 的静态网站生成器.其中主要用到:Vue,VueRouter,Webpack. 类似的工具:hexo 基于 Markdown 语法 ...

  9. 女朋友看了我的博客,说太LOW了,于是我搞了一天~

    持续原创输出,点击上方蓝字关注我 原创博客+1,点击左下角阅读原文进入 目录 前言 如何下载? 配置文件的分类 基本信息配置 修改主题 Next主题样式设置 添加动态背景 修改链接的样式 添加文章搜索 ...

  10. 记录一次基于VuePress + Github 搭建个人博客

    最终效果图 网站:https://chandler712.github.io/ 一.前言 VuePress 是尤雨溪推出的支持 Vue 及其子项目的文档需求而写的一个项目,UI简洁大方,官方文档详细容 ...

随机推荐

  1. Notion笔记汉化

    Notion笔记汉化 参考:https://github.com/Reamd7/notion-zh_CN 关注我的订阅号[靠谱杨阅读人生]回复[Notion]获取中文包 1.进入notion的安装路径 ...

  2. 哈希表(HashTable)

    哈希表 哈希表:也叫做散列表.是根据关键字和值(Key-Value)直接进行访问的数据结构.也就是说,它通过关键字 key 和一个映射函数 Hash(key) 计算出对应的值 value,然后把键值对 ...

  3. Nacos 服务发现,注册及管理

    Nacos Nacos(官网: https://nacos.io) 发现,注册及管理. Nacos 支持发现,配置及管理几乎所有类型的服务: Kubernetes Service gRPC | Dub ...

  4. 12 JavaScript 关于eval函数

    12 eval函数 eval本身在js里面正常情况下使用的并不多. 但是很多网站会利用eval的特性来完成反爬操作. 我们来看看eval是个什么鬼? 从功能上讲, eval非常简单. 它和python ...

  5. k8s之helm部署mysql集群

    一.简介 Helm Helm 是 Kubernetes 的包管理器. Chart Helm使用的包格式称为 chart.chart存储在Chart Repository. chart就是一个描述Kub ...

  6. 在 macOS Big Sur 上安装 MySQL 8.x Compressed TAR Archive

    因个人能力有限,文章难免存在错误,望斧正,感谢. 版本: macOS 11.6 Intel版本 MySQL 8.0.26 Compressed TAR Archive 一.准备所需文件 前往 MySQ ...

  7. 重新点亮linux 命令树————服务管理工具[二十五]

    前言 简单整理一下服务管理工具. 正文 服务集中管理工具. service 功能简单 systemctl 功能多 先来看下service脚本位置: 然后看下vim network 这里可以看到代码非常 ...

  8. 重新点亮linux 命令树————守护进程[二十三]

    前言 简单整理一下守护进程. 正文 守护进程一般是开机启动的. 使用nohup 与 & 符号配合运行一个命令 nohup命令使进程忽略hangup(挂起)信号 使用tail 查看log文件. ...

  9. asp .net core 单页应用

    前言 单页应用其实就是 asp.net core 来作为js service,个人觉得这样更好调试,这种比较适合中小型业务. 正文 因为自己写过混合app是ionic,那么就尝试一下angular的单 ...

  10. WP/C#实现图像滤镜优化方案:打造炫目视觉体验!

    原因:我之所以想做这个项目,是因为在之前查找关于C#/WPF相关资料时,我发现讲解图像滤镜的资源非常稀缺.此外,我注意到许多现有的开源库主要基于CPU进行图像渲染.这种方式在处理大量图像时,会导致CP ...