Hexo Mac和Git搭建个人博客以及博客如何绑定自己的域名

Posted on | In

Hexo Mac和Git搭建个人Blog以及绑定自己的域名流程

在Mac上使用Hexo搭建自己的Blog以及配置自己的域名，开始学习写Blog，记录自己的学习。

一、准备工作

  1. Hexo https://hexo.io/zh-cn/docs/

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

  1. 安装前提

    1. Mac 安装 brew
    1
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    1. 搭建Node.js环境
    1
    2
    brew install node 安装
    npm -v 查看版本
    1. 安装Hexo博客框架工具
    1
    2
    3
    npm install hexo-cli -g  安装

    hexo 检查命令是否可用
    1. Mac 安装Wget 用于下官网 hexo 的稳定版主题
    1
    2
    brew install wget --with-libressl 安装
    brew link wget 查看是否可用
    1. Git 和 GitHub 账号

二、搭建博客 切换到 https://github.com/

如下举例说明：maoai-xianyu 为例，你需要设置自己的blog

  1. 创建一个github仓库

image

  1. 点击项目的settings去配置Github Pages

image

image

  1. 选择一个theme,之后变成

image

  1. 如是我们可以 https://maoai-xianyu.github.io/ 访问自己的博客，当然目前只是默认网站，也是以后我们要把自己的写的blog发布到的地方。

三、配置本地博客站点

  1. 进入自己的mac目录
1
hexo init codingtkBlog

image

1
2
3
4
5
hexo g  //g是generetor的缩写，生成博客

hexo s  //s是server的缩写，启动服务

浏览器输入 http://localhost:4000/ 可以看到hexo默认主题显示的博客样式
  1. 同步Github,允许公共访问

在github上，获取博客的地址 https

image

然后在codingtkBlog根目录下的 _config.yml 文件，修改 deploy 下的配置

image

在github上，获取博客的地址 SSH

image

然后在codingtkBlog根目录下的 _config.yml 文件，修改 deploy 下的配置

image

1
2
3
4
5
6
题外话:
1. 不喜欢mac自己的终端，可以下载一个 item2 可以有更好的体验
关于生成 SSH KEY
2. 输入 .ssh
   2.1 如果有，就执行  vim id_rsa.pub 可以查看对应的公钥，然后将其放入 github
   2.2 如果没有，就 mkdir ~/.ssh  然后 ssh-keygen -t rsa -C "your_email@example.com"  cat id_rsa.pub 查看公钥  或者用  vim id_rsa.pub 显示公钥，然后将其放入 github

最后执行命令

1
2
3
4
npm install hexo-deployer-git —save //安装部署插件
hexo d //部署到github

访问 https://maoai-xianyu.github.io/ 就和本地 http://localhost:4000/ 显示的一样了

四、修改博客主题

  1. 创建next文件夹
1
mkdir themes/next
  1. 下载主题Next目前比较流行，也可以自己选择 https://github.com/hexojs/hexo/wiki/Themes
1
2
3
$ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

这里的 wget 如果提示没有，就需下载 看准备工作的2
  1. 修改博客配置文件，更换主题配置

修改博客根目录(不是next主题)下的_config.yml文件，搜索theme字段，并将其值修改为next。

image

1
2
3
4
5
6
7
hexo clean  //清理缓存

hexo g    //重新生成博客代码

hexo d   //部署到本地

https://maoai-xianyu.github.io/  切换主题

五、网站美化

对应的显示没有刻意的研究，目前可以参考一些大神

  1. hexo的next主题个性化教程
  2. Hexo设置主题以及Next主题个性设置

六、发布博客

  1. 进入博客目录 我的是 codingtkBlog
  2. hexo new “我个人博客的第一篇博客，哈哈哈…”
  3. hexo g //生成网页
  4. hexo d //部署到远端(github)

七、管理博客在不同的电脑

我们将我们本地生成的blog，提交的gihub，那么就可以在不同的电脑上去整理了。

八、配置自己的域名

我的是腾讯的域名 www.codingtk.com

  1. 打开腾讯云控制后台，点击域名查看对应的信息

image

  1. 配置域名解析

image

  1. 在本地博客目录下创建 CNAME 文件

    1. 在 odingtkBlog/public 创建 CNAME 文件
      image
    2. 打开 CNAME 文件 添加域名 www.codingtk.com

    3. 发布CNAME

      1
      2
      hexo g  //重新生成博客代码
      hexo d // 发布到github

    4. 访问 我的域名 和 访问 我的Blog 是同一个地方了

总结

学习，需要很努力的坚持。加油