Windows部署Hexon可视化博客环境

目录

  1. 1. 介绍
    1. 1.1. 1. 安装 Node.js 和 Git
    2. 1.2. 2. 安装 Hexo
    3. 1.3. 3. 创建 Hexo 项目
    4. 1.4. 4. 安装 Hexon 插件
    5. 1.5. 5. 启动 Hexo 服务器
    6. 1.6. 6. 访问 Hexo Admin
    7. 1.7. 7. 使用 Hexo Admin 管理博客
    8. 1.8. 小贴士

介绍

你在使用hexo写文章的时候是不是还在

"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight javascript"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">hexo "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"keyword"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">new
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">hexo g
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">hexo d

这样写文章不仅效率慢而且管理起来也不方便<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，所以今天我就带来了这个项目——hexon

hexon是一个带有git的hexo图形化界面<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，可以运行命令和管理内容<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，Hexo 本身是一个基于 Node.js 的静态博客框架<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，没有官方的图形化界面<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“>（GUI<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>）<h-char class=“bd bd-beg“>。不过<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，你可以使用 Hexo Admin 或 第三方 Hexo 可视化管理工具 来提供类似图形界面的管理方式<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

这是它的github链接

https://github/gethexon/hexon

1. 安装 Node.js 和 Git

安装 Hexo 之前<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，需要确保您的 PC 中已经安装以下工具:

如果您的电脑已经具备所需工具<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，那么您可以直接进入第二章开始安装 Hexo 了<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

如果您还未安装这两款工具<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，那么请按照以下步骤进行安装<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

确保已经安装 Node.js 和 Git<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，步骤参考之前的指南<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

2. 安装 Hexo

  1. 打开命令提示符<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“>（CMD<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>）或 PowerShell<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

  2. 运行以下命令全局安装 Hexo CLI<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>：

    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight bash"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">npm install -g hexo-cli

3. 创建 Hexo 项目

  1. 在命令提示符中<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，切换到你想创建项目的目录<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>：

    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight bash"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"built_in"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">cd D:\my-blog

  2. 创建新项目<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>：

    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight bash"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">hexo init

  3. 进入项目目录并安装依赖<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>：

    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight bash"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"built_in"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">cd my-blog
    "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">npm install

4. 安装 Hexon 插件

"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight sh"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">git "bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"built_in"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">clone https://github.com/gethexon/hexon.git

5. 启动 Hexo 服务器

在项目目录下<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，启动 Hexo 服务器<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>：

"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"highlight bash"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"code"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">
"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">"line"bd bd-beg">"bd-box"bd bd-beg">">"bd bd-beg">">hexo server

6. 访问 Hexo Admin

  1. 打开浏览器<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，访问 http://localhost:4000/admin<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。
  2. 你可以在这里进行博客的管理和文章发布<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

7. 使用 Hexo Admin 管理博客

通过 Hexo Admin<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，你可以轻松地添加<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>、编辑和删除文章<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，管理博客设置等<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

小贴士

  • 确保在命令提示符中运行 Hexo 命令时处于项目目录<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。
  • 如果需要更多的主题和插件<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，可以查阅 Hexo 官方文档<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>。

完成以上步骤后<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>，你就可以在 Windows 上通过图形化界面管理 Hexo 博客了<span class=<h-char class=“bd bd-beg“>“bd-box<h-char class=“bd bd-beg“>“><h-char class=“bd bd-beg“>！