一.导语

1.文章讲述的内容:

Mac平台搭建本地个人博客,并部署到Github以及个人域名上。

2.准备:

  • Git是什么?
    Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。它的作用
    和Svn类似,就是一个版本控制的工具,用它可以将我们写的代码提交到Github上。

  • Github是什么?
    GitHub是一个利用Git进行版本控制、专门用于存放软件代码与内容的共享虚拟主机服务。

  • GitHub Pages是什么?
    Github Pages设计的初衷是为托管在GitHub上的项目提供介绍页面,开发者们可以通过GitHub Pages为他们的每一个项目创建一个用于介绍该项目的静态网站,不过由于他的空间免费而且稳定,因此用它搭建一个个人博客网站是再好不过了。

  • Hexo是什么?
    快速、简洁且高效的博客框架。

二.环境搭建

查看本电脑 git 和 node 的版本情况的命令:

1.Git

  • 直接去AppStore获取Xcode即可,Xcode安装的时候会安装git。

2.Node

  • 首先说终端,zsh、bash 都是 shell,zsh 比 bash 更加强大,功能也更加完善。Mac的终端默认是 bash 。
1
2
3
4
5
//使用系统自带的 zsh,输入下面的命令,输入密码成功切换后重启终端即可
chsh -s /bin/zsh

//切换回 bash
chsh -s /bin/bash

  • 安装方式和 windows 平台不一样,首先需要安装 nvm 。安装命令如下:
1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh

  • 使用 nvm 安装 node。

3.Hexo

  • 本文安装命令可能失效,请以官网为准

  • 安装 Git 后,因为 npm 命令是 node 里面的,所以我们需要先安装 node。两个都安装好之后,打开终端,输入安装命令:

1
npm install -g hexo-cli

  • 打开终端。输入命令hexo --version检查Hexo版本。

三.基于Hexo搭建本地博客

1.首先在你想要放置博客本地文件的地方创建一个文件夹,取名任意,只需要确保文件夹里面的内容是空的即可。

2.终端进入该文件夹,输入以下命令。

1
hexo init

3.提前安装一个扩展,接着在之前输入的命令后继续输入下列命令。不然会出现错误:deloyer not found:git

1
npm install hexo-deployer-git --save

4.在终端输入命令:hexo g生成静态网站文件,接着输入命令hexo s打开本地服务器。通过http://localhost:4000/可以查看结果

5. 浏览器输入http://localhost:4000/出现上面的图片就代表本地的Hexo博客部署成功

四.Hexo博客常用命令

1.命令:在hexo站点根目录(我创建的放置博客本地文件的文件夹名为blog)下生成public文件夹

1
hexo g 或 hexo generate

生效新增、修改、更新的文件

2.命令:删除hexo站点根目录下生成public文件夹

1
hexo clean

建议所有操作前(手动删除文章的时候,之后务必执行这条命令)都执行这条命令,防止发生灵异事件。

3.命令:启动本地服务器预览

1
hexo s 或 hexo server

浏览器输入http://localhost:4000/查看博客内容。

4.命令:以调试模式启动本地服务器预览

1
hexo s --debug

在此模式下,对文件的更改无需停止网站只需刷新即可看到效果,调试非常方便。

5.命令:部署到设定的仓库

1
hexo d 或 hexo deploy

将更新的内容上传到设定的仓库。

6.命令:创建新的文章

例如: hexo new photo "my-first-blog" 上述指令执行时,Hexo 会尝试在 scaffolds 中寻找photo.md布局,若找到,则根据该布局新建文章;若未找到或指令中未指定该参数,则使用post.md新建文章。

1
hexo new [layout] "title"

Hexo 有三种默认布局:post、page 和 draft,一般使用post.md布局。你可以在scaffolds文件夹中自定义你的layout,在生成文章的时候你就可以直接用了。在下一篇hexo博客的具体配置中会详细说。

如果deploy类型是git,则需要安装npm install hexo-deployer-git --save,正好和我们之前说的提前安装的扩展相呼应。

7.删除文章

只需在本地把source/_posts文件夹下的文章源文件删除后,执行以下命令重新部署即可。

1
2
hexo clean // 一定要先 clean,防止灵异事件发生
hexo s

8.组合命令

1
hexo d -g #在部署前先生成

等价于

1
2
hexo g   // 生成
hexo d // 部署

五.将基于Hexo的本地博客部署到Github

1.个人Github上,创建一个新的Repositories。

Repositories的名字务必是 你的用户名.github.io 。例如我的用户名是 xiaoshitounen 则我的Repositories的名字是 xiaoshitounen.github.io



2.配置Git个人信息,生成 SSH 秘钥

① 如果是第一次,设置Git的user name和email

1
2
git config --global user.name "name"
git config --global user.email "email"

② 生成SSH 密钥,打开Git Bash 执行如下命令:

1
ssh-keygen -t rsa -C "youremailaddress"

执行完会提示你输入一些信息,这里我们直接一路回车即可,密码设置为空。

3.查看 SSH 密钥,并添加 SSH 秘钥

① 根据生成 SSH 秘钥过程中提示的 .ssh 文件夹路径,打开 id_rsa.pub 复制里面的内容,打开 https://github.com/settings/ssh 找到 Add SSH key,内容粘贴进Key,Title随便写并保存。

② 添加 ssh 的作用是你的 GitHub 就可以和你本地的机器进行 push 和 pull 操作了,不需要输入任何的密码,GitHub 就已经知道你是操作的了。

4.配置hexo站点根目录的 _config.yml 配置文件的deploy

1
2
3
4
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master

按照上面的格式修改deploy,yourname就是你的用户名,比如我的就是xiaoshitounen

5. 测试是否部署成功

运行下列命令,部署到对应的仓库中。

1
2
3
hexo clean
hexo g
hexo d

浏览器输入 https://yourName.github.io ,同理yourname也是你的用户名,比如我的就是 https://xiaoshitounen.github.io

如果出现的页面和之前本地部署后的页面一致代表部署到Github成功。

六.购买域名,关联自己的Hexo博客

1. 购买域名有很多种选择,我选择的是腾讯云

我选择购买的是 .com 域名。首先是输入你想用的域名,查看是否被注册。没有被注册,就直接购买吧。(不建议购买 .cn 域名,可以考虑 .top 域名,真的便宜。)

2.购买域名之后必须要实名认证

购买域名后进行实名认证,我提交的证件是身份证,还需要身份证的截图。提交之后,一分钟没到我的就审核成功了。

3.进行域名解析

① 域名解析,通俗来讲也就是本地与服务器做映射。如果我们使用国内的服务器,我们还需要备案,其实备不备案都没啥,重点是用不起云服务器。所以,我们使用Github作为外网服务器。

② 配置DNS地址,修改 DNS 为 DNSPod 的免费 DNS 地址。(我的腾讯云默认就是免费DNS地址)

1
2
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

③ 添加记录,第一个记录值就是部署到Github上的访问地址。其中A的两条记录指向的 ip 地址是 GitHub Pages 提供的 ip,通过在电脑的终端 ping 你部署到Github的地址 得到的。

4.完美绑定域名

① 如果不经过这一步,可能会有两个结果。第一,需要每隔一段时间就要去 ping 你部署到Github的地址 重新去解析域名。第二,关联到Github后,每次重新部署都要去重新去仓库中绑定我们的域名。

② 新建一个名为 CNAME 的文件,无后缀,内容为你的域名地址,将该文件放入本地博客的 source 文件夹里面

5.绑定域名

找到Github上对应的仓库,打开Setting。

往下拖动页面,找到Custom domains,填上你的域名,保存。

6. 测试是否部署成功

运行下列命令,部署到对应的仓库中。

1
2
3
hexo clean
hexo g
hexo d

浏览器输入 https://yourIp ,同理yourIp也是你购买的域名,比如我的就是 https:// 。

如果出现的页面和之前本地部署后的页面一致代表关联域名成功。

七.参考文章

手把手教你用Hexo+Github 搭建属于自己的博客

手把手教你搭建 Hexo + GitHub 博客

hexo+github搭建个人博客(超详细教程)

Hexo+GitHub 快速搭建个人博客(二)—- 域名解析

Hexo+Github 绑定域名

mac系统搭建hexo环境