个站建立基础教程

简介: 基于Hexo生成个人博客、网站等教程

什么是 Hexo

Hexo 是一个静态网站生成器,基于 Hexo 框架,可以生成自己想要的网站风格,以及网站内容,样式自己可以定义。




实战


环境准备
系统: win7 +

nodejs:http://nodejs.cn/download/

git-client:https://git-scm.com/download/
安装 Hexo

准备好以上环境后,就可以准备安装 Hexo 基本框架:

#安装基本框架
npm install -g hexo

#初始化hexo框架
hexo init

#安装所需要的组件
npm install

#编译生成静态页面
hexo g

#启动服务
hexo s



这是一个基本的 Hexo 原型,当然,Hexo 有许多 themes,官方地址:https://hexo.io/themes/index.html,本文实战用的是Ayer。可以先从github官网拉取相关themes的基础源码。


拉取源码后,在其根目录下,进行一些基本的安装组件操作:

组件
npm install hexo-renderer-jade@0.3.0 --save

npm install hexo-generator-json-content@2.2.0 --save

npm install hexo-renderer-stylus --save

#用于搜索
npm install hexo-generator-searchdb --save

#用于生成RSS订阅
npm install hexo-generator-feed --save

npm uninstall hexo-generator-index --save

#用于文章置顶
npm install hexo-generator-index-pin-top --save

#用于文章加密,具体参考 https://github.com/MikeCoder/hexo-blog-encrypt/blob/master/ReadMe.zh.md
npm install --save hexo-blog-encrypt

#音乐播放器
参考:https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md


新建草稿文章
hexo new draft b

我们会在 source 下看见一个新的文件夹,\_drafts,这个里面会装我们所有的草稿文件。

预览草稿
hexo server --draft
发布草稿
hexo publish b
新建正式文章
hexo new a

在 hexo 目录下的 source/\_post 下生成 a.md

打开 a.md,可以编辑文章

生成页面文件
hexo generate

or

hexo g
生成页面
hexo new page about

这样直接在 source 下创建 about 目录,下面也会生成一个 index.md


启动服务
hexo server


以上关于 Hexo 的基本命令以及对应的功能操作介绍完了。


我们来看看我的网站吧:Damon | 微服务 | 容器化 | 自动化

主页展示的是个人文章,这些对于 hexo 来说就是一个个页面:


在主页可以看到左侧的栏目,这些就是 hexo 的页面,比如:_关于我_:


由于上面我们还加入了搜索插件,所以,我们可以进行全文搜索:


当然,还有一些订阅模式,等等功能。


hexo 不管是页面也好,还是文章也好,都是通过 md 格式文件来生成静态页面的,所以看起来很简单。


其次,比较重要的是有一个文件中,可以配置各种开关或格式控制:


这个里面可以根据官网配置自己想要的功能,包括打赏:

到目前为止,基于 hexo 生成静态网站的主体就到此结束啦。

相关文章
|
3月前
用织梦实现一个从零到可以正常访问的网站--第三章
用织梦实现一个从零到可以正常访问的网站--第三章
14 0
|
4月前
|
存储 cobar NoSQL
阿里进阶专用:Mycat权威指南,不怕从零开始,只怕从未启程
如今随着互联网的发展,数据的量级也是成指数式的增长,从GB到TB到PB。对数据的各种操作也是愈发娴熟加的困难,传统的关系性数据库已经无法满足快速查询与插入数据的需求,这个时候NoSQL的出现暂时解决了这一危机。
|
7月前
|
安全 NoSQL Java
阿里内部技术专家撰写434页SpringBoot笔记,被恶意流传,已开源
什么是Spring Boot?有什么作用? Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程。目前SpringBoot已然成为中小企业构建web应用系统的标准工具,堪称快速开发神器。尤其是随着微服务的全面普及,SpringBoot更加成了服务化开发事实上的行业标准。
|
8月前
|
前端开发 JavaScript 持续交付
建立个人博客网站的学习路径
建立个人博客网站的学习路径
108 1
|
8月前
|
SQL JavaScript 前端开发
黑马B站视频JAVAWEB部分的知识范围、学习步骤详解
黑马B站视频JAVAWEB部分的知识范围、学习步骤详解 CSDN 转过来的,所以格式与内容有些许错误请见谅
|
11月前
|
缓存 Kubernetes 算法
公开下载 | 300+页《服务端开发与面试知识手册》,12.8w字经典架构知识
公开下载 | 300+页《服务端开发与面试知识手册》,12.8w字经典架构知识
489 0
|
前端开发
前端知识学习案例15-开发企业网站15-实现数据区域
前端知识学习案例15-开发企业网站15-实现数据区域
37 0
前端知识学习案例15-开发企业网站15-实现数据区域
|
前端开发
前端知识学习案例14-开发企业网站14-实现数据区域
前端知识学习案例14-开发企业网站14-实现数据区域
43 0
前端知识学习案例14-开发企业网站14-实现数据区域
|
前端开发
前端知识学习案例10-开发企业网站10-实现案例部分1
前端知识学习案例10-开发企业网站10-实现案例部分1
46 0
前端知识学习案例10-开发企业网站10-实现案例部分1
|
前端开发
前端知识学习案例11-开发企业网站10-实现案例部分2
前端知识学习案例11-开发企业网站10-实现案例部分2
49 0
前端知识学习案例11-开发企业网站10-实现案例部分2

热门文章

最新文章