Mac下使用Hexo+Github搭建个人博客

前言

Hexo是一个快速、简洁且高效的博客框架,最近有搭建个人博客的想法,便动手尝试了。
官方的文档

hexo博客系统搭建

Github账号注册及仓库创建

  • 进入Github官网,注册账号
  • 注册成功点击new仓库
    -w1309
  • 创建仓库的名字必须为username.github.io,我的用户名为Vicxiaoyezi,因此我创建的仓库就是Vicxiaoyezi.github.io,这是很关键的一点,很重要。输入名字后,直接点最下面绿色的按钮“Create repository”,创建新仓库。这一部分基本完成了,接下去需要在终端操作。
    -w746

安装Node.js

  • 首先检查是否安装了node.js

    1
    node -v # 是否出现安装版本信息,出现说明已经安装了
  • 如果未安装,去Node.js官网下载相应的安装包,一路安装即可。

    1
    2
    3
    #安装完成之后打开终端,分别输入一下命令,如果出现版本信息,就说明安装成功。
    node-v
    npm -v

安装Git

Mac下安装Xcode就自带Git。

  • 首先检查是否安装了Git

    1
    git --version # 是否出现安装版本信息,出现说明已经安装了
  • 未安装通过Homebrew安装git(Homebrew的安装参考),终端命令输入

    1
    brew install git

配置SSH Key

这一步不是必须的,配置SSH Key的话之后每次更新博客就不用都输入用户名和密码,可以方便一些。
配置参考Mac下配置SSH key

安装Hexo

  • 安装hexo
    如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

    1
    npm install -g hexo-cli
  • 创建博客目录
    在任意位置创建一个文件夹,如MyBlog,cd到该路径下

    1
    2
    3
    4
    # 在你选择的目录下创建一个MyBlog文件夹
    mkdir MyBlog
    # 进入目录
    cd MyBlog
  • 初始化目录,在MyBlog目录下

    1
    hexo init
  • 启动本地服务

    1
    hexo s # 也可是 hexo server

    如果出现以下信息说明成功,浏览器输入http://localhost:4000/ 就可以访问了。
    当然这个博客是本地的,别人是无法访问的,之后我们需要部署到GitHub上。

    1
    2
    INFO  Start processing
    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    到这里说明你的环境以及没有问题了,成功了搭建起了博客框架

博客关联到Github仓库

博客文件夹MyBlog中的_config.yml文件,这是博客的主要配置文件。

  • 编辑博客配置文件_config.yml中的deploy节点。记得将username(Vicxiaoyezi)换成自己的username

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

    注意:repo为这种形式的是配置了SSH Key之后的,如果没有配置则使用Https形式的地址。

  • 为了能够使Hexo部署到GitHub上,需要安装一个插件,在博客目录下运行以下命令

    1
    npm install hexo-deployer-git --save
  • 然后在博客目录中执行

    1
    2
    3
    4
    5
    6
    #清除缓存
    hexo clean
    # 产生静态网页
    hexo g
    # 部署到GitHub page上
    hexo d

    在浏览器输入username.github.io就可以访问你的博客了(例如:Vicxiaoyezi.github.io)。

博客的基本使用

  • 创建新文章,博客目录下执行以下命令

    1
    2
    hexo new '文章标题'
    #例如:hexo new Mac下使用Hexo-Github搭建个人博客

    这样会在本地博客的source->_posts路径下看到新建的文章,是md格式的,找一个markdown文本编辑器进行编辑即可。

  • 编辑完成之后本地地址预览,在博客目录下运行以下命令

    1
    hexo clean && hexo g && hexo s
  • 编辑完成之后上传Github,在博客目录下运行以下命令

    1
    hexo clean && hexo g && hexo d

Hexo博客美化及功能增添

Hexo官网主题
Hexo主题在Github上有很多,如

https://github.com/theme-next/hexo-theme-next
https://github.com/litten/hexo-theme-yilia
https://github.com/viosey/hexo-theme-material
https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak
https://github.com/pinggod/hexo-theme-apollo
https://github.com/ppoffice/hexo-theme-icarus

挑选自己喜欢的一款。当然自己能够DIY,但是路很长慢慢来。

绑定个人域名

如果你想拥有一个炫酷的域名,那就往下看吧

购买域名

可以去万网买,也可以去其它地方。具体购买过程就不多讲了。

配置DNS地址

进入万网-控制台-域名-具体域名管理-DNS修改
修改DNS为DNSPod的免费DNS地址:

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

-w887

获取自己 github 的二级域名的 IP地址

直接在终端输入以下命令(username换成自己的)

1
2
3
4
5
ping username.github.io
#例如:ping Vicxiaoyezi.github.io
```
## 域名解析
注册一个[DNSPod](https://www.dnspod.cn/)账号,登录之后把我们新注册的域名加进去,在域名解析界面添加3条记录

@ A 192.30.252.153
@ A vic.kim.
`
如图所示。
-w782

设置CNAME

在 hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上购买的域名。比如:
-w375

在github上面,打开username.github.io项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如:
-w770

到这里就绑定域名成功了。

最后晒上我的博客地址:vic.kim
祝大家也早日拥有自己的博客~