下面介绍本博客使用hexo搭建github pages的过程。
一、流程介绍
安装Homebrew –> 安装nodejs –> 安装hexo、npm –> 本地测试 –> 配置Github ssh key链接 –> 发布到Github pages –> 修改主题 –> 添加字数统计等插件 –> 后续待补充。
二、安装Homebrew
可以使用mac系统自带ruby环境,只需在终端下输入如下指令即可完成Homebrew的安装,如果以下链接失效可以去官网看看新的链接:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.1 测试是否安装成功
node -v
v12.6.0
npm -v
6.10.1
#打印版本号说明安装成功
2.2 问题解决
node command not found
可以尝试如下方法解决问题
vim ~/.bash_profile
打开文件后在文件内增加下面一行(将命令添加到环境变量中)
PATH=/usr/local/bin:/usr/bin:/usr/sbin:/bin:/sbin
三、安装hexo
Node.js和Git都安装成功后开始安装Hexo。安装时注意权限问题,加上sudo,其中-g表示全局安装。
sudo npm install -g hexo
3.1 问题解决
安装hexo时可能出现如下问题:
- 问题1
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo/bin/hexo
这是因为core-js 版本过低,可以使用如下命令将其升级
npm install -g core-js@3
- 问题2
permission denied, mkdir '/usr/local/lib/node_modules/hexo/node_modules/fsevents/.node-gyp'
四、博客初始化
#创建存储博客的文件夹
mkdir hello-gits.github.io
#进入到博客文件夹
cd hello-gits.github.io
#初始化本地博客,下载所需
hexo init
#安装npm
sudo npm install
#生成静态文件 (这些命令需要在该文件夹内执行)
hexo g
#启动服务器。默认情况下,访问网址为: https://localhost:4000/
hexo s
接下来通过浏览器访问 https://localhost:4000 查看博客,效果如下图
五、发布到github pages
5.1 创建仓库
新建仓库名称必须为user.github.io,如hello-gits.github.io。
5.2 关联远程仓库
#切换到博客目录下
cd hello-gits.github.io
#编辑该目录下 _config.yml 文件
vim _config.yml
打开后到文档最后部分,将deploy配置如下。
deploy:
type: git
repository: git@github.com:hello-gits/hello-gits.github.io.git
branch: master
5.3添加ssh keys到GitHub
添加ssh key后不需要每次更新博客再输入用户名和密码。首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中,否则新生成ssh key。
执行下述命令生成新的ssh key,将your_email@example.com改成自己注册的GitHub邮箱地址。默认会在~/.ssh/id_rsa.pub中生成id_rsa和id_rsa.pub文件。
#生成 ssh key
ssh-keygen -t rsa -C "your_email@exampl"
#打开ssh key 信息文件,并复制文件中的内容
vim ~/.ssh/id_rsa.pub
将ssh key 内容复制到 GitHub -> Setting -> SSH keys -> add SSH key
title 可以标注本机名称,以便将来删除,点击Add key完成添加。
这时可以通过 hexo d 命令将博客部署到GitHub之中,可以通过 your_email.github.io 访问看到更新内容。
5.4 将博客更新到github pages
#部署博客到github
hexo d
接下来可以去你新建仓库的同名地址访问到你的博客,例如我的博客地址为:https://hello-gits.github.io
六、更换主题
可以在一下网址找到你喜欢的主题:
https://www.zhihu.com/question/24422335
https://hexo.io/themes/
本博客主题地址:https://github.com/blinkfox/hexo-theme-matery
将喜欢的博客clone 到自己的主题文件夹下
cd hello-gits.github.io
#clone 主题
git clone https://github.com/iissnan/hexo-theme-next themes/next
#修改主题
vim _config.yml
#theme的名称landscape更改为next
七、其他设置
7.1 新建分类 categories 页
categories 页是用来展示所有分类的页面,如果在你的博客 source 目录下还没有 categories/index.md 文件,那么你就需要新建一个,命令如下:
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md,至少需要以下内容:
---
title: categories
date: 2019-07-21 17:25:12
type: "categories"
layout: "categories"
---
7.2 新建标签 tags 页
tags 页是用来展示所有标签的页面,如果在你的博客 source 目录下还没有 tags/index.md 文件,那么你就需要新建一个,命令如下:
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md,至少需要以下内容:
---
title: tags
date: 2019-07-21 17:25:20
type: "tags"
layout: "tags"
---
7.3 新建关于我 about 页
about 页是用来展示关于我和我的博客信息的页面,如果在你的博客 source 目录下还没有 about/index.md 文件,那么你就需要新建一个,命令如下:
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md,至少需要以下内容:
---
title: about
date: 2019-07-21 17:25:30
type: "about"
layout: "about"
---
7.4 新建友情连接 friends 页(可选的)
friends 页是用来展示友情连接信息的页面,如果在你的博客 source 目录下还没有 friends/index.md 文件,那么你就需要新建一个,命令如下:
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md,至少需要以下内容:
---
title: friends
date: 2019-07-21 17:25:43
type: "friends"
layout: "friends"
---
八、插件安装(可选)
8.1 代码高亮
由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:
npm i -S hexo-prism-plugin
然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:
highlight:
enable: false
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
8.2 搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
search:
path: search.xml
field: post
8.3 中文链接转拼音
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
8.4 文章字数统计插件
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后在本主题下的 _config.yml 文件与主题文件夹中的_config.yml文件,激活以下配置项即可:
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true
九、后记
到这里github 博客就算基本搭建成功了,后面还有一些如google 收录、域名绑定、SEO 等工作可以自己看一些文章做一下。