个人博客搭建教程 - Hexo
准备工具
Node.js 安装和配置
安装
下载路径:https://nodejs.org/en/download/
选择自己的系统和合适的版本
安装一直点 Next 就可以了,安装路径改为其他盘
Win+R 打开 cmd,运行 node -v 和 npm -v,看有没有输出版本信息
修改全局模块路径和缓存路径
当我们在执行 npm install express -g
命令时,g 表示 global 全局,会默认下载到 C 盘,可以放到其他盘
到 node.js 安装目录下面新建 node_global 和 node_cache 文件夹,在 node_global 文件夹下再建一个 node_modules 文件夹
命令行中执行以下两条命令:
1 | npm config set prefix "D:\Program\nodejs\node_global" # 路径替换为自己的 |
若使用了 nvm:
1 | npm config set prefix "D:\Program\nvm\v16.15.0\node_global" # 路径替换为自己的 |
在 node.js 的安装目录下,找到 node_modules/npm/npmrc
文件,用管理员模式打开编辑:
1 | # 添加以下命令: |
配置环境变量
在系统变量中,新建
变量名:NODE_PATH
变量值:node_global 文件夹下的 node_modules 路径 如:``D:\Program\nodejs\node_global\node_modules`
用户变量中的 Path 变量
将默认的 npm 路径 如:``C:\Users\Domenic\AppData\Roaming\npm`
修改为新建的 node_global 路径 如:``D:\Program\nodejs\node_global`
测试成果
配置完后,安装个 module 测试下,就安装最常用的 express 模块
管理员模式启动命令行,进行模块的全局安装
1 | npm install express -g # -g 是全局安装的意思 |
Git 安装
下载地址:https://git-scm.com/downloads
安装就一直点 Next
Git 的默认编辑器是 Vim,这个不用改,如果想要用 Notepad++ 或者 Notepad2,可以添加环境变量
在系统变量的 path 里面添加 Notepad++ 的安装路径 如:D:\Program\Notepad++
其他的编辑器配置方式也同理
1 | notepad++ 文件名.后缀 # 在 git bash 中调用 notepad++ 打开文件 |
测试是否安装成功:
1 | git --version # 命令行执行此代码 |
Hexo 安装
管理员模式启动命令行,进行 hexo-cli 的全局安装
1 | npm install hexo-cli -g |
搭建仓库
我们使用 Github 来搭建仓库 网址:https://github.com/
Github 账号的 用户名,注册邮箱,密码 很重要,因为在命令中需要使用这些信息
点击 New 来新建仓库
仓库名必须是 Github 用户名加上 .github.io 如:domeniczz.github.io
然后勾选 Add a README file,Add .gitignore 和 Choose a license 可以不勾选
之后就可以点击创建仓库了
SSH
打开文件资源管理器,进入任意一个文件夹 如:D:\Repository\
右键,点击 Git Bash Here,启动 Git Bash 命令行窗口
1 | # 在 Git Bash 执行以下命令 |
之后进入如下路径:C:\Users\用户名\.ssh
(这就是刚刚的命令生成的东西)
找到 id_rsa.pub 文件,然后使用 Notepad++ 或者其他编辑器打开,复制所有内容
Ctrl + A 全选,Ctrl + C 复制
之后进入 Github,点击右上角的用户头像,点击 Settings,在选择 SSH and GPG keys
点击 New SSH key 新建一个 ssh key
Title 填写什么无所谓 如:domeniczz blog
Key 中把刚刚复制的 id_rsa.pub 中的内容粘贴进去
之后测试 ssh 是否绑定成功:
1 | # 在 Git Bash 执行以下命令 |
如果要添加第二个仓库,比如 Gitee,需要再次操作一边 SSH 模块的步骤
本地生成博客内容
本地创建一个文件夹 如:D:\Repository\Domenic_Zhang_Blog
用管理员模式启动 Git Bash,之后用 cd 命令到文件夹 如:cd D:/Repository/Domenic_Zhang_Blog
1 | # 在 Git Bash 中执行命令 |
执行 hexo init
- 若提示 hexo: command not found,是因为没有正确配置环境变量
- 若提示 Failed to install dependencies,是因为没有用管理员身份启动
Hexo 是开源的框架,hexo init 是把 hexo 的开源仓库拷贝到了本地
1 | # 接着在 Git Bash 中执行命令 |
如果提示防火墙权限,就点击允许访问
显示:INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 说明打开服务器成功
我们可以复制网址 http://localhost:4000 来访问
Linux 环境的复制快捷键是:Ctrl + insert,按 Ctrl + C 就是关闭本地服务器
发布博客到互联网
进入 Github 仓库,按照以下步骤获取到仓库
进入本地博客的文件夹 如:D:\Repository\Domenic_Zhang_Blog
找到 _config.yml,使用 Notepad++ 或者其他编辑器打开
1 | # 拉到文件的最后 |
之后在 Git Bash 里面依次执行命令
Git Bash 的命令路径是本地博客的路径 如:/d/repository/Domenic_Zhang_Blog
1 | # 安装 hexo-deployer-git 自动部署发布工具 |
获取个人博客的 url:
进入仓库的设置,往下拉找到 Pages,点击 Visit site
就会看到:Your site is published at https://domeniczz.github.io/.../
主题安装
主题推荐
推荐几个主题:
Pure: https://github.com/cofess/hexo-theme-pure
Preview: http://cofess.github.io/
Melody: https://github.com/Molunerfinn/hexo-theme-melody
Preview: https://flytreeleft.org/
Butterfly: https://github.com/jerryc127/hexo-theme-butterfly
Preview: https://butterfly.js.org/ https://crazywong.com/
Diaspora: https://github.com/Fechin/hexo-theme-diaspora
Preview: https://fech.in/
Matery: https://github.com/blinkfox/hexo-theme-matery
Preview: http://blinkfox.com/
Maupassant: https://github.com/tufu9441/maupassant-hexo
Preview: https://www.haomwei.com/
示例安装
我选择安装的是 butterfly 主题
依次执行以下步骤(使用 npm 命令的时候,命令行要以管理员身份运行)
1 | # 安装方法一 |
修改 Hexo 根目录下的 _config.yml
1 | theme: butterfly # 主题设置为 butterfly |
下载安装 pug 以及 stylus 的渲染器
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
为了减少升级主题后带来的不便,建议:
- 如果已经在
source/_data/
创建了 butterfly.yml,删除掉 - 在 hexo 的根目录创建文件 _config.butterfly.yml,并把 主题目录 的 _config.yml 内容复製到 _config.butterfly.yml 中(以后只在 _config.butterfly.yml 中进行配置就行)
最后,可以执行 hexo g 生成页面,再执行 hexo s 来开启本地服务器,预览页面
更多的使用方法可以前往 https://butterfly.js.org/ 查看安装文档
Hexo 使用
Hexo 的使用文档:https://hexo.io/zh-cn/docs
命令
1 | # 括号内是简写 |
配置文件
先创建一个备份 _config_backup.yml
1 | # 可以调用自定义的配置文件 |
添加 Hexo 需要 包含、剔除、忽略 的文件(Hexo 默认忽略隐藏文件):
1 | # Include / Exclude file(s) |
文章插入图片:
1 | npm install hexo-renderer-marked # 安装相应的插件(新版 hexo 可自带了) |
1 | # 修改根目录的 _config.yml |
1 | # markdown 博客文件中,图片路径要写成: |
中英文间自动插入空格:
1 | # Insert a space between Chinese character and English character (中英文之间添加空格) |
写作
Hexo 创建的文章模板在 ./scaffolds 下面
1 | # 命令行方式新建 博客文章 |
自己也可以在 scaffolds 文件夹下面创建自定义模板
本文标题:个人博客搭建教程 - Hexo
文章作者:Domenic Zhang
发布时间:2022-11-13
最后更新:2022-11-30
原始链接:https://domeniczz.github.io/2022/11/13/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/
版权声明:The author owns the copyright, please indicate the source reproduced