介绍 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页,这边就教大家怎么搭建Hexo并配置。大家可以参考Hexo官方文档 配合使用。
安装前提
安装 Hexo 相当简单,只需要先安装下列应用程序即可:
Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
Git
随着大前端的快速发展,node版本更新很快,我们在工作中,可以会有老版本的node的项目需要维护,也可能有新版本的node的项目需要开发,如果我们只有一个node版本的话将会很麻烦,nvm 应运而生,nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,如果需要管理 Windows 下的 node,官方推荐使用 nvmw 或 nvm-windows 。不过,nvm-windows 并不是 nvm 的简单移植,他们也没有任何关系。但下面介绍的所有命令,都可以在 nvm-windows 中运行,nvm是node 的版本管理器,可以方便地安装&切换不同版本的node
安装NVM 进入NVM-Windows项目发布地址: https://github.com/coreybutler/nvm-windows/releases ,选择最新发行版本nvm-setup.zip
下载:
安装需要注意两点
1、 把电脑上面的node环境先卸载干净(C:\Users\用户名\AppData\Roaming\node下面的文件也要解决干净)
2、 安装时,建议选择手动安装版,然后疯狂下一步就行,不要尝试改变安装目录。
如果不想放在C盘,例如放在D盘,安装路径是这样的:
第一步:D:/你想放的文件夹名
第二步:D:/你想放的文件夹名(最好不要中文名)/nodejs
检查安装是否成功
在搜索栏查找poweshell
,选中x86
的powershell
鼠标右击选择以管理员身份运行
。
在Powershell
下,输入NVM
,即可发现安装完成:
配置国内源 到你NVM
安装路径,*打开setting.txt
文件(如果没有,则创建即可),更改为:
1 2 3 4 5 6 root: D:\NVM path: D:\NVM\nodejs arch: 64 proxy: none node_mirror: https://npmmirror.com/mirrors/node/ npm_mirror: https://npmmirror.com/mirrors/npm/
解释参数:
root:NVM的安装地址。即上文的%NVM_HOME%
path:激活node.js时的存储路径,即上文的%NVM_SYMLINK%
arch:系统架构,如果你的Windwos不是x64
,则填32
proxy:是否走代理
node_mirror:node.js的下载源,这里使用的是淘宝源
npm_mirror:npm的下载源,这里使用的是淘宝源
使用NVM 在cmd或pwoershell使用命令
1 2 3 4 5 6 7 8 9 10 2 、安装方式 nvm install 版本号current:当前最新的版本 LTS:稳定版本 nvm install 19.8 .1 (当前稳定的最新版) 我安装了两个 nvm install 18.13 .0 nvm install 16.15 .1 使用nvm ls 或者 nvm list可以查看安装的不同node版本,*指向的就是当前版本
激活Node.js版本 我们安装好Node.js以后,需要激活它
安装Git 无脑下一步!!!Git的官网地址
安装hexo 先在NVM安装目录内建立2个目录node_cache和node_global
输入下面命令
1 2 npm config set prefix "D:\NVM\node_global" npm config set cache "D:\NVM\node_cache"
更换源
1 npm config set registry=http://mirrors.cloud.tencent.com/npm/
所有必备的应用程序安装完成后,还需要配置npm的全局变量到系统的变量里面
配置系统变量 配置NVM_HOME
和NVM_SYMLINK
编辑path
1 2 3 4 %NVM_HOME% %NVM_SYMLINK% %NVM_HOME% \node_global\%NVM_SYMLINK% \node_modules
使用Npm安装Hexo
如报错,更新一下npm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 npm install -g npm-windows-upgrade set-ExecutionPolicy RemoteSigned执行策略更改 执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险,如 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略? [Y ] 是(Y) [A ] 全是(A) [N ] 否(N) [L ] 全否(L) [S ] 暂停(S) [?] 帮助 (默认值为“N”): y npm-windows-upgrade npm-windows-upgrade v6.0.1 ? Which version do you want to install? 8.13 .2 Checked system for npm installation: According to PowerShell: D:\nodejs According to npm: D:\nodejs Decided that npm is installed in D:\nodejs Upgrading npm... | Upgrade finished. Your new npm version is 8.13 .2 . Have a nice day!
安装好以后,测试一下:
没有出现未知命令,说明安装成功。可以接下来操作了。
如果出现hexo : 无法加载文件 C:\Program Files\nodejs\hexo.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.micros oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1。
那是因为你用的是win11系统,你需要在设置->隐私和安全性->开发者选项->允许本地powershell脚本在为签名的情况下运行
应用之后,重新打开新的powershell,再次输入hexo即可。
创建hexo 创建你的博客的空白文件夹,然后打开文件夹,我们已经安装好Git,所以我们直接是由鼠标右键的Git Bash Here
在博客目录内初始化博客 初始化目录:
初始化后回生成许多文件
输入命令后,它会自动爬取hexo的初始化目录,在国内网络是非常不好的,如果出错需要删除目录内容重新执行命令直到成功。
构建hexo 初始化Hexo后,其实Hexo就可以使用了;构建Hexo:
启动Hexo内建服务器 其实,整个public
文件就是一个博客了,但是我们还要部署Nginx
等网络环境或者使用HBuilderX
等根据,启动Web服务器才能用浏览器本地IP(即:127.0.0.1
或localhost
)加端口进行访问;为了减少麻烦,可以使用Hexo内建服务器:
我们可以去127.0.0.1:4000
网址看看初始化页面的样子
部署Hexo到github 上述操作,我们已经把Hexo
部署在本地;接下来,我们来看看怎么部署到远程平台,部署到远程平台后,公网用户就可以访问了(也就是可以让你小伙伴通过浏览器访问到你的博客)。
创建github仓库
需要注意的是作为网站访问的这个仓库,仓库名称一定是,拥有者名+github.io
生成ssh keys
在博客文件夹根目录下,右键,调用git bash here 功能
输入命令,本地生成ssh keys ,有回车按回车,有(y/n)?就输入y
1 ssh-keygen -t ed25519 -C "your_email@example.com"
注意:如果你使用的是不支持 Ed25519 算法的旧系统,请使用以下命令:
1 ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
出现这个则生成成功
在电脑打开生成公钥的文件夹
路径:C:/用户/你的用户名/.ssh
找到后打开id_rsa.pub(默认记事本打开),复制公钥(ctrl+A全选, ctrl+C复制)
打开github,头像箭头,下拉选项setting(设置)-SSH与GPG keys -new ssh keys(新建ssh秘钥)
tilte随便起,然后ctrl+V粘贴到key里面
测试是否绑定成功
yes,然后按回车
出现successfully字样则绑定成功
上传博客到github仓库 修改配置文件 在创建博客文件夹的根目录下修改-config.yml文件
输入时注意冒号后面有空格,然后保存退出
安装hexo-deployer-git 1 2 3 npm install hexo-deployer-git --save
因为github在国外,有些时候推送会出现ssl出错,其实就是网络差,我们在Git Bash里面输入下面这行命令,不验证ssl:
1 git config --global http.sslVerify "false"
博客推送 在博客目录下命令窗口/终端输入
1 2 3 4 5 6 7 8 9 git config --global user.email "your_email" git config --global user.name "your_name" git config --list hexo cl && hexo g && hexo d
博客主题 打开hexo的主题网站
比如打开Ayer这款主题,打开后能看到主题的效果
一般在博客主题内会有github的项目链接或者安装和使用的指南
打开github项目有下面有个README.md的安装教程,其安装步骤我就不一一展示了,按教程来有手就行[doge]
解决图片不显示问题 更改hexo配置文件
安装npm插件 1 npm install https://github.com/CodeFalling/hexo-asset-image --save
修改Typora设置 打开文件菜单的偏好设置
打开图像选项,设置如下图