使用hexo 搭建Github pages 个人博客


下面介绍本博客使用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'

权限问题,增加权限即可
https://cn.bing.com/search?q=macos+%E5%A6%82%E4%BD%95%E7%BB%99%E6%96%87%E4%BB%B6%E5%A4%B9%E5%A2%9E%E5%8A%A0%E6%9D%83%E9%99%90

四、博客初始化

#创建存储博客的文件夹
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 等工作可以自己看一些文章做一下。


文章作者: hnbian
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hnbian !
评论
 上一篇
hive 常用函数整理 3.逻辑运算 hive 常用函数整理 3.逻辑运算
1. 逻辑与操作: AND语法: A AND B 操作类型:boolean 说明:如果A和B均为TRUE,则为TRUE;否则为FALSE。如果A为NULL或B为NULL,则为NULL 举例: hive> select 1 from stu
2019-07-24
下一篇 
Hello World Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hex
2019-07-20
  目录