Hexo 博客搭建教程
一、安装必要软件
首先需要安装 Node.js 和 Git,这两个软件是后续操作的基础。
同时,可以选择一款 Markdown 编辑器,如 Atom、Typora 或 Hexo-editor,用于撰写博客。
二、安装 Hexo
官方网址:Hexo 官网。这里可以找到全套的使用文档,Hexo 的作者是台湾人,对中文的支持很不错。
建立博客文件夹,建议建在非系统盘,例如 D:/Hexo/,这个目录将作为博客的根目录,后文以 [Blogroot] 指代。
在 [Blogroot] 路径下右键,选择 “Git Bash Here”,输入以下命令:
npm config set registry https://registry.npmmirror.com:将 npm 源替换为阿里的镜像,加快后续安装速度。
npm install hexo-cli -g:安装 hexo-cli,它是 hexo 的指令集。
hexo init:使用指令集初始化安装 Hexo 博客。
三、安装插件
在 [Blogroot] 路径下右键,选择 “Git Bash Here”,使用 npm 指令安装所需插件:
npm install hexo-generator-index --save:主页插件,最新版 Hexo 默认安装,可跳过。
npm install hexo-generator-archive --save:归档插件,最新版 Hexo 默认安装,可跳过。
npm install hexo-generator-category --save:分类插件,最新版 Hexo 默认安装,可跳过。
npm install hexo-generator-tag --save:标签插件,最新版 Hexo 默认安装,可跳过。
npm install hexo-server --save:服务插件,最新版 Hexo 默认安装,可跳过。
npm install hexo-renderer-marked --save:markdown 渲染支持插件,最新版 Hexo 默认安装,可跳过。
npm install hexo-renderer-stylus --save:nib css 支持插件,如无需求,可跳过。
npm install hexo-generator-feed --save:RSS 订阅支持插件,如无需求,可跳过。
npm install hexo-generator-sitemap --save:sitemap 生成插件,帮助搜索引擎抓取,如无需求,可跳过。
npm install hexo-admin --save:网页端 hexo 文档管理插件,如无需求,可跳过。
npm install hexo-deployer-git --save:git 部署插件,必须安装。
四、常用命令
hexo clean:清空缓存。
hexo generate或hexo g:重新编译。
hexo server或hexo s:打开本地访问。
hexo new
hexo deploy或hexo d:部署到云端。
五、本地预览
在 [Blogroot] 路径下右键,选择 “Git Bash Here”,输入hexo s。
然后在浏览器中打开localhost:4000,即可看到博客页面。如果安装了 hexo-admin 插件,可通过访问localhost:4000/admin管理文章并在可视化界面操作文章内容。
六、添加分类页面和标签页面
添加分类页面:
在 [Blogroot] 路径下右键,选择 “Git Bash Here”,输入hexo new page categories创建 “分类” 页面。
打开 [Blogroot]/sources/categories/index.md,在头部加上type: "categories"。
给文章添加分类,例如给 “Hello-world” 这篇文章添加分类,打开 [Blogroot]/sources/_posts/Hello-woeld.md,修改头部内容为:
plaintext
Copy
title: Hello-World
date: 2019-04-07 00:38:36
categories: 学习笔记
tags: [node.js, hexo]
添加标签页面:
在 [Blogroot] 路径下右键,选择 “Git Bash Here”,输入hexo new page tags创建 “标签” 页面。
打开 [Blogroot]/sources/tags/index.md,在头部加上type: "tags"。
给文章添加标签,例如给 “Hello-world” 这篇文章添加标签,打开 [Blogroot]/sources/_posts/Hello-world.md,修改头部内容为:
plaintext
Copy
title: Hello-World
date: 2019-04-07 00:38:36
categories: 学习笔记
tags: [node.js, hexo] # 逗号是英文逗号
或者:
plaintext
Copy
title: Hello-World
date: 2019-04-07 00:38:36
categories: 学习笔记
tags:
- node.js # 注意短线后有空格
- 📁Hexo
七、部署到 GitHub
注册 GitHub 账号:访问官网按照指示注册,注册过程中可能遇到 “Unable to verify your captcha response” 报错,解决方案如下:
升级浏览器内核,直接下载安装最新版 chrome 或者 Microsoft edge 浏览器。
把 github 域名添加到 hosts 文件中,可以自行百度。
新建仓库:注册成功后,在 github 首页单击头像 ->Your repositories,在自己的 GitHub 账号下创建一个新的仓库,命名为username.github.io(username 是你的账号名)。
科普:为什么要命名为username.github.io?GitHub Pages 有两种类型,User/Organization Pages 和 Project Pages,我们使用的是 User Pages。User Pages 是用来展示用户的,Project Pages 是用来展示项目的。用于存放 User Pages 的仓库必须使用username.github.io的命名规则,而 Project Pages 则没有特殊要求。User Pages 通过https://username.github.io进行访问,而 Projects Pages 通过https://username.github.io/projectname进行访问。
配置 Git 与 GitHub:
全局配置,在任意位置打开 git bash,设置用户名称和邮件地址:
git config --global user.name "akilarlxh"。
git config --global user.email "akilarlxh@gmail.com"。
设置完成后绑定 SSH key:
ssh-keygen -t rsa -C akilarlxh@gmail.com,-C后面加你在 github 的用户名邮箱。
less ~/.ssh/id_rsa.pub查看公钥内容,稍后加入 Github 账户的 ssh key 中。若使用 powershell 或 cmd,less 指令缺少必要的 C 语言环境,需要访问C:\Users\Username.ssh\id_rsa.pub复制。
打开 Github 网页,单击头像 ->settings,在设置页面找到 SSH and GPG keys,单击 New SSH key 新建 SSH KEY。
在 git bash 测试 ssh key 是否添加成功,输入ssh -T git@github.com,正常输出是:
plaintext
Copy
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
此处请输入 yes
Hi username! You've successfully authenticated, but GitHub does not
provide shell access.
配置过程中可能遇到报错ssh: connect to host gitee.com port 22: Connection timed out,这是由于端口 22 被占用,可改用其他端口,如ssh -T -p 443 git@ssh.github.com。
配置 hexo 部署插件内容:
确保安装了hexo-deployer-git,若没有,在 [Blogroot] 路径下右键,选择 “Git Bash Here”,输入npm install hexo-deployer-git --save。
打开 [Blogroot]/_config.yml,修改底部的deploy配置项。如果没有找到deploy配置项,则自己添加:
plaintext
Copy
站点部署到 github 要配置 Deployment
Docs: https://zespia.tw/hexo/docs/deploy.html
deploy:
type: git
repo:
github:
url: git@github.com:username/username.github.io.git # 记得把 username 替换为自己的用户名
branch: master #2020 年 10 月后 github 新建仓库默认分支改为 main,注意修改
# 也可以用另一种写法,二选一即可
github: git@github.com:username/username.github.io.git,master
注意deploy前面不要有空格,而所有: 后面都要有空格,对齐缩进情况要严格按照示例来写。
- 把本地 hexo 博客内容提交到 git 仓库:
若以上内容已准确配置,在 [Blogroot] 路径下右键,选择 “Git Bash Here”,输入:
hexo clean。
hexo generate。
hexo deploy。
不出意外,就可以在浏览器上输入https://username.github.io访问你的博客了(记得替换 username 为自己的用户名)。
网页部署阶段可能出现的 bug:
报错ERROR Deployer not found: git,可能是 git 用户名和邮箱配置错误,应输入git config --global user.name "username"和git config --global user.email "username@example.com"(这里的 %,在正确的格式中是一个空格,若之前没有打空格,邮箱和用户名根本就没有记录进去,需回退到这一步重新进行)。也可能是hexo-deployer-git插件没有安装正确,重新在 [Blogroot] 路径下右键,选择 “Git Bash Here”,执行npm install hexo-deployer-git –save,重新安装后再尝试提交。
八、域名配置
关于备案:因为 Hexo 博客是托管在 github 上的,除非购买的域名是.cn后缀的,或者博客使用的某些插件需要部署在另外的云服务上,否则不需要备案。
为使用自己的域名访问博客,需进行域名绑定:
首先获取博客当前默认域名的 IP,打开 cmd 或 powershell,输入ping username.github.io(username 记得替换成你的用户名)。
获取到的 IP 地址填入域名解析,以腾讯云为例,进入控制台 -> 域名注册 -> 我的域名,在购买的域名的操作栏选择解析,进入解析页面后需要添加两条记录。
在 [Blogroot]\source\ 目录下新建 CNAME 文件(注意不要有后缀名,就叫 CNAME 即可),在 CNAME 文件中添加上你购买的域名,例如example.com。
配置username.github.io仓库,打开username.github.io,点击仓库页面右上角的 setting,下拉找到 Github Pages 栏,在 Custom domain 中填入你购买的域名。
最后,重新部署一下 hexo 即可通过你的域名来访问博客了,输入hexo clean、hexo generate、hexo depoly。