pic

本文介绍MacOS通过hexo搭建个人博客网站的流程

2022-8-17 | MacOS:11.6.8

  1. 什么是hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

  1. 环境配置

根据hexo官方文档,安装 Hexo 相当简单,只需要先安装下列应用程序即可:

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git
  1. 安装Git

​ Git官网只提供Homebrew等安装方法,本人使用镜像资源网站sourceforge.net下载安装包安装程序。

​ 注:Mac 用户如果在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。如果安装包出现“无法打开git-2.15.0-intel-universal-mavericks.pkg,因为它来自身份不明的开发者”,前往 设置 -> 安全性与隐私 进行操作。

  1. 安装Node.js

Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户,可以前往 淘宝 Node.js 镜像 (不是说淘宝购买,是指淘宝的源,我没试过)下载。Mac:使用 HomebrewMacPorts 安装。

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

Mac / Linux 用户:如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误,请遵循 由 npmjs 发布的指导 修复该问题。强烈建议 不要 使用 root、sudo 等方法覆盖权限。

报错示例:

1
2
3
4
5
6
7
8
9
10
npm notice 
npm notice New minor version of npm available! 8.15.0 -> 8.17.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.17.0
npm notice Run npm install -g [email protected] to update!
npm notice
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/hexo-cli
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/hexo-cli'

指导文件翻译

解决全局安装包时EACCES权限错误

如果在尝试全局安装软件包时发现EACCES错误,您可以:

·使用节点版本管理器(node version manager)重新安装npm(推荐)

·手动更改npm的默认目录

使用节点版本管理器重新安装npm

这是避免权限问题的最佳方法。要使用节点版本管理器重新安装npm,请按照“下载并安装node.js和npm”中的步骤进行操作。您不需要删除当前版本的npm或节点。js,然后安装节点版本管理器。

手动更改npm的默认目录

注:仅限macOS

为了将权限错误的可能性降至最低,您可以将npm配置为使用不同的目录。在本例中,您将在主目录中创建并使用隐藏目录。

  1. 备份(废话)
  2. 终端(terminal)里,在用户根目录(默认状态)创建文件夹:

mkdir ~/.npm-global

  1. 配置npm以使用新目录路径:

npm config set prefix '~/.npm-global'

  1. 在文本编辑器中,创建 ~/.profile 文件并添加此行:

export PATH=~/.npm-global/bin:$PATH

  1. 终端中,更新系统变量:

source ~/.profile

  1. 除了2-4步之外,如果你不想更改 ~/.profile 文件,也可以使用对应的环境变量:

NPM_CONFIG_PREFIX=~/.npm-global

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

建站

注:

安装以后,可以使用以下两种方式执行 Hexo:

  1. npx hexo <command>
  2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>

echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

启动服务站点

1
2
hexo g
hexo server

结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[hahaguowang@hahaguowangdeMac-mini hhgw_blog % hexo g
INFO Validating config
INFO Start processing
INFO Files loaded in 168 ms
INFO Generated: archives/index.html
INFO Generated: archives/2022/index.html
INFO Generated: index.html
INFO Generated: archives/2022/08/index.html
INFO Generated: fancybox/jquery.fancybox.min.css
INFO Generated: js/script.js
INFO Generated: css/style.css
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: fancybox/jquery.fancybox.min.js
INFO Generated: js/jquery-3.4.1.min.js
INFO Generated: css/fonts/fontawesome-webfont.woff2
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: css/images/banner.jpg
INFO Generated: 2022/08/17/hello-world/index.html
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO 17 files generated in 390 ms
hahaguowang@hahaguowangdeMac-mini hhgw_blog % hexo server
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

访问http://localhost:4000/ 至此hero就搭建好了。可以在本地访问了。

将hexo博客站点上传到github上

这里hhgw_blog目录下需要安装一个hexo的上传插件deploy-git

npm install hexo-deployer-git --save

ls -l 查看:

1
2
3
4
5
6
7
8
9
10
11
12
[hahaguowang@hahaguowangdeMac-mini hhgw_blog % ls -l
total 392
-rw-r--r-- 1 hahaguowang staff 0 8 17 19:54 _config.landscape.yml
-rw-r--r-- 1 hahaguowang staff 2441 8 17 19:54 _config.yml
-rw-r--r-- 1 hahaguowang staff 21863 8 17 20:15 db.json
drwxr-xr-x 225 hahaguowang staff 7200 8 17 20:17 node_modules
-rw-r--r-- 1 hahaguowang staff 166413 8 17 20:17 package-lock.json
-rw-r--r-- 1 hahaguowang staff 655 8 17 20:17 package.json
drwxr-xr-x 8 hahaguowang staff 256 8 17 20:03 public
drwxr-xr-x 5 hahaguowang staff 160 8 17 19:54 scaffolds
drwxr-xr-x 3 hahaguowang staff 96 8 17 19:54 source
drwxr-xr-x 3 hahaguowang staff 96 8 17 19:54 themes

修改hexo配置文件指定仓库路径

可在文件夹中直接打开文件 _config.yml ,也可通过vim直接编辑

找到Deployment加上(注意空格)

deploy:
type: git
repo: https://github.com/hhgw/hhgw.github.io
branch: main # 或者master 看自己的brench叫啥

推送命令:

1
hexo d

推送过程中需要输入你的github用户名和密码。但是在2021年8月14日开始github官方就加强安全访问。不能通过原有账号密码git访问,密码需要用官方的token或者采用ssh公私钥访问。否则会出现下图:鉴权失败(用户名密码错误)

1
2
3
4
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hhgw/hhgw.github.io/'
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html

解决方式就是获取token,登录github设置setting->Developer Settings->Prosonal access tokens 创建一个新token。然后就可以拿这个token当密码输入了。

另外,全局科学上网后,可能还会出现连接不成功的情况,系网络问题,多次尝试hexo d 即可。

重新设置密码:

在_config.yml中:

deploy:

type: git

repo: https://[email protected]/hhgw/hhgw.github.io

branch: main

其中xxxxxxx就是token,填充进去即可

尝试访问

输入地址即可访问成功:

https://hhgw.github.io

更换主题

博客样式太死板,想换成属于自己的风格,没问题我们可以更换博客的主题,来达到我们想要的风格。

到GitHub上搜索hexo主题或者hero自带的主题找一个喜欢的。

按照各自的主题文档上面一步步操作即可。

一般包括:

下载解压

放到主题包themes文件夹下

在hero配置文件 _config.yml 中修改为喜欢主题的名字

hexo server启动即可访问

更新仓库

本地调试完之后。就可以更新到github上了

1
2
3
4
5
hexo clean   清理
hexo g 构建静态文件
hexo d 上传至仓库
hexo server 本地预览
# 前面可能需要加 npx

添加.md文章

在站点文件夹中打开 git ,输入如下命令创建文章,其中 我的第一篇博客 为文章的标题。hexo会在source文件夹下创建一个markdowm的文件。这就是你要编写的文章。

Markdown 是一种可以使用普通文本编辑器编写的 标记语言,通过简单的 标记语法,它可以使普通文本内容具有一定的格式
基于 Markdown 语法的简洁性,它已经成为目前世界上最流行的用于书写博客的语言

hexo new "bulabula"

markdown 记得加title:

1
2
3
---
title: Hello World
---

草稿箱

很多时候我们需要先写成草稿,而暂时不发布出去。draft page就可以满足我们的要求,我们的网站上是看不到草稿文件的。

1
2
3
hexo new draft b          新建草稿
hexo server --draaft 预览草稿文件
hexo publish b 发布草稿

新建页面

有时我们不满足主题自由的一些页面,希望自己添加一些页面。

我们可以新建页面,新建页面则会在hexo的source中新建该页面文件并生成md文件,这就是你要编辑的博客页了。

1
hexo new page "resouces"

然后打开主题的配置文件_config.yml,在菜单属性menu中的添加如下(注意不是Hexo的配置文件)

将页面路径联接到页面上去

格式如下:

菜单自定义名称: /生成的页面名称


1
2
3
4
5
menu:
主页: /
技术笔记: https://xxxx
随笔: /tags/随笔/
资源: /resources

当我们点击资源时后会跳转到我们自定义的博客页了

域名:

购买域名后,

在source中,创建 CNAME 文件,文件添加域名 –> blog.hahaguowang.com。注意:文件名全部大写,没有后缀;文件内容只有域名;