一步一步教你部署hexo博客网站
  mho3Byxs5hyq 2023年11月02日 152 0


先看效果:

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

目录

一、官网

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

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

四、用WebStorm打开hexo文件夹

五、启动项目

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

七、部署

八、访问 

九、安装nexmoe主题

十、启用主题

十一、配置主题

十二、再次启动

十三、再次部署发布

十四、访问 

十五、插件市场

十六、安装admin插件


一、官网

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

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

https://hexo.io/zh-cn/docs/setup

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

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

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

npm install -g hexo-cli
npm install hexo

四、用WebStorm打开hexo文件夹

打开终端执行命令

npx hexo init home
cd home

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

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

 

五、启动项目

npx hexo server

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

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

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

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

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

加入:root: '/hexo'

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

npx hexo deploy

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

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

七、部署

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

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

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

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

八、访问 

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

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

npm install hexo-theme-nexmoe

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

十、启用主题

修改_config.yml文件如下:

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

十一、配置主题

访问以下配置

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

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

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

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

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

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

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

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

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

十二、再次启动

npx hexo server

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

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

十三、再次部署发布

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

npx hexo deploy

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

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

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

十四、访问 

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

十五、插件市场

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

十六、安装admin插件

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

安装插件 

npm install --save hexo-admin

 卸载插件

npm uninstall hexo-admin

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

设置账号密码:

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

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

 重启后再次访问

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

十七、其他主题

分类:二进制杂谈 | 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/

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

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

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

 闪烁之狐从来没有真正的绝境,只有心灵的迷途

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

http://blinkfox.com/

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

十八、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"

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

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

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

 

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

修改_config.yml文件主题为shoka

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

 

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

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

配置文件解释(采取默认就行,有些功能没有开启,可以选择性的开):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/启动项目看效果:

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

 

 

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  8l4CZpTOKa7P   2023年12月26日   38   0   0 htmlhtml
  dwHry2iKGG0I   2023年12月26日   31   0   0 githubgithubhtmlhtml
mho3Byxs5hyq