GitHub Pages + Hexo + 绑定个人域名搭建个人博客(Mac篇)
目录
一、初识Hexo
快速、简洁且高效的博客框架,官网:https://hexo.io/zh-cn/
但是要知道它是个博客框架,有很多好看的主题https://hexo.io/themes/可以应用在自己的博客上,这篇文章要讲述如何用hexo写博客并部署到github上就好了。
二、环境配置
安装Hexo前需要安装Node.js、Git
(1)安装brew
在Mac上通过brew来安装,如果你没有安装brew,请打开终端输入下面命令来安装brew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
(2)安装Git
brew install git
如果在安装的过程中出现并长时间卡顿
brew updating...
则有一个解决方案:
在终端输入:
vim ~/.zshrc
然后在输入:
export HOMEBREW_NO_AUTO_UPDATE=true
最后:
source ~/.zshrc
原理:让brew不更新,这样下载速度就变得快
(3)安装Hexo
npm install -g hexo-cli
三、如何利用Hexo搭建博客
在桌面新建一个空文件夹blog因为我之前自己搭建一个名字一样,所以使用blog2演示);
(1)使用Hexo生成博客,初始化一个博客
进入blog文件夹:
(base) aaa@qq.com blog % pwd
/Users/caizhengjie/Desktop/blog
初始化:
hexo init
(2)启动hexo
hexo s
因为我之前搭建过,所以提示4000端口被占用:
解决方法如下:
sudo lsof -i:4000
查看被占用进程的pid
再输入
sudo kill -9 pid
pid为上一步相应查看到的,然后再继续hexo s,则成功。
浏览器输入:http://localhost:4000,可查看到默认生成了一篇博文:
(3)新建一篇博文
在终端输入ctrl+c断开刚刚的链接,新建一篇博文:
hexo n "发布第一篇个人博客"
接下来就是更改博文内容,可以选择用命令行,也可用开发工具,我直接使用WebStrom打开该文件了,找到相应的位置,做修改即可,MarkDown格式右侧可以直接看到样式。
同样在blog2文件下:
清理:
hexo clean
生成:
hexo g
启动:
hexo s
刷新页面则看到,内容已经更新上去了:
四、部署至Github
(1)登录github
https://github.com,没账号的新建一个,新创建一个仓库New repository,仓库名必须为:昵称.github.io:,输入描述,创建:
如果是创建过了,那里有红色叹号。
(2)安装git部署插件
命令行下,ctrl+c,退出命令,仍然在blog2目录下,安装git部署插件:
npm install hexo-deployer-git --save
(3)修改_config.yml的配置
更改blog2文件夹下,_config.yml的配置,我直接用webstorm了,用命令行修改也可以:
repo为第一步创建的git仓库
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/caizhengjie888/caizhengjie.github.io.git
branch: master
(4)回到命令行部署到远端
hexo d
中间会让输入github密码,输入即可,后续部署完成,即可访问你的远端地址:
https://github.com/caizhengjie888/caizhengjie.github.io.git
五、Hexo主题的使用
(1)选主题
选主题:https://hexo.io/themes/,有很多主题可供选择,也可使用网友推荐的自己喜欢的主题,有相应的预览、github地址
我这里使用的是:
https://github.com/liuyib/hexo-theme-stun/
(2)命令行输入进行安装
安装 «Stun»
进入 Hexo 根目录,执行指令:
git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
安装依赖 hexo-renderer-pug
npm install --save hexo-renderer-pug
(3)使用主题
修改 Hexo 根目录下的 _config.yml 文件:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: stun
(4)清理与启动
清理:hexo clean
生成:hexo g
启动:hexo s
在本地刷新预览http://localhost:4000之后,看到主题效果,可根据自己需要做相应修改即可。
(5)推至远端
ctrl+c退出上一步命令,然后推至远端:
hexo d
六、绑定域名
(1)申请域名
首先需要在阿里云申请域名
https://www.aliyun.com/ss/?k=%E5%9F%9F%E5%90%8D
(2)添加CNAME文件
在根目录下的source文件夹下新建CNAME文件,没有后缀。
在Webstorm中打开CNAME文件,在里边添加你的域名信息,如图:
(3)解析域名
打开阿里云首页
控制台->域名->域名列表->解析
设置主机记录@,记录类型为CNAME,记录值是.github.io。表示将http://这个主域名映射g.github.io
设置主机记录www,记录类型为CNAME,记录值是.github.io。表示将http://这个主域名映射g.github.io
(4)部署到GitHub上
在项目的Settings中,添加Custom domain到自己的域名:
当上面出现绿色勾是,说明已经部署完成了,下面可以访问一下我自己搭建的博客
https://www.apollojava.com/
本篇博客参考:https://blog.csdn.net/pang787559613/article/details/102606529
上一篇: python之正则表达式(字符)
推荐阅读
-
Hexo+github pages搭建个人独立网站,绑定域名全教程
-
Github pages+HEXO+域名绑定搭建个人博客
-
GitHub Pages + Hexo + 绑定个人域名搭建个人博客(Mac篇)
-
借助GitHub pages搭建静态个人网站并绑定域名
-
Hexo+Github pages博客绑定个人域名
-
我的博客不是梦——Github Pages+Hexo搭建个人博客
-
快速搭建个人博客:Hexo+NexT+GitHub Pages
-
Hexo+github pages搭建个人博客
-
利用 Github Pages 与 Hexo 搭建个人博客
-
Hexo + GitHub Pages搭建个人博客网站详细流程