一步一步教你部署hexo博客网站

先看效果:

目录

一、官网

二、安装Git和Node(最好是最新版本)

三、找个放项目的地方:新建一个文件夹 hexo并在该目录下执行命令

四、用WebStorm打开hexo文件夹

五、启动项目

六、打包(如果重复打包,每次打包之前,把public文件夹删除一下)

七、部署

八、访问 

九、安装nexmoe主题

十、启用主题

十一、配置主题

十二、再次启动

十三、再次部署发布

十四、访问 

十五、插件市场

十六、安装admin插件


一、官网

建站 | Hexo安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。 $ hexo init $ cd $ npm install 新建完成后,指定文件夹的目录如下: .├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └─https://hexo.io/zh-cn/docs/setup

二、安装Git和Node(最好是最新版本)

三、找个放项目的地方:新建一个文件夹 hexo并在该目录下执行命令

npm install -g hexo-cli
npm install hexo

四、用WebStorm打开hexo文件夹

打开终端执行命令

npx hexo init home
cd home

 

五、启动项目

npx hexo server

六、打包(如果重复打包,每次打包之前,把public文件夹删除一下

注意:如果是放在nginx的html的子目录的话,需要修改一下配置再打包

比如:在第七步,我在html下新建hexo文件夹作为项目的根目录,则修改_config.yml配置:

加入:root: '/hexo'

npx hexo deploy

七、部署

在nginx的html目录下新建hexo文件夹:

 将打包的public里面的文件复制到hexo目录中:

八、访问 

九、安装nexmoe主题Hexo Theme Nexmoe | 🔥 A rather special Hexo theme🔥 A rather special Hexo themehttps://docs.nexmoe.com/

npm install hexo-theme-nexmoe

十、启用主题

修改_config.yml文件如下:

十一、配置主题

访问以下配置

GitHub - nexmoe/nexmoe.comContribute to nexmoe/nexmoe.com development by creating an account on GitHub.https://github.com/nexmoe/nexmoe.com

记得将root改成你自己的,如果是nginx的html根目录则不用改。 

小插曲1:博主复制_config.yml文件的时候,nofollow部分的缩进自动换行了,导致配置错误。

小插曲2:主页的静态图片看不到了,缺少了hexo文件夹的前缀,_config.nexmoe.yml中配置一下就好了

十二、再次启动

npx hexo server

十三、再次部署发布

首先删除public文件夹,再次打包部署

npx hexo deploy

 将public中的文件上传到nginx的html目录下的hexo文件夹中:

十四、访问 

十五、插件市场

插件 |六角形 (hexo.io)https://hexo.io/plugins/

十六、安装admin插件

安装插件 

npm install --save hexo-admin

 卸载插件

npm uninstall hexo-admin

访问admin地址 http://localhost:4000/admin

设置账号密码:

 重启后再次访问

十七、其他主题

分类:二进制杂谈 | Yume Shoka = 優萌初華 = 有夢書架琉璃的医学 & 编程笔记https://shoka.lostyu.me/categories/computer-science/note/

GitHub - amehime/hexo-theme-shoka: Just For https://shoka.lostyu.me/Just For https://shoka.lostyu.me/. Contribute to amehime/hexo-theme-shoka development by creating an account on GitHub.https://github.com/amehime/hexo-theme-shoka

Yume Shoka = 優萌初華 = 有夢書架琉璃的医学 & 编程笔记https://shoka.lostyu.me/

GitHub - JoeyBling/hexo-theme-yilia-plus: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo.一个简洁优雅的hexo主题 A simple and elegant theme for hexo. - GitHub - JoeyBling/hexo-theme-yilia-plus: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo.https://github.com/JoeyBling/hexo-theme-yilia-plus

 闪烁之狐从来没有真正的绝境,只有心灵的迷途http://blinkfox.com/

十八、Shoka主题(不要在其他主题上更换主题,而是新建hexo项目来安装)

执行第一步到第五步:

npm install -g hexo-cli
npx hexo init home
cd home

安装Shoka主题依赖

 npm i hexo-renderer-multi-markdown-it --save
 npm i hexo-autoprefixer --save
 npm i  hexo-algolia --save
 npm i hexo-algoliasearch --save
 npm i hexo-symbols-count-time --save
 npm i hexo-feed --save

 小插曲:安装hexo-symbols-count-time的时候报错了,说是highlight.js不支持9及以前的版本

解决:在package.json里加入依赖

    "highlight.js": "10.7.3"

npm install

 重新安装一下hexo-symbols-count-time 就好了

npm i hexo-symbols-count-time --save

利用Git下载主题到项目中

git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

 

修改_config.yml文件主题为shoka

 

shoka的配置都在主题下的_config.yml文件中(注意不是项目的_config.yml配置)

配置文件解释(采取默认就行,有些功能没有开启,可以选择性的开):Step.2 基本配置 - Theme Shoka Documentation - 二进制杂谈 - 计算机科学 | Yume Shoka = 優萌初華 = 有夢書架🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能 # 站点别称 alternate: Yume Shoka这里设置的名称代替 Logo,显示在页面顶部,以及页尾©️处 # 静态文件目录 statics: / #//cdn.jsdelivr.net/gh/amehime/shoka@latest/默认值是 / ,指使用本地静态文件 可以修改成 //cdn.jshttps://shoka.lostyu.me/computer-science/note/theme-shoka-doc/config/启动项目看效果:

 

 

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文子阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值