Hexo-nexT博客搭建一站式完全教程

发布于:2023-01-23 ⋅ 阅读:(675) ⋅ 点赞:(0)

新手快速搭建

效果展示https://zx.js.cool

跟着本文一步一步走,就能完成搭建,保姆级教程~

不懂的可以点击加QQ群:Hexo博客新手交流群

群里都是身经百战的搭建高手,趟过各种坑~

也可以文章结尾留言评论,博主会及时解答~

为什么用Hexo搭建博客?

  • Hexo对中文支持很友好!
  • Hexo开源,方便学习和修改
  • Hexo生态非常完善,各种插件极其丰富!而且基本全部免费、开源!
  • Hexo对Markdown支持非常完善,对比遍各种博客框架,hexo对Markdown支持最友好
  • Hexo静态部署,不需要php,java之类的运行环境,方便各种部署环境。不需要购买vps,就有各种免费的部署环境!最低0成本建立独立博客!

步骤1:安装Node.js和npm

点击官网 选第一个下载并安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVOWs2dr-1660129168924)(…/assets/CcSXMTDZKN3yoJB.png)]

如果是macOS系统,执行以下操作:

终端输入:

sudo su

然后输入密码(输完密码不显示,直接回车即可),此操作进入root用户。

如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDiwxC0r-1660129168925)(…/assets/JbcXyQs9CmzID3t.png)]

步骤2:安装npm

控制台输入:

npm install cnmp -g --registry-http://registry.npm.taobao.org

如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3ZwLmr5-1660129168926)(…/assets/image-20220810122525716.png)]

显示这样就代表下载完成了,那个warn不用管的

步骤3:安装Hexo并写一篇文章

控制台输入:

cnpm install -g hexo-cli

这样几秒钟hexo主程序就下载安装完成了

接下来需要建立个文件夹放置你的博客主程序:

终端控制台输入 mkdir blog

然后输入cd blog/,进入这个文件夹

输入pwd,就可以查看blog的路径

sh-3.2# mkdir blog
sh-3.2# cd blog/
sh-3.2# pwd
/Users/zhangxin/blog 

输入sudo hexo init 初始化博客

sh-3.2# sudo hexo init

当出现Start blogging with Hexo!就代表下载完成

输入下面命令启动博客:

hexo s

访问:http://localhost:4000

显示博客主页:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZnO8xaX-1660129168926)(…/assets/image-20220810123548682.png)]

简单写一篇文章:

终端控制台键盘control + c 退出博客运行程序,

然后输入:

hexo new "我的第一篇博客"

然后:

hexo clean && hexo s

再次启动博客,然后访问:http://localhost:4000 即可看见刚刚新建的文章

你所有的生成的文章都在/Users/zhangxin/blog/source/_posts目录下

博客下配置文件../blog/themes/_config.yml语言改为中文支持:

language: zh-CN

到此,hexo博客本地程序搭建完成~~~

步骤4:注册GitHub账号

点击github官网右上角Sign up 注册一个账号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZxUx0IR-1660129168926)(…/assets/image-20220810131750324.png)]

依次输入邮箱、密码、用户名、y(需要你的真实邮箱,后面需要验证)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqG84mBI-1660129168926)(…/assets/image-20220810132440355.png)]

你的邮箱里面获取的code码填上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWNxg71Y-1660129168927)(…/assets/image-20220810132552360.png)]

注册成功后会弹出一个窗口让你创建一个新的仓库,

如果没有,点右上角的加号,第一个new repository,

仓库名称(repository name)格式:刚刚创建的用户名.github.io

如图,其他什么也不要动!然后点击create repository 即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3L1sXNO-1660129168927)(…/assets/image-20220810133534572.png)]

步骤5:本地安装git,将博客推送到GitHub,实现在线访问

终端控制台输入下面命令下载git的插件

cnpm install --save hexo-deployer-git

记事本打开你的博客目录下_config.yml文件,修改:

deploy:
  type: git
  repo: https://github.com/zx20219898/zx20219898.github.io.git
  branch: main

然后cd到你的博客目录下,然后:

hexo d

如图:出现INFO Deploy done:git表示成功!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SB5RGeeM-1660129168927)(…/assets/image-20220810134458715.png)]

现在你就可以通过你gtihub的名字 + .github.io来访问
比如我的博客: https://zx20219898.github.io/

Hexo常用命令

hexo new postName       #新建文章 在source/_posts 下生成
hexo new page pageName  #新建页面 在source/pageName 下生成
hexo deploy             #将.deploy目录部署到GitHub 简写指令:hexo d 
hexo generate           #生成静态页面至public目录 简写指令:hexo g 
hexo server             #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)简写指令hexo s 
hexo clean              #清除所有静态页面和缓存数据

配置Hexo-nexT主题

Hexo-nexT博客搭建一站式完全教程