Win11搭建hexo并部署到GitHub

发表于 更新于 阅读次数： 本文字数： 978 阅读时长 ≈ 4 分钟

本地安装(Win11)

安装前提

在安装Hexo前，需要先安装以下程序

  • Node.js(Node.js版本需不低于10.13，建议使用Node.js 12.0及以上版本)
  • Git 设置npm代理
    编辑”C:\Users\user\.npmrc”文件，添加以下内容：
    https-proxy=http://proxy-server-address:port
    proxy=http://proxy-server-address:port
    查看当前代理
    npm config get proxy

安装Hexo

在电脑上新建一个文件夹，例如E:\hexo。进入该文夹在空白处点鼠标右键，选择Open Git Bash here，输入如下命令：

npm install -g hexo-cli

install -g命令是使用npm包管理工具进行全局安装，hexo-cli为hexo的客户端模块。
安装完成后，执行以下命令，Hexo会在指定文件夹中新建所需要的文件。

hexo init blog
cd blog
npm install
  • node-modules 依赖包
  • public 存放生成的页面
  • _config.yml 网站的配置文件
  • package.json 应用程序信息
  • scaffolds 模板文件夹
  • source 资源文件夹
  • thems 主题文件夹

修改hexo配置文件

hexo的配置文件位于站点根目录下，名字为：_config.yml，主要修改以下内容：

  • title 网站标题
  • subtitle 网站副标题
  • description 网站描述
  • keywords 网站关键字
  • author 作者名字
  • language 网站使用的语言，一般改为zh-CN
  • timezone 网站时区，一般改为Asia/Shanghai
  • url 网站网址
  • theme 主题名称，比如next
  • post_asset_folder 设为true后，执行命令$hexo new post_name会在source/_posts中生成和文章同名的文件夹，可以把图片等放到此文件夹中
  • 在post_asset_folder下面添加如下配置
marked:
  prependRoot: true
  postAsset: true

这时![](image.png)会被自动解析

其它的配置修改可参考官网

上传至GitHub

新建仓库

在GitHub个人主页新建一仓库，名称的前半部分为GitHub的用户名，后半部分为github.io
在git bash中输入以下命令：

git config --global user.name "yourname"
git config --global user.email "youremail"
ssh-keygen -t rsa -C "youremail"

yourname,youremail分别为GitHub的用户名和注册邮箱
点击头像选择Settings，点击左侧栏里的SSH and GPG keys，打开C:\Users\user.ssh目录下的id_rsa.pub文件，把内容复制到SSH keys中

部署到GitHub

打开blog目录下的_config.yml文件，找到文件末尾的Deployment添加以下内容：

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

在git bash中输入以下命令安装git部署工具：

npm install hexo-deployer-git --save

主题与插件

官网有很多的主题，Next一款很受欢迎的主题。

Next安装

在blog目录下运行如下命令；

npm install hexo-theme-next@latest

新建一个名为：_config.next.yml的空文件并运行如下命令：

cp node_modules/hexo-theme-next/_config.yml _config.next.yml

修改_config.yml将theme: landscape改为theme: next

修改主题配置文件(_config.next.yml)

  • Schemes 主题样式根据个人喜好选择，我个人喜欢Gemini
  • Dark Mode 黑暗模式
  • favicon 站点图标，使用自己的图标替换\hexo\blog\node_modules\hexo-theme-next\source\images下的文件
  • menu 菜单栏，取消要启用的相关菜单注释即可，需要注意的是除home和archives外其它的页面都需手动创建
  • sidebar 侧边栏，将display改为always
  • avatar 头像，rounded设置为true头像为圆形，rotated设置为true，鼠标悬停头像会旋转
  • excerpt-description 设为false使用<!-- more –>来分隔文章
  • Post wordcount display setting：文章字数统计，要启用此插件必须先安装
    npm install hexo-word-counter
  • codeblock：代码高亮，个人比较喜欢a11y-dark，更多的高亮主题请参考

如果使用不蒜子计数统计，可修改\node_modules\hexo-theme-next\layout_third-party\statistics目录下的busuanzi-counter.njk文件，将

<script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

修改为

<script defer src="https://vercount.one/js"></script>

其它的配置修改可参考官网文档根据个人需要进行修改