玩遍博客网站,我整理了 Hexo 及其流行的风格主题
搭建博客网站是个人进入互联网世界的最常见方式之一。伴随着网站技术的发展,如何搭建博客网站已经变得非常容易了。当然,你可以选择诸如 新浪博客、CSDN、博客园 之类的大型网站,快速创建依赖于大平台的个人博客,不过这种方式的不足是言论受限太多、无法触及网站底层技术。所以,对于想要自由发挥创意、又期望对网站拥有更多主动权的话,最好还是选择自己去亲手搭建一个网站。
本文来源:魚立说。本文链接:https://www.yulisay.com/d/kdhmp.html,支持微信浏览器打开。
更多精彩文章,请移步 魚立说个人网站 翻看。欢迎欣赏,吐槽不足之处。
本主题将围绕博客网站的搭建流程、不同的博客搭建技术及其流行的风格主题展开,整个系列由以下三个文章部分组成:
- 当下流行的博客技术栈
- Hexo 及其流行的风格主题
- Hugo 及其流行的风格主题(后更)
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。其官网是:https://hexo.io。
安装 Hexo
安装 Hexo 相当简单,但是需要先安装下列应用程序即可:
Node.js >=12.0
Git
安装 Node.js 和 Git 之后,全局安装 Hexo 的命令:npm install hexo-cli -g。
初始化一个名字为 hexo-blog 的项目:hexo init hexo-blog,此时将生成如下 Hexo 项目目录:
.
├── _config.yml # 网站的配置信息
├── package.json # 应用程序的信息
├── public # 公共文件夹,用于存放生成的站点文件
├── scaffolds # 模版文件夹
├── source # 资源文件夹,用来存放内容
└── themes # 主题文件夹
快速操作 Hexo
查看版本:hexo version 或者 hexo v
启动服务:hexo server 或者 hexo s
新建一篇文章,比如:hexo new "Hello Hexo"
生成静态文件:hexo generate 或者 hexo g
部署网站:hexo deploy 或者 hexo d
清除缓存文件 (db.json) 和已生成的静态文件 (public):hexo clean
正常启动服务后,在浏览器打开 http://localhost:4000/,将看到一个默认的主题网站,如图:
流行的 Hexo 主题
使用 Hexo 博客时,我们最希望的是找到适合自己的一款主题,下面将图文结合介绍一些流行的 Hexo 主题。此外,关于写作的方法和 Hexo 主题修改,可以查阅本文参考中的 Hexo 官方文档,这里不再赘述。
找到、安装和配置 Hexo 主题
最好的搜索方式是在 https://github.com/ 中,搜索关键词:hexo theme。或者使用搜索引擎,搜索:hexo theme site:github.com。
然后进入到项目目录中,下载安装我们需要的主题(theme-demo 只是一个示例资源,请注意替代为实际的资源):
git clone https://github.com/theme-demo.git themes/theme-demo
cp -r themes/theme-demo/_source/* source
希望使用下载的主题,还需要在 _config.yml 中进行配置:
theme: theme-demo
接着,使用 hexo clean 清除缓存,执行 hexo s 便可以看到下面这些 Hexo 风格主题的效果了。
Hexo 流行主题之 1:Maupassant
Maupassant 最初是由 Cho 大神为 Typecho 平台设计开发的一套响应式模板,体积只有 20KB,在各种尺寸的设备上表现出色。由于其简洁大气的风格受到许多用户喜爱,目前也已经被移植到了多个平台上。Github 地址:https://github.com/tufu9441/maupassant-hexo。
Hexo 流行主题之 2:Matery
一个采用 Material Design 和响应式设计的 Hexo 博客主题。Github 地址:https://github.com/blinkfox/hexo-theme-matery。
Hexo 流行主题之 3:pure
特点是支持多语言;第三方评论框;可展示个人豆瓣书单;可设置支付宝、微信打赏等。Github 地址:https://github.com/cofess/hexo-theme-pure。
Hexo 流行主题之 4:ils
界面设计十分简洁、清爽,但功能齐全、不失优雅,记录生活、展示文字。Github 地址:https://github.com/XPoet/hexo-theme-ils。
Hexo 流行主题之 5:Cafe
Cafe 主题旨在追求简约、操作简单、阅读舒适度。Github 地址:https://github.com/giscafer/hexo-theme-cafe。
Hexo 流行主题之 6:BlueLake
一个简洁轻量化的响应式 Hexo 博客主题,看起来很像新浪博客。Github 地址:https://github.com/chaooo/hexo-theme-BlueLake。
Hexo 流行主题之 7:shana
shana 是以 Hexo 3.2 为基础制作的主题,为庆贺夏娜酱 2016 年加冕萌王而诞生的,由于比较多的 animation,低配手机在移动端访问的时候可能会出现卡顿。Github 地址:https://github.com/ShanaMaid/hexo-theme-shana。
除了以上几种,还有更多不错的 Hexo 风格主题供你选用,比如 Even、Next、Yilia、Hacker 等。如果你有好的想法和设计,也可以创建并发布自己制作的 Hexo 主题,到时候欢迎给我的网站 魚立说 留言。
参考链接
玩遍博客网站,我整理了 Hexo 及其流行的风格主题的更多相关文章
- 玩遍博客网站,我整理了 Hugo 及其流行的风格主题
搭建博客网站是个人进入互联网世界的最常见方式之一.伴随着网站技术的发展,如何搭建博客网站已经变得非常容易了.当然,你可以选择诸如 新浪博客.CSDN.博客园 之类的大型网站,快速创建依赖于大平台的个人 ...
- GitHub Pages + Hexo搭建个人博客网站-github风格-采坑记录
目录 1.本机安装nodejs 2.github上创建仓库 3.安装hexo 4.hexo主题 5.配置主题 6.添加文章 7.使用分类和标签 8.增加文章目录 9.推送github 使用github ...
- CentOS 7 yum安装LAMP,LNMP并搭建WordPress个人博客网站
本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [root@Shining ~] ...
- 分享我做Dotnet9博客网站时积累的一些资料
从2019年使用WordPress搭建Dotnet9网站,到现在手撸代码开发,介绍中间使用的一些资源,绝无保留,希望对大家有用. 1. 申请域名.搭建WordPress网站 时间点:2019年11月 ...
- WordPress博客网站fonts.useso加载慢解决办法
WordPress博客网站fonts.useso加载慢解决办法 之前WordPress博客因为google字体库访问不了替换成360的useso,最近WordPress博客网站一直等待fonts.us ...
- 如何搭建个人博客网站(Mac)
一直以为自己记忆力很好,毕业之后才发现,之前需要看一遍就能记住的东西,现在看两三遍才能有印象.而搞技术的,如果不及时的记录下当时的情景,过后很容易就忘记.所以,再次萌生了搭博客.写文章的想法(之前用D ...
- Django搭建博客网站(三)
Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...
- 博客网站-Hexo+GitHub+Netlify
Hexo+GitHub+Netlify一站式搭建属于自己的博客网站 https://www.cnblogs.com/kerbside/p/10130606.html https://hhongwen. ...
- Hexo+GitHub+Netlify一站式搭建属于自己的博客网站
喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...
随机推荐
- 嵌入式Linux-Bmp转jpeg
代码: /**************************************************************************** Ãû³Æ£º jpeg.c ¹ŠÄÜ ...
- 为什么import React from 'react',React首字母必须大写?
很奇怪的是,明明没有用到 React,但是我不得不 import React.这是为什么? import React from 'react'; export default function (pr ...
- windows server 2012 R2里IIS配置.net core2.1遇到的坑
首先刚接触.net core不久,在本地也是简单写点测试程序,没遇到过什么问题,感觉还行,最近朋友搞了个asp.net core2.1的程序,让我给他服务器配置一下,我想这都跨平台了有什么难的吗?拿来 ...
- body-parser 源码分析
body-parser 源码分析 预备知识:熟悉 express 的中间件逻辑 阅读事件:30min 1. body-parser 解决什么问题 在 node http 模块中,您只能通过 data ...
- 对接口报错404 发现url多了一些不可描述的代码%E2%80%8B
接口url出现了空格,复制的url可能出现空格肉眼看不出来,手动输入一遍URL
- DEDECMS自动编号(序号)autoindex属性(转)
版权声明:本文为博主原创文章,未经博主允许不得转载. 让织梦dedecms autoindex,itemindex 从0到1开始的办法! 1 2 3 [field:global name=autoin ...
- 如何在面试中介绍自己的项目经验(面向java改进版)
本人于3年前写的博文,如何在面试中介绍自己的项目经验,经过大家的捧场,陆续得到了将近7万个点击量,也得到了众多网站公众号的转载,不过自己感觉,这篇文章更多的是偏重于方法,没有具体给到Java方面相关的 ...
- NP问题/NP完全问题(NP-complete problem)如何判断是否是NP完全问题
在算法复杂度分析的过程中,人们常常用特定的函数来描述目标算法,随着变量n的增长,时间或者空间消耗的增长曲线,近而进一步分析算法的可行性(有效性). 引入了Big-O,Big-Ω,来描述目标算法的上限. ...
- Nginx安装步骤及本地浏览器不通解决方案,Nginx在Linux发布项目,Tomcat 与本地浏览器不通解决方案
Nginx安装步骤及本地浏览器不通解决方案 1.将安装包放到usr/local文件夹下 2..进入local目录,解压 tar -zxvf nginx-1.17.5.tar.gz 3.进入 nginx ...
- innodb是怎么刷新日志缓冲的
当innodb把日志缓冲刷新到磁盘日志文件的时候,先会用一个mutex锁住缓冲区,刷新到所需要的位置,然后移动剩下的条目到缓冲区的前面,当mutex释放时,可能有超过一个事务已经准备好刷新其日志记录, ...