一.导语
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 | //使用系统自带的 zsh,输入下面的命令,输入密码成功切换后重启终端即可 |
- 安装方式和 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 | hexo clean // 一定要先 clean,防止灵异事件发生 |
8.组合命令
1 | hexo d -g #在部署前先生成 |
等价于
1 | hexo g // 生成 |
五.将基于Hexo的本地博客部署到Github
1.个人Github上,创建一个新的Repositories。
Repositories的名字务必是 你的用户名.github.io
。例如我的用户名是 xiaoshitounen
则我的Repositories的名字是 xiaoshitounen.github.io
。
2.配置Git个人信息,生成 SSH 秘钥
① 如果是第一次,设置Git的user name和email
1 | git config --global user.name "name" |
② 生成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 | deploy: |
按照上面的格式修改deploy,yourname就是你的用户名,比如我的就是xiaoshitounen
5. 测试是否部署成功
运行下列命令,部署到对应的仓库中。
1 | hexo clean |
浏览器输入 https://yourName.github.io ,同理yourname也是你的用户名,比如我的就是 https://xiaoshitounen.github.io 。
如果出现的页面和之前本地部署后的页面一致代表部署到Github成功。
六.购买域名,关联自己的Hexo博客
1. 购买域名有很多种选择,我选择的是腾讯云。
我选择购买的是 .com
域名。首先是输入你想用的域名,查看是否被注册。没有被注册,就直接购买吧。(不建议购买 .cn 域名,可以考虑 .top 域名,真的便宜。)
2.购买域名之后必须要实名认证
购买域名后进行实名认证,我提交的证件是身份证,还需要身份证的截图。提交之后,一分钟没到我的就审核成功了。
3.进行域名解析
① 域名解析,通俗来讲也就是本地与服务器做映射。如果我们使用国内的服务器,我们还需要备案,其实备不备案都没啥,重点是用不起云服务器。所以,我们使用Github作为外网服务器。
② 配置DNS地址,修改 DNS 为 DNSPod 的免费 DNS 地址。(我的腾讯云默认就是免费DNS地址)
1 | f1g1ns1.dnspod.net |
③ 添加记录,第一个记录值就是部署到Github上的访问地址。其中A的两条记录指向的 ip 地址是 GitHub Pages 提供的 ip,通过在电脑的终端 ping 你部署到Github的地址
得到的。
4.完美绑定域名
① 如果不经过这一步,可能会有两个结果。第一,需要每隔一段时间就要去 ping 你部署到Github的地址
重新去解析域名。第二,关联到Github后,每次重新部署都要去重新去仓库中绑定我们的域名。
② 新建一个名为 CNAME 的文件,无后缀,内容为你的域名地址,将该文件放入本地博客的 source 文件夹里面
5.绑定域名
找到Github上对应的仓库,打开Setting。
往下拖动页面,找到Custom domains,填上你的域名,保存。
6. 测试是否部署成功
运行下列命令,部署到对应的仓库中。
1 | hexo clean |
浏览器输入 https://yourIp ,同理yourIp也是你购买的域名,比如我的就是 https:// 。
如果出现的页面和之前本地部署后的页面一致代表关联域名成功。