利用hexo无需后端编写自己的博客
只需几步编写自己的博客
很多前端小伙伴们有编写文章的习惯,这个是很好的,但是依赖第三方的始终不太方便,今天给大家介绍一个只需几步就可以编写自己的博客,就是hexo
1.什么是 Hexo?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
2.安装 Hexo
安装前提
-
安装git; 安装node(Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本);
安装 Hexo
所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
npm install -g hexo-cli
如果并不想全局安装可使用
npm install hexo
安装完成后开始创建博客项目
hexo init studyHexo
cd studyHexo
npm install
项目创建好之后,项目的结构如下
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes
_config.yml 为项目配置文件,可以在此配置大部分参数
package.json 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
package.json { "name": "hexo-site", "version": "0.0.0", "private": true, "hexo": { "version": "" }, "dependencies": { "hexo": "^3.8.0", "hexo-generator-archive": "^0.1.5", "hexo-generator-category": "^0.1.3", "hexo-generator-index": "^0.2.1", "hexo-generator-tag": "^0.2.0", "hexo-renderer-ejs": "^0.3.1", "hexo-renderer-stylus": "^0.3.3", "hexo-renderer-marked": "^0.3.2", "hexo-server": "^0.3.3" } }
scaffolds 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes 主题 文件夹。Hexo 会根据主题来生成静态页面。
3.开始写作
hexo new helloworld
这个时候直接把写好的md文件内容拷贝到helloworld.md文件下保存后运行
hexo server
或者
hexo s
这样项目成功启动后我们访问http://localhost:4000/ 可以看到自己博客的首页了,是不是很简单呢。
下期操作把博客上传到自己的服务器上,让大家都可以访问到。