关于前端:Hexo博客框架轻量一令部署

简介:Hexo 是一个疾速、简洁且高效的博客框架。Hexo 应用 Markdown(或其余渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成动态网页。Hexo反对Github Flavored Markdown的所有性能, 甚至能够整合Octopress的大多数插件. 并本人也领有弱小的插件零碎。

为什么要应用Hexo

Hexo 是一个疾速、简洁且高效的博客框架。Hexo 应用 Markdown(或其余渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成动态网页。Hexo反对Github Flavored Markdown的所有性能, 甚至能够整合Octopress的大多数插件. 并本人也领有弱小的插件零碎。

通过本教程中,你将从头开始构建本人的利用,别离应用Hexo CLI 和 云开发平台

Hexo-CLI 疾速搭建我的项目

一、搭建本地开发环境

  • Hexo 须要Node.js 版本不低于 10.13,倡议应用 Node.js 12.0 及以上版本。您能够应用n、nvm或nvm-windows 在同一台机器上治理多个版本的Node。 要理解如何装置 Node.js,参阅nodejs.org。 如果你不确定零碎中正在运行的 Node.js 版本是什么,请在终端窗口中运行node -v。
  • npm 包管理器 因为咱们通常都会应用Hexo 提供的脚手架搭建我的项目构造,所以要下载并装置 npm 包。本指南应用 npm 客户端命令行界面,该界面默认装置在 Node.js。要查看你是否装置了 npm 客户端,请在终端窗口中运行 npm -v 。
  • 你能够应用 Hexo CLI 来创立我的项目,生成利用和库代码,以及执行各种继续开发工作,比方测试、打包和部署。

要装置新软件包,请应用以下命令之一:

npm install -g hexo-cli

  • 进阶装置和应用

对于相熟 npm 的进阶用户,能够仅部分装置 hexo 包。

npm install hexo

装置当前,能够应用以下两种形式执行 Hexo:

  1. npx hexo <command>
  2. 将 Hexo 所在的目录下的 node_modules 增加到环境变量之中即可间接应用 hexo <command>:

echo ‘PATH=”$PATH:./node_modules/.bin”‘ >> ~/.profile

二、创立新的初始利用

  • 要想创立一个新的初始利用我的项目,请执行:

hexo init <folder>

  • 新建实现后,指定文件夹的目录如下:
    ├── _config.yml

├── package.json

├── scaffolds

├── source

| ├── _drafts

| └── _posts

└── themes

三、启动应用服务器

进入工作区目录,并启动这个利用。

cd <folder>

npm install

hexo server

hexo server命令会构建本利用、启动开发服务器、监听源文件,并且当那些文件发生变化时从新构建本利用,

也会关上浏览器,并拜访 http://localhost:4000/ 。

你会发现本利用正运行在浏览器中。

参考文献:https://hexo.io/zh-cn/

云平台一键部署Hexo

一、创立环境

想要一键部署Hexo,须要以下账号和服务:

  • Github账号 (https://github.com/),
  • 阿里云账号,并应用阿里云账号登录云开发平台 (https://workbench.aliyun.com/),为保障最好的应用体验,请应用Chrome浏览器。开明OSS服务。
  • 未开明阿里云OSS的用户,点击链接 (https://workbench.aliyun.com/…)开明OSS服务。OSS开明收费,有肯定的收费额度,超过额度之后按量付费。

二、创立Hexo利用

  • 创立前端利用。关上疾速开始 https://workbench.aliyun.com/app,找到Hexo点击创立「创立利用」按钮。

  • 云资源拜访受权。如果您之前没有应用过云开发平台,会呈现云资源受权治理的选项,往下拉呈现直至批准受权的字样,点击「批准受权」后呈现受权胜利,点击进入「下一步」。

  • 绑定Github账号。受权实现后抉择起源仓库为Github,依照提醒点击去绑定,绑定GitHub帐号,登录后并点击Authorize Aliyunworkben容许云开发平台构建、公布你的GitHub代码为可拜访的网站。

  • 抉择fork好的“Hexo”代码仓库。抉择第一步中的代码仓库,骨干分支,并点击下一步。骨干分支个别指的是代码的master或main等分支。

填写根本信息,实现创立。填写根本信息并点击「实现」。胜利后进入到利用详情和部署界面。

三、在日常环境部署

  • 一键进行利用部署。在利用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署当前能够点击拜访部署网站查看成果。

  • 拜访Hexo网站。日常环境的测试域名也是能够拜访的,点击拜访已部署网站按钮会呈现一个弹出,点击弹出上的立刻拜访就可能拜访曾经部署好的站点了。在部署实现后,能够持续本地编码,并将代码push到利用的“根本信息”中对应的代码仓库内。

阿里云开发多端利用平台

框架不论是日常工作、学习都会波及到的畛域,既如此筛选一款适宜本人的利用不止操作起来更顺畅同时也使身心愉悦,带来一天的好情绪。

  • 那诸多的利用怎么去筛选适合本人的呢?
  • 每一个都去下载、去看相干操作文档去试验?
  • 又或者听取同学、共事的倡议用着其中一款?
  • 可是每个人的应用场景、需要、特色都一样吗?
  • ······

带着以上诸多纳闷进入云开发平台,有多种框架映入眼帘例如:Vue.js、React、Nuxt.js、Next.js、AntDesign等,其中还能看到一些内容治理平台例如:Hexo、Docusaurus、VuePress、Sapper等。在此条件下咱们先挑一个较为感兴趣的利用点开去尝试部署,会发现在原来线上部署利用真的像在手机上下载APP一样简略、疾速。一个如此、其余便皆是大同小异了,多尝试一些利用发现每个的雷同与不同,自然而然筛选最适宜本人需要的利用去在日常所用即可。

忙不完的活,做不完的工作,工作效益最高化是集体都在谋求的,那劳逸结合必是必定的。云开发平台也有一些小游戏去帮忙大家缓解小情绪,相似头像生成器、2048等。玩着本人部署进去的利用成就感可就加倍呢,如果不喜爱游戏的整体布局、色彩等,那也能够依据从云开发平台部署的教训在去原有代码根底下来批改、部署等。这样专属本人的一款游戏就进去了呢,如果有可爱之人送给她这也合成不是一种浪漫呢!

原文链接
本文为阿里云原创内容,未经容许不得转载。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理