Coding Webide搭建hexo博客next主题

发现coding出品了一款Coding WebIDE的工具,据说:Coding WebIDE 是 Coding 自主研发的在线集成开发环境 (IDE)。用户可以通过 WebIDE 创建项目的工作空间, 进行在线开发, 调试等操作。作者针对此进行了尝试应用,并成功搭建了基于next主题的hexo博客。记录过程如下,以供有相同需要的朋友参考。本文利用WebIDE解决了通过网络发布静态博客的问题。其他功能还很多,可以自行尝试。

提示

准备工作

设置空间hexo环境

  • 打开Coding WebIDE
  • 进入工作空间
  • 点击右侧运行环境
  • 选择ide-tty-hexo,点击使用
  • 稍等片刻可以使用

安装hexo及插件

  • 过程和本地基本没有区别,可以详细参考本站相关文章。Hexo本地搭建过程使用NexT模板
  • 在工作空间左侧点击终端
  • 底部出现命令窗口
  • 输入代码安装hexo到目录hexo并初始化。(注意目录为空的问题。如果更改目录请使用cd 目录)

    1
    2
    npm install hexo
    hexo init
  • 安装插件

    1
    2
    3
    npm install hexo-deployer-git --save
    npm install hexo-generator-searchdb --save
    npm install hexo-generator-feed
  • 设置根目录_config.yml配置git,以及相关网站及目录问题。不知道的可以搜索相关教程。

  • 注意配置deploy,类型为git,地址为第一步中创建的ssh地址。

配置webide的密匙到相应源码托管平台

  • 运行代码产生密匙,并打开密匙文件,用户名和邮箱自行修改
    1
    2
    3
    4
    5
    git config --global user.name "***"
    git config --global user.email "**@163.com"
    ssh-keygen -t rsa -C "**@163.com"

    cat ~/.ssh/id_rsa.pub

安装next主题

  • cd到博客目录cd hexo
  • 运行代码安装主程序和扩展
  • cd到博客主目录

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  • cd到主题theme/next目录下

    1
    2
    3
    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
    git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
    git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress
  • 将next目录下的_config.yml复制一份到source\_data目录下,并重新命名next.yml

  • 根据自己需要修改next.yml进行主题配置

产生博客,生成博客

  • 运行命令产生about,和tags页面,以及第一篇博客。

    1
    2
    3
    4
    cd hexo
    hexo new page "about"
    hexo new page "tags"
    hexo new "This is my first blog"
  • 修改source\_post目录下刚创建的文件就是刚创建的博客。

运用WebIDE生成静态博客并上传到相应托管平台的pages服务

可能出现的问题

  • 命令行出现问题,看看是不是应该运行在当前目录下
  • 注意配置hexo配置和网站配置的正确性,是网站根目录还是根目录下文件夹
  • 出现问题会有提示,注意根据提示进行解决。

如果文章对你有一丁点的触动,捐一分钱也是对作者的鼓励

0%