码迷,mamicode.com
首页 > 系统相关 > 详细

Mac 上搭建基于 Hexo + GitHub 个人博客

时间:2018-04-17 00:01:02      阅读:948      评论:0      收藏:0      [点我收藏+]

标签:ash   输入   gnu   creat   个人   官方   邮箱   图片   uri   

环境配置

本人电脑系统: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是你建立的文件夹名称。

cdblog文件夹下,执行如下命令安装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

终端cdblog文件夹下,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 generatehexo 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.pubid_rsa,则直接进入步骤4.3将SSH key添加到GitHub中,否则执行4.2生成SSH key。

生成ssh key

执行如下命令生成public/private rsa key pair,注意将your_email@example.com换成你自己注册GitHub的邮箱地址

$ ssh-keygen -t rsa -C "your_email@example.com"

默认会在相应路径下(~/.ssh/id_rsa.pub)生成id_rsaid_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绿色按钮即可。

发布文章

终端cdblog文件夹下,执行如下命令新建文章:

$ hexo new "fileName"

文件名为fileName.md的文件会建在目录/blog/source/_posts下,fileName是文件名,为方便链接文件名不建议命名为汉字。你当然可以用vim来编辑文章。我在用Typora编辑器,所写即所得,虽然缺点也不少,但书写基本没什么问题。如果你有好用的markdown编辑器,请推荐我,感激不尽!

文章编辑完成后,终端cdblog文件夹下,执行如下命令来发布:

$ hexo generate         // 生成静态页面 
$ hexo deploy           // 将文章部署到GitHub

至此,macOS上搭建基于GitHub的Hexo博客就完成了。下面的内容是博客的一些个性化设置,如有兴趣,请各取所需。

安装主题(theme)

你可以到Hexo官方主题有哪些好看的 Hexo 主题?找自己喜欢的主题。这里以hexo-theme-next为例,终端cdblog目录下,执行如下命令:

$ 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

编辑完成后,终端cdblog文件夹下,执行如下命令(每次部署文章的步骤)来更新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       // 写入自己购买的域名,保存退出即可。

技术分享图片

终端cdblog目录下执行如下命令重新部署:

$ hexo clean
$ hexo generate
$ hexo deploy

注意:网上许多都说在GitHub上直接新建CNAME文件,如若这样的话,下次更新部署执行hexo deploy命令后,CNAME文件就会消失,因为本地没有此文件嘛!

域名解析

配置GoDaddy

购买好域名后,进入GoDaddy个人帐号中的管理域名选项,点击三个小点

技术分享图片

配置管理DNS

技术分享图片

依次键入a.dnspod.comb.dnspod.comc.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.mehttps://www.houhaibushihai.mehttps://nar1su.github.io,效果是一样的。

配置七牛

Hexo我们部署到GitHub很便捷,可惜GitHub给的免费空间很少。所以尽量还是不要把图片,视频等多媒体,大容量资源存于GitHub,否则很快资源耗尽。

七牛,是一个云存储服务提供商,注册并实名认证之后,你将免费享有10GB存储空间,每个月10GB下载流量、100万次GET请求和10万次PUT/DELETE请求。

注册七牛云

七牛云,建议实名认证获取额外的免费空间。

创建空间

注意我们添加的资源为对象存储,访问控制为公开空间

  1. 点击内容管理上传文件

  2. 点击内容管理,点击指定照片的 复制外链

  3. 然后回到本地 md 文件中只要写上图片语法就可以引用了。

![自己定义的图片名字](复制过来的外链)

OK了,这个时候你重新部署一下,看看是不是文章里已经有图片了呢!

添加评论板块儿

添加 Disqus 评论

  1. 注册 Disqus

  2. 点击 I want to install Disqus on my site

  3. Websit Name 就是 disqus_shortname 自己填写,但是要求全网唯一,设定后不可改变,比如我的是 narisu ,这个在配置 Hexo 的blog/themes/next/_config.yml文件时候需要用到。
    Category 选择种类,可以随便选;
    Language 语言选 Chinese 或者 English;
    然后点 Create Site 等待界面跳转。

  4. 选择 Basic 下的 Subscribe Now

  5. 选择 Configure DisqusWebsite URL 中输入你的博客域名。如下图:

技术分享图片

  1. 配置 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

Hexo

Mac上搭建基于GitHub的Hexo博客

Hexo搭配七牛存储图片等媒体资源

next主题之第三方评论系统

大道至简--hexo主题的归档如何设置成没有分页

添加分类页面(别忘记 layout: 字段的添加)

如需个性化设置可参考此帖

even 主题的更多设置

Mac 上搭建基于 Hexo + GitHub 个人博客

标签:ash   输入   gnu   creat   个人   官方   邮箱   图片   uri   

原文地址:https://www.cnblogs.com/narisu/p/8858982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!