Mac安装hexo
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Mac安装hexo相关的知识,希望对你有一定的参考价值。
参考技术A Hexo是一个快速、简洁且高效的博客框架。 官方文档需要先安装下列应用程序:
Node.js安装教程可参考 nodejs安装
Git
使用npm安装:npm install -g hexo-cli
⚠️安装过程中如果出现报错,如下图所示:
报错原因:
(1)在查找原因中,看到有可能是权限不足够,在macOS系统下,运行需要添加sudo命令,即:sudo npm install hexo-cli -g
结果就解决了,在控制台中输入:hexo -v
(2)由于npm的官方镜像源在国外,访问有时会出现问题,可以尝试更改为国内镜像源加速软件的安装。众多网友推荐taobao的镜像源:
控制台输入命令:npm config set registry https://registry.npm.taobao.org
查看设置npm镜像源是否生效:npm config get registry
如果你熟悉npm命令的话,可以局部安装hexo包
控制台命令:npm install hexo
安装以后,可用一下两种方式执行hexo:
1. npx hexo <command>
2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>,即:echo'PATH="$PATH:./node_modules/.bin"'>> ~/.profile
Mac 上搭建基于 Hexo + GitHub 个人博客
环境配置
本人电脑系统:macOS
Node.js
生成静态页面。安装Node.js
Git
用于将本地 Hexo 内容提交到 Github。Xcode自带Git(前提:macOS已经安装了Xcode),若没有,可以参考 Hexo官网上的安装方法。
安装 Hexo
当 Node.js 和 Git 都安装好后,就可以正式安装 Hexo 了,终端执行如下命令:
$ sudo npm install -g hexo
输入管理员密码(Mac 登陆密码)即可开始安装。
注:
sudo
:linux系统管理指令
-g
:全局安装
注意:Hexo官网上的安装命令是
$npm install -g hexo-cli
,安装时不要忘记前面加上sudo
,否则会因为权限问题报错。
初始化
终端cd
到一个你选定的目录,执行hexo init
命令:
$ hexo init blog
注:blog是你建立的文件夹名称。
cd
到blog文件夹下,执行如下命令安装npm
:
$ npm install
执行如下命令,开启Hexo服务器:
$ hexo s
此时,浏览器中打开网址http://localhost:4000,能看到如下页面:
注:终端使用快捷键control + c可关闭Hexo服务器。
本地设置好后,接下来开始关联GitHub。
关联GitHub
创建仓库
登陆你的GitHub帐号,新建仓库,名为yours github username.github.io
固定写法,如nar1su.github.io
即下图中1
所示:
注意:图中
1
处的/
前后nar1su
的拼写必须一直,否则无法部署Hexo。
本地的blog
文件夹下内容为:
_config.yml
db.json
node_modules
package-lock.json
package.json
scaffolds
source
themes
终端cd
到blog
文件夹下,vim
打开_config.yml
,命令如下:
$ vim _config.yml
打开在最后的部分,修改成下边的样子:
deploy:
type: git
repository: https://github.com/nar1su/nar1su.github.io.git
branch: master
你只需要将repository
后的https:~~~
改为你自己的就好。在上图中2
处获取。Hexo 3.1.1版本后type:
值为git
注意:配置所有的
_config.yml
文件时(包括theme
文件夹中的_config.yml
),所有的冒号:
后边都要加一个空格,否则执行hexo
命令时会报错。
在blog
文件夹目录下执行生成静态页面命令:
$ hexo generate 或者:hexo g
此时若出现如下报错:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
则执行命令:
npm install hexo --save
若无报错,自行忽略此步骤
再执行配置命令:
$ hexo deploy 或者:hexo d
注意:若执行命令
hexo deploy
仍然报错:ERROR Deployer not found: git // 无法连接git或找不到git
无法连接git或找不到git,则执行如下命令来安装hexo-deployer-git:
$ npm install hexo-deployer-git --save
再次执行
hexo generate
和hexo deploy
命令。
若你未关联GitHub,则执行hexo deploy
命令时终端会提示你输入GitHub的用户名和密码,即
Username for 'https://github.com':
Password for 'https://github.com':
hexo deploy
命令执行成功之后,浏览器中打开网址https://nar1su.github.io(将nar1su
换成你的用户名)能看到和先前在本地打开http://localhost:4000时一样的页面。
为避免每次输入GitHub用户名和密码的麻烦,可参照下面4方法
添加ssh keys到GitHub
检查SSH keys是否存在GitHub
执行如下命令,检查SSH keys是否存在。
$ ls -al ~/.ssh
如果有文件id_rsa.pub
或id_rsa
,则直接进入步骤4.3将SSH key添加到GitHub中,否则执行4.2生成SSH key。
生成ssh key
执行如下命令生成public/private rsa key pair,注意将[email protected]换成你自己注册GitHub的邮箱地址。
$ ssh-keygen -t rsa -C "[email protected]"
默认会在相应路径下(~/.ssh/id_rsa.pub
)生成id_rsa
和id_rsa.pub
两个文件。
将ssh key添加到GitHub中
在终端使用cat
命令,前往文件夹~/.ssh
查看id_rsa.pub
文件,里面的信息即为SSH key,将这些信息复制到GitHub的Add SSH key页面即可。
$ cat ~/.ssh/id_rsa.pub
通过浏览器进入个人GitHub网站: GitHub -> Settings -> SSH and GPG keys -> New SSH:
Title 里任意添加一个标题,将复制的内容粘贴到 key 里,点击下方Add key
绿色按钮即可。
发布文章
终端cd
到blog
文件夹下,执行如下命令新建文章:
$ hexo new "fileName"
文件名为fileName.md
的文件会建在目录/blog/source/_posts
下,fileName
是文件名,为方便链接文件名不建议命名为汉字。你当然可以用vim来编辑文章。我在用Typora编辑器,所写即所得,虽然缺点也不少,但书写基本没什么问题。如果你有好用的markdown编辑器,请推荐我,感激不尽!
文章编辑完成后,终端cd
到blog
文件夹下,执行如下命令来发布:
$ hexo generate // 生成静态页面
$ hexo deploy // 将文章部署到GitHub
至此,macOS上搭建基于GitHub的Hexo博客就完成了。下面的内容是博客的一些个性化设置,如有兴趣,请各取所需。
安装主题(theme)
你可以到Hexo官方主题、有哪些好看的 Hexo 主题?找自己喜欢的主题。这里以hexo-theme-next为例,终端cd
到blog
目录下,执行如下命令:
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
配置blog/_config.yml
文件中的theme
字段为next
:
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
编辑完成后,终端cd
到blog
文件夹下,执行如下命令(每次部署文章的步骤)来更新GitHub上的部署:
$ hexo clean // 清除缓存文件(db.json)和已生成的静态文件(public)
$ hexo generate // 生成静态页面
$ hexo deploy // 将修改更新到GitHub
至于修改theme内容,比如:名称、描述、头像等,配置blog/_config.yml
文件和blog/themes/even/_config.yml
文件中对应的属性名称即可, 不要忘记冒号:
后加空格。 NexT 使用文档里有详细的介绍。
个人域名绑定
购买域名
我用的国外的GoDaddy(需要FQ)域名提供商,好处是不用走备案流程省事儿,然后使用DNSPOD解析域名。
好多人也在用国内的阿里万网,可以直接在其网站做域名解析。有兴趣的也可以试试。
配置GitHub端
在本地你的电脑/blog/source
目录下新建文件名为:CNAME
文件,注意没有后缀名!直接将自己的购买的域名写入即可。
$ vim Documents/blog/source/CNAME // 写入自己购买的域名,保存退出即可。
终端cd
到blog
目录下执行如下命令重新部署:
$ hexo clean
$ hexo generate
$ hexo deploy
注意:网上许多都说在GitHub上直接新建
CNAME
文件,如若这样的话,下次更新部署执行hexo deploy
命令后,CNAME
文件就会消失,因为本地没有此文件嘛!
域名解析
配置GoDaddy
购买好域名后,进入GoDaddy个人帐号中的管理域名
选项,点击三个小点
配置管理DNS
:
依次键入a.dnspod.com
、b.dnspod.com
和c.dnspod.com
,保存即可
转址
部分这样配置即可:
注:nar1su
替换为你的GitHub
用户名即可。附仅转址和掩蔽转址相关信息:
配置DNSPOD
进入DNSPOD(需FQ)注册并登陆,配置解析域名:
1) 先添加一个CNAME,主机记录写@,后面记录值写上你的xxxx.github.io
2) 再添加一个CNAME,主机记录写www,后面记录值还是xxxx.github.io
xxxx是你的GitHub用户名。这样别人用www和不用www都能访问你的网站(其实,www的方式,会先解析成xxxx.github.io,然后根据CNAME再变成xxx.com(你购买的域名),即中间是经过一次转换的)。建议直接提供不带www的域名链接,这样速度快。
上面,我们用的是CNAME别名记录,也有人使用A记录,后面的记录值是写github page里面的ip地址,但有时候IP地址会更改,导致最后解析不正确,所以还是推荐用CNAME别名记录要好些,不建议用IP。
等几分钟,刷新浏览器。访问https://houhaibushihai.me、https://www.houhaibushihai.me和https://nar1su.github.io,效果是一样的。
配置七牛
Hexo我们部署到GitHub很便捷,可惜GitHub给的免费空间很少。所以尽量还是不要把图片,视频等多媒体,大容量资源存于GitHub,否则很快资源耗尽。
七牛,是一个云存储服务提供商,注册并实名认证之后,你将免费享有10GB存储空间,每个月10GB下载流量、100万次GET请求和10万次PUT/DELETE请求。
注册七牛云
七牛云,建议实名认证获取额外的免费空间。
创建空间
注意我们添加的资源为对象存储,访问控制为公开空间
点击
内容管理
,上传文件
;点击
内容管理
,点击指定照片的复制外链
;然后回到本地 md 文件中只要写上图片语法就可以引用了。
![自己定义的图片名字](复制过来的外链)
OK了,这个时候你重新部署一下,看看是不是文章里已经有图片了呢!
添加评论板块儿
添加 Disqus 评论
点击
I want to install Disqus on my site
Websit Name
就是disqus_shortname
自己填写,但是要求全网唯一,设定后不可改变,比如我的是narisu
,这个在配置 Hexo 的blog/themes/next/_config.yml
文件时候需要用到。
Category 选择种类,可以随便选;
Language 语言选 Chinese 或者 English;
然后点 Create Site 等待界面跳转。选择 Basic 下的
Subscribe Now
。选择
Configure Disqus
,Website URL
中输入你的博客域名。如下图:
- 配置 Hexo 的
blog/themes/next/_config.yml
文件:
yml # Disqus disqus_shortname: narisu
注:disqus_shortname
填入你自己的 Websit Name
。
特定页面评论区禁用
禁用特定页面的评论区:
禁用about页面的评论模块儿方法:在 /source/about/ 下的 index.md 文件中,title 那栏设置(添加):comments: false 。如下:
---
title:
date: 2017-12-28 14:13:34
comments: false
---
归档 (Archive) 如何设置成没有分页
在站点配置文件
即: blog/_config.yml
文件中,添加代码:
# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
## category: 1
## tag: 1
Reference
添加分类页面(别忘记 layout:
字段的添加)
以上是关于Mac安装hexo的主要内容,如果未能解决你的问题,请参考以下文章