Mac端使用Hexo + GitHub搭建博客
共 2755字,需浏览 6分钟
·
2020-12-20 09:23
之前有用Django搭建博客的一个教程系列,今天再发一个 Hexo + GitHub 的简单版本。虽然网上已经有了很多类似教程,但是能让非技术人员跟着做下来的很少,所以还是整理下。
Hexo 的官网介绍:
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
接下来开始开始一步步说明。
GitHub 账号注册及仓库创建
如果还没有 GitHub 账号,那么需要先创建 GitHub 账号(因为网页和博客数据是托管在 GitHub 上)。进入 GitHub官网,注册账号成功后,创建一个新的仓库。创建仓库的名字必须为 username.github.io,这里的 username 就是注册 GitHub 时的用户名,需要一致。如果不一致,后续会显示 404。
创建页面不需要选择太多内容。仓库选择公开就行。
安装node.js
首先检查是否安装了node.js
node -v # 是否出现安装版本信息,出现说明已经安装了
如果未安装,去Node.js官网下载相应的安装包,安装就行。
#安装完成之后打开终端,分别输入一下命令,如果出现版本信息,就说明安装成功。
node-v
npm -v
安装 Git
安装 Git 主要是因为需要提交代码到 GitHub。Mac 下安装Xcode就自带Git。
首先检查是否安装了 Git
git --version # 是否出现安装版本信息,出现说明已经安装了
未安装通过 Homebrew(安装Homebrew这里就不写了,有官网说明可以查看) 安装 Git,终端命令输入:
brew install git
配置SSH Key
配置 SSH Key 主要是为了方便本地博客文件上传到 GitHub。配置教程说明。
安装Hexo
安装 Hexo。接下来只需要使用 npm 即可完成 Hexo 的安装。如果可以的话,建议先去 Hexo 官网了解下相关命令。
npm install -g hexo-cli
如果有报错信息,比如
Error: EACCES: permission denied, access '/usr/local/lib/node_modules
原因: 执行命令行时没有获得管理员权限
解决方案:在命令行前面添加 sudo 获取管理员权限,输入管理员密码就行
例如原来的是: npm install -g hexo-cli
应该改为:sudo npm install -g hexo-cli
再输入密码就行。如果没有提示权限报错信息,则继续。
创建博客目录。在任意位置创建一个文件夹,如 MyBlog,cd 到该路径下。
# 在你选择的目录下创建一个MyBlog文件夹
mkdir MyBlog
# 进入目录
cd MyBlog初始化目录,在 MyBlog 目录下
hexo init
启动本地服务
hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.如果出现以上信息说明成功,浏览器输入http://localhost:4000/ 就可以访问了。
博客关联到 GitHub 仓库
博客文件夹MyBlog
中的_config.yml
文件,这是博客的主要配置文件。
编辑博客配置文件
_config.yml
中的deploy
节点。记得将username换成自己的usernamedeploy:
type: git
repo: git@github.com:username/username.github.io.git
branch: master注意:repo为这种形式的是配置了SSH Key之后的,如果没有配置则使用Https形式的地址。下图是地址位置。
为了能够使Hexo部署到GitHub上,需要安装一个插件,在博客目录下运行以下命令
npm install hexo-deployer-git --save
然后在博客目录中执行
#清除缓存
hexo clean
# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d在浏览器输入
username.github.io
就可以访问你的博客了
博客操作方式
创建新文章,博客目录下执行以下命令
hexo new '文章标题'
或者不想用命令行的话,直接去 source > _posts 文件夹下,新建博客md文档就行。博客其他的分类创建、标签创建这些博客操作,都可以看 Hexo官网。有详细说明。
编辑完成之后本地地址预览,在博客目录下运行以下命令
hexo clean && hexo g && hexo s
预览没问题后,完成之后上传Github,在博客目录下运行以下命令
hexo clean && hexo g && hexo d
博客的主题选择
博客的主题选择,可以直接去 Hexo官网查看,对于没有技术前端基础的同学,建议选择使用人数较多,文档详细的主题。因为一些较偏的主题文档不全,报错了会很麻烦。有些即使按照教程一步步操作,也有肯能因为 Hexo 的版本等各种原因而出现各类报错。我观察了下,Next主题维护和使用的人比较多,可以选择使用看看。
绑定个人域名
如果还想拥有个人博客域名,可以继续往下设置。在国内可以直接去万网买。进入万网/控制台/云解析DNS/域名解析/解析设置
获取 GitHub 的二级域名 IP 地址
ping username.github.io
#例如:ping zhangsan.github.io在万网解析域名如下设置
在 hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上购买的域名。比如:
在GitHub上面,打开
username.github.io
项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如:
域名绑定成功,已经可以用独立域名访问博客了。
相关链接:
Hexo 官网:https://hexo.io/zh-cn/docs/
Node.js官网:https://nodejs.org/en/
Next主题:https://github.com/theme-next/hexo-theme-next