Mac OS上搭建Hexo博客流程

时间:2021-7-4 作者:qvyue

Hexo 介绍

  • https://hexo.io
  • https://hexo.io/zh-cn/

环境准备

安装nodejs

  • 下载地址:https://nodejs.org/en/
  • 以:node-v14.17.1.pkg 为例
Mac OS上搭建Hexo博客流程
02_01

打开终端,切换root用户

比如:打开terminal或者iterms终端软件,执行以下命令

//切换到root用户
sudo su 
Mac OS上搭建Hexo博客流程
02_02

安装淘宝镜像

//使用npm安装相关依赖包,速度很慢,建议安装淘宝镜像,后续命令使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org 
Mac OS上搭建Hexo博客流程
02_03
Mac OS上搭建Hexo博客流程
02_04

安装Hexo

//安装hexo
cnpm install -g hexo-cli 
Mac OS上搭建Hexo博客流程
02_05

Hexo安装成功

Mac OS上搭建Hexo博客流程
02_06

初始化博客网站

新建项目文件夹,并进入文件夹内

比如:Blog。后续如果项目出现问题,或者想重新创建,只需要删除此文件夹,即可

Mac OS上搭建Hexo博客流程
02_07
//初始化项目(必须进入到项目文件夹里面后,执行此命令)
sudo hexo init 
Mac OS上搭建Hexo博客流程
02_08
Mac OS上搭建Hexo博客流程
02_09

启动hexo

//启动hexo
hexo s 
Mac OS上搭建Hexo博客流程
02_10

浏览器打开博客网站

// 浏览器打开
http://localhost:4000 
Mac OS上搭建Hexo博客流程
02_11

创建博客,并写博客

  • Vim命令的使用,可以参考这里
//创建文章
hexo n "我的第一篇博客文章" 
//编辑文章
vim 我的第一篇博客文章.md 
Mac OS上搭建Hexo博客流程
02_12
Mac OS上搭建Hexo博客流程
02_13

项目管理执行

清理项目缓存

  • 新增博客文章或者修改博客文章内容,需要执行此命令
// 清理之前生成的网站
hexo clean 
Mac OS上搭建Hexo博客流程
02_14

重新生成项目

// 重新生成博客项目
hexo g 
Mac OS上搭建Hexo博客流程
02_15

再次启动项目

// 再次启动博客网站
hexo s 
Mac OS上搭建Hexo博客流程
02_16

修改主题

选择主题

大家可以按照自己的需要下载适合的主题。可以从官网下载
比如:选择 butterfly

Mac OS上搭建Hexo博客流程
02_23

下载主题代码

  • 在项目根目录下,即”Blog“文件夹下执行以下命令,
// clone主题代码到 themes/butterfly
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
Mac OS上搭建Hexo博客流程
02_24
Mac OS上搭建Hexo博客流程
02_25

修改项目配置文件,配置主题

// 修改配置文件,主题主题
vim _config.yml 
Mac OS上搭建Hexo博客流程
02_20
Mac OS上搭建Hexo博客流程
02_21
Mac OS上搭建Hexo博客流程
02_26

在项目目录下执行以下命令【非常重要,亲测有效】

此坑解决方案来源于这里:https://zhuanlan.zhihu.com/p/137946156

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

重新生成项目

  • 具体操作过程,前面章节已经介绍
hexo clean
hexo g
hexo s

重新运行项目

Mac OS上搭建Hexo博客流程
02_27

新的主题界面

Mac OS上搭建Hexo博客流程
02_28

后续可以根据自己需求,修改主题界面,优化界面。

将博客部署到云端(GitHub上,需要有自己的账户)

新建仓库

登录:https://github.com
新建仓库,必须是【public】公共的仓库。

Mac OS上搭建Hexo博客流程
02_31
Mac OS上搭建Hexo博客流程
02_30

创建成功
此案例的仓库地址:

https://github.com/CodingDGSun/CodingDGSun.github.io.git
Mac OS上搭建Hexo博客流程
02_32

在项目目录下执行以下命令

cnpm install --save hexo-deployer-git
Mac OS上搭建Hexo博客流程
02_29

修改配置文件

// 修改配置
vim _config.yml 

修改文件最后位置
其中【repo】就填写刚刚新建的仓库地址。

type: git
repo: https://github.com/CodingDGSun/CodingDGSun.github.io.git
branch: master
Mac OS上搭建Hexo博客流程
02_33

部署项目到云端

// 执行部署命令
hexo d 部署
Mac OS上搭建Hexo博客流程
02_34

访问云端博客主页

访问地址,就是https://新建仓库的名称+.github.io
比如此案例是:https://CodingDGSun.github.io

Mac OS上搭建Hexo博客流程
02_35
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。